Vue中使用Typescript及Typescript基础

这篇具有很好参考价值的文章主要介绍了Vue中使用Typescript及Typescript基础。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

准备工作
新建一个基于ts的vue项目

通过官方脚手架构建安装

# 1. 如果没有安装 Vue CLI 就先安装
npm install --global @vue/cli

最新的Vue CLI工具允许开发者 使用 TypeScript 集成环境 创建新项目。
只需运行vue create my-app 然后选择选项,箭头键选择 Manually select features,确保选择了 TypeScript 和 Babel 选项
Vue中使用Typescript及Typescript基础,vue.js,typescript,前端

在已存在项目中安装typescript

在建好的vue项目中执行

vue add @vue/typescript

Vue中使用Typescript及Typescript基础,vue.js,typescript,前端
和之前js构建的项目结构没有什么不同,主要是js后缀变成了ts后缀,还多了tsconfig.jsonshims-tsx.d.tsshims-vue.d.ts这几个文件,这几个文件的主要功能如下:
tsconfig.json: typescript配置文件,主要用于指定待编译的文件和定义编译选项
shims-tsx.d.ts: 允许.tsx 结尾的文件,在 Vue 项目中编写 jsx 代码
shims-vue.d.ts: 主要用于 TypeScript 识别.vue 文件,Ts 默认并不支持导入 vue 文件

TS特点

  • 类型注解、类型检测
  • 接口
  • 泛类
  • 装饰器
  • 类型声明
类型注解和编译时类型检查

使用类型注解约束变量类型,编译器可以做静态类型检查,使程序更加健壮

类型基础
// 类型注解
let var1: string;

var1 = 'Jenney'
// var1 = 1 // no ok

// 类型推断
let var2 = true;
// var2 = 1 // no ok

// 常见原始类型: string,number,boolean,undefined,null,symbol

// 类型数组
let arr: string[]
arr = ['tom', 'jerry']

// 任意类型any
let varAny: any;
varAny = 'tom'
varAny = 1

let arrAny: any[]
arrAny = [1, true, 'free']

// 函数中类型约束
//(第一个string代表参数必须有且是string类型,第二个string代表返回值必须有且是string类型)
function greet(person: string): string {
  return 'hello, ' + person
}
const ret = greet('tom')

// void类型,常用于没有返回值的函数
 function warn(): void {}
类型别名 type

使用类型别名自定义类型,以达到类型复用

// let Foobar1 : { foo: string, bar: number }
// let objType1 = {
//   foo: 'fooo',
//   bar: 1
// }
//以上方法类型无法复用
// 使用type定义类型别名,使用更便捷,还能复用
type Foobar = { foo: string, bar: number }
let objType: Foobar
objType = {
  foo: 'fooo',
  bar: 1
}

范例:

//1.使用类型别名定义Feature,types/index.ts
export type Feature = {
  id: number,
  name: string
}

//2.使用自定义类型,HelloWorld.vue
<template>
  <div class="hello">
    <li>
      {{features.name}}
      <!-- <li v-for="item in features" :key="item.id">{{item.name}}</li> -->
    </li>
  </div>

</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
// 导入
import { Feature } from '@/types';

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
  features: Feature = {id:1,name:'类型注解'}
}
</script>
<style scoped>
</style>
接口 interface(和接口别名的功能一致)
interface Barfoo {
  foo: string;
  bar: number;
}

类型别名和接口区别:
type vs interface 官方文档
总结:
在大部分情况下完全可以互换
1.大部分的区别是IDE(代码提示)的影响,对程序本身不影响
2.在2.7版本前不支持类型别名,在通用性来讲接口更好点,
(1)如果要写通用的库,建议用接口
(2)但是在使用别名的时候语义的感觉和描述更强一些,所以如果是简单的功能用别名更好一下

联合类型 |

希望某个变量或参数的类型是多种类型其中之一

let union: string | number;
union = '1'; // ok
union = 1; // ok
交叉类型 &

并集
想要定义某种由多种类型合并而成的类型使用交叉类型

type First = {first: number};
type Second = {second: number};
// FirstAndSecond将同时拥有属性first和second 
type FirstAndSecond = First & Second;
函数
//必填参:参数一旦声明,就要求传递,且类型需符合
function greeting(person: string): string {
  return "Hello, " + person;
}
greeting('tom')

//可选参数:参数名后面加上问号,变成可选参数
function greeting(person: string, msg?: string): string {
  return "Hello, " + person;
}

//默认值
function greeting(person: string, msg = ''): string {
  return "Hello, " + person;
}

//函数重载

// 重载1
function watch(cb1: () => void): void;
// 重载2
function watch(cb1: () => void, cb2: (v1: any, v2: any) => void): void; // 实现
function watch(cb1: () => void, cb2?: (v1: any, v2: any) => void) {
	if (cb1 && cb2) {
		console.log('执行watch重载2');
	} else { 
		console.log('执行watch重载1');
	}
 }

ts中的类和es6中大体相同,这里重点关注ts带来的访问控制等特性

// 03-class.ts
class Parent {
	// 私有属性,不能在类的外部访问 
	private _foo = "foo"; 
	 // 保护属性,可以在子类中访问
	protected bar = "bar";
	// 参数属性:构造函数参数加修饰符,能够定义为成员属性 
	constructor(public tua = "tua") {}
	// 方法也有修饰符
	private someMethod() {}
	// 存取器:属性方式访问,可添加额外逻辑,控制读写性 
	get foo() {
	   return this._foo;
	}
	set foo(val) {
	    this._foo = val;
	}
}

范例:利用getter设置计算属性,Hello.vue

