Skip to content

TypeScript 开发环境

Vue2.0 中源码是采用 JavaScript + flow 进行编写的。

Vue3.0 中源码是采用 TypeScript 进行编写的。

由于 Vue3.0 源码以及相关的社区都支持了 TypeScript 语法,并且自带了相关的类型声明文件,这对于我们开发有了更大的帮助,也是未来的一个趋势。

为什么使用 TypeScript

TypeScript 的类型系统可以在编码的阶段通过静态分析检测出很多常见的问题,例如定义了一个字符串,你却给它赋值数字,或者是一个函数接收布尔值的参数,你却传入了字符串类型等等。这将减少了运行的的错误频率,也让我们在开发项目中更加的有信心。在大多数的 IDE 编辑器工具中,例如 VS Code 中支持了类型的自动补全,提高了开发的体验和效率。

  • 补一张类型校验图

IDE 支持

强烈推荐使用 Visual Studio Code + Volar 进行开发。

Volar 是官方推荐的 Vue3.0 开发插件,它提供了很多的功能,例如对 TypeScript 的支持。

注意

在使用 Volar 插件的时候,必须要把 Vetur 插件禁用掉,否则会出现很多的问题。而且 Vetur 是提供给 Vue2.0 使用的。

  • 补一张 Volar 插件图

配置文件

使用 yarn create vite 命令创建项目时,根目录下会存在一个预先配置好的 tsconfig.json 文件。除了默认的配置外,我们还可以进行一些额外的配置。

别名

vite.config.ts 中配置别名后,我们还需要在 tsconfig.json 中配置一下别名,否则在 IDE 中会报错,因为 TypeScript 并不识别你使用的别名。

javascript
{
    "compilerOptions": {
        "paths": {
            "@/*": ["src/*"],
            "utils/*": ["src/utils/*"]
        },
    }
}