TypeScript 是一种由 Microsoft 创造的强类型语言，它可以让开发者在写 JavaScript 时拥有更好的类型检查和自动补全功能。而 Vue 3.x 自身也开始支持 TypeScript。
本文将介绍如何在 Vue 项目中使用 TypeScript，包括安装依赖、使用 TypeScript 编写 Vue 组件、常见的类型定义以及使用 TypeScript 需要特别注意的事项。
安装依赖
首先，在新建的 Vue 项目中安装 TypeScript 相关依赖：
npm install typescript vue-class-component vue-property-decorator --save npm install @types/node @types/vue --save-dev
其中，vue-class-component 和 vue-property-decorator 是用于支持使用类语法写组件的库，@types/node 和 @types/vue 是用于 TypeScript 对 Node.js 和 Vue 进行类型检查的定义文件。
使用 TypeScript 编写 Vue 组件
在 Vue 项目中，我们可以使用 .vue 文件结合单文件组件（SFC）语法来编写组件。使用 TypeScript 时，我们还需要在 .vue 文件中指定每个组件的类型，示例代码如下：
-- -------------------- ---- ------- ---------- ------- ------- -------- ----------- ------- ---------- ------ - ---- --------- - ---- ------------------------- ---------- ------ ------- ----- ----------- ------- --- - -------- ------ - ------- ------------- - ---------
上述代码使用了 @Component 装饰器，用于将 MyComponent 类标记为 Vue 组件，实现类语法写组件。同时，定义了一个 message 字段，类型为 string。
常见的类型定义
在 Vue 项目中，我们经常会涉及到对组件的属性、事件和插槽等进行定义。下面我们来看下这些定义的具体内容。
组件属性
Vue 组件的属性可以在组件中使用 @Prop 装饰器来定义，示例代码如下：
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component
export default class MyComponent extends Vue {
@Prop(String) readonly name!: string;
}上述代码将组件的 name 属性定义为一个 string 类型的属性，使用 readonly 修饰符来防止属性被修改，同时使用了感叹号 ! 表示该属性是必需的。
事件
Vue 组件的事件可以在组件中使用 @Event 装饰器来定义。示例代码如下：
-- -------------------- ---- -------
------ - ---- ---------- ----- ----- - ---- -------------------------
----------
------ ------- ----- ----------- ------- --- -
-------- ------- ------- ----------- -- -----
------------------ ----------- -
------------------- -------
-
-上述代码将 click 事件定义为一个 MouseEvent 类型的事件，并使用 @Emit 装饰器将 handleClick 方法封装为该事件的触发方法。
插槽
Vue 组件的插槽可以在组件中使用 @Slot 装饰器来定义。示例代码如下：
-- -------------------- ---- -------
------ - ---- ---------- ---- - ---- -------------------------
----------
------ ------- ----- ----------- ------- --- -
------- -------- -------- ------------
---------------- -------- --------- ------------
--------------- -------- -------- ------------
-------- -
------ -
-----
-------------
--------------
-------------
------
--
-
-上述代码将 header、content 和 footer 插槽分别定义为 header、default 和 footer 名称的插槽，使用 JSX.Element 类型定义了插槽的内容。
注意事项
当使用 TypeScript 开发 Vue 项目时，还需要注意一些特别的事项。
- 由于 TypeScript 只能对类型进行检查，无法检查运行时错误，因此在开发时需要多使用单元测试等工具来保证代码的质量。
- 由于 Vue 组件是基于 Vue 实例的，而 TypeScript 需要对类的实例做出类型检查，因此需要使用
Vue.extend()来创建组件类的实例。 - 由于 Vue 的设计目标是尽可能轻量级，它会通过字符串类型来实现动态组件的用法，而 TypeScript 对字符串类型无法进行类型检查。因此需要结合
keyof和in等关键字来实现对字符串类型的检查。 - 当使用
.vue文件编写组件时，需要使用vue-class-component来支持使用类语法来编写 Vue 组件。
总结
本文介绍了如何在 Vue 项目中使用 TypeScript，包括安装依赖、使用 TypeScript 编写 Vue 组件、常见的类型定义以及使用 TypeScript 需要特别注意的事项。在使用 TypeScript 开发 Vue 项目时，需要注意多使用单元测试等工具来保证代码质量，并掌握结合 Vue.extend()、keyof 和 in 等关键字的技巧来提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e5961af6b2d6eab3106f4a