<template> 
		<li>特性数量:{{count}}</li>
</template>
<script lang="ts">
export default class HelloWorld extends Vue { // 定义getter作为计算属性
	get count() {
     	return this.features.length;
    }
}
</script>
泛型

泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。以此增加代码通用性
具体看文档,此处简单说下

interface Result {
 	ok:0|1;
   data: Feature[];
}
// 以上写法不通用
// T成了通用的,可以动态的指定类型,可以让程序的类型变的更加通用
interface Result<T> {
  ok: 0 | 1;
  data: T[];
}

//泛型方法
function getResult<T>(data: T): Result<T> {
   return {ok:1, data};
}

getResult<string>()

泛型优点

  • 函数和类可以支持多种类型,更加通用
  • 不必编写多条重载,冗长联合类型,可读性好
  • 灵活控制类型约束

不仅通用且能灵活控制,泛型被广泛用于通用库的编写。文章来源地址https://www.toymoban.com/news/detail-615810.html

到了这里,关于Vue中使用Typescript及Typescript基础的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue之--使用TypeScript

    像 TypeScript 这样的类型系统可以在编译时通过静态分析检测出很多常见错误。这减少了生产环境中的运行时错误,也让我们在重构大型项目的时候更有信心。通过 IDE 中基于类型的自动补全,TypeScript 还改善了开发体验和效率。 Vue 本身就是用 TypeScript 编写的,并对 TypeScript 提

    2023年04月13日
    浏览(20)
  • Vue3项目中没有配置 TypeScript 支持,使用 TypeScript 语法

    1.安装 TypeScript:首先,需要在项目中安装 TypeScript。在终端中运行以下命令 2.创建 TypeScript 文件:在 Vue 3 项目中,可以创建一个以 .ts 后缀的文件,例如 MyComponent.ts。在这个文件中,可以使用 TypeScript 语法编写代码。 在上面的示例中,我们使用 defineComponent 函数来定义一个

    2024年02月15日
    浏览(37)
  • TypeScript基础篇 - Vue-TS-Rollup 环境实战

    目录 .babelrc Rollup+Vue+TS scripts/rollup.config.js package.json 可以同时使用多个 Plugin 和 Preset,此时,它们的执行顺序非常重要。 先执行完所有 Plugin,再执行 Preset。 多个 Plugin,按照声明次序顺序执行。 多个 Preset,按照声明次序逆序执行。 比如 .babelrc配置如下,那么执行的顺序为:

    2024年02月16日
    浏览(43)
  • Vue 3, TypeScript 和 Element UI Plus:前端开发的高级技巧与最佳实践

    Vue 3、TypeScript 和 Element UI Plus 结合使用时,可以提供一个强大且灵活的前端开发环境。以下是一些高级用法和技巧,帮助你更有效地使用这些技术: Composition API 使用 setup 函数: Vue 3 引入了 Composition API,允许你在 setup 函数中组织逻辑代码。 响应式引用 (ref 和 reactive): 使用

    2024年03月12日
    浏览(41)
  • Vue3+Typescript+Vitest单元测试环境+基础用例篇

    近来工作接触了一个有意思的东西,那就是Vue3的单元测试。虽说写起来费时费力,但是它确实可以让我们设计的组件更加健壮、更加合理且风险可控,同时编写单元测试也让我们更近一步理解组件的设计原理,好了废话不多说,直接开始吧。 初始化一个vue3+typescript项目,移

    2024年02月10日
    浏览(43)
  • vane 一个适用于前端打工人的全栈框架,nodejs+vue3+typescript

    写这个的初衷是因为每次用node写接口的时候总是需要一些写大一堆的东西, 也有些人把很多接口都放在一个js文件内, 看起来很是杂乱, 后来用到nuxt写的时候, 感觉用文件名来命名接口路径很是方便, 无论是query参数还是params参数,都可以通过文件名来命名, 也可以通过文件夹层级

    2024年02月11日
    浏览(46)
  • Vue3项目中使用TypeScript

    在单文件组件中使用 TypeScript,需要在 小结: 注意 当 script 中使用了 ts ,模板 template 在绑定表达式时也支持ts。 如果在表达式中不指名类型时,编译器会报警告提示。 正确写法 表达式指定类型 基于运行时声明 当使用 基于类型声明 通过泛型来定义 Props 语法规定 传递给

    2023年04月20日
    浏览(38)
  • 前端2023最全面试题(javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react)

    答案:JavaScript中的闭包是一种函数,它有权访问其词法环境的变量和其它函数。这意味着,即使其包含它的函数已经执行完毕,其词法环境仍然存在,因此可以访问其作用域内的变量。 答案:回调函数是在某个特定事件之后执行的函数。在JavaScript中,通常使用回调函数来处

    2024年02月06日
    浏览(62)
  • 2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新

    HTML篇 CSS篇 JS篇 Vue篇 TpeScript篇 React篇 微信小程序篇 前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新 1. 谈谈你对MVVM开发模式的理解? MVVM是一种简化用户界面的 实践驱动编程方式 。在当前主流的前后端分离的开发模式中,MVVM模式的优越性日益体现,相较

    2024年02月10日
    浏览(56)
  • Vue3:Typescript与组合式API、defineProps、defineEmits等使用

    使用 defineProps() 使用 script setup 在使用 script setup 时, defineProps() 宏函数支持从它的参数中推导类型: 运行时声明 基于类型的声明 注意:接口或对象字面类型可以包含从其他文件导入的类型引用,但是,传递给 defineProps 的泛型参数本身不能是一个导入的类型, 这是因为Vue

    2023年04月20日
    浏览(83)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包