TypeScript中的安装配置过程

写在前面

重要概念： TypeScript（TS）是一种编译时的静态类型语言，是一种强类型语言

• 静态类型: 在TypeScript中，变量和函数的类型是在编写代码时指定的，而不是在运行时确定的。这有助于捕捉类型错误，并提供更好的代码自动补全、导航和重构支持。
• 编译时: 浏览器和nodejs并不能直接识别TS代码，需要编译成js代码。TypeScript在编译到JavaScript之前进行类型检查。这意味着任何类型错误都会在编译时被发现，而不是在代码运行时。
• 强类型语言: 这个术语通常用来描述那些在编译时执行严格的类型检查的语言。

安装与运行

安装

建议全局安装

npm i -g typescript

安装好之后，就可以直接使用tsc来编译ts文件了

编译

我们现在可以创建一个ts文件，并将他编译成js文件，比如下面简单的代码

let str:string = "hello";

但是，就是这么简单的代码，编译之后却会报错。

不用担心，这个错误，并不是我们的错误，原因是默认情况下，TS会做出下面的几种假设：

1、假设当前环境在DOM环境中

2、如果代码中没有模块化语句，默认代码是全局执行的，所以变量就是全局变量

要最简单的解决，就是用模块化

可以加上TS的配置文件，或者tsc命令行的选项参数

tsconfig.json配置文件

官方配置文件说明地址：tsconfig.json

如果项目中指定了tsconfig.json文件，运行tsc不需要再指定文件路径地址

{
  "compilerOptions": {
    "target": "ES2017", // 编译目标版本
    "lib":["ES2017","DOM","DOM.Iterable"], // 需要引用的库
    "outDir": "./dist" // 指定输出目录，如果未指定和对应的.ts文件同目录
  },
  "include": ["src/**/*.ts"] // 指定需要编译的文件或目录
}

使用第三库简化流程

ts-node: 将ts代码在内存中完成编译，同时完成运行

安装:

npm i -g ts-node

运行:

ts-node src/index.ts

nodemon: 检测文件变化

安装:

npm i -g nodemon

运行:

nodemon --exec ts-node src/index.ts

当然，我们可以像之前一样，将这个代码放入到package.json的 scripts 属性中

"scripts": {
    "start": "nodemon --exec ts-node src/index.ts"
},

开发相关配置

tsconfig初始化

tsc --init

工程切换Typescript

如果本地工程中也安装了typescript，并且希望相关类型引用指向本地typescript，而不是vscode内置的typescript，可以自行进行切换

Ctrl (Command 在 macOS) + Shift + P 打开命令面板，输入Select Typescript Version，选择切换即可

开发相关设置

在**「设置」中，「打开工作区设置」**，由于内容较多，可以使用搜索词：typescript inlay hints

对于新手，推荐开启的配置项主要是这几个：

• Function Like Return Types，显示推导得到的函数返回值类型；
• Parameter Names，显示函数入参的名称；
• Parameter Types，显示函数入参的类型；
• Variable Types，显示变量的类型。

{
  "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
  "typescript.inlayHints.parameterNames.enabled": "all",
  "typescript.inlayHints.parameterTypes.enabled": true,
  "typescript.inlayHints.variableTypes.enabled": true
}

当然，并不是所有人都习惯这样的显示方式，你可以根据自己的需要进行调整。

VS Code插件

Error Lens：这个插件能够把错误直接显示到代码文件中的对应位置：

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论