typescript 开发环境及工具配置

vscode 插件

类型自动补全 TypeScript Importer

这一插件会收集你项目内所有的类型定义，在你敲出:时提供这些类型来进行补全。如果你选择了一个，它还会自动帮你把这个类型导入进来。

自动更新文件依赖 Move TS

这一插件在重构以及像我们这样写 demo 的场景下很有帮助。它可以让你通过编辑文件的路径，直接修改项目的目录结构。

比如从home/project/learn-interface.ts 修改成 home/project/interface-notes/interface-extend.ts，这个插件会自动帮你把文件目录更改到对应的样子，并且更新其他文件中对这一文件的导入语句。

优化错误显示 ErrorLens

这一插件能够把你的 VS Code 底部问题栏的错误下直接显示到代码文件中的对应位置，比如这样：

vscode 内置支持

对于 VS Code 内置的 TypeScript 支持，可以通过一些配置项获得更好的开发体验。首先，需要通过 Ctrl(Command) + Shift + P 打开命令面板，找到打开工作区设置这一项。

推荐开启的有这么几个：

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

除了推荐内容，可以根据自身喜好选择其他提供的 typescript 相关设置

TS 文件的快速执行：ts-node 与 ts-node-dev

如果想执行 TypeScript 文件，就像 node index.js 这样快速地验证代码逻辑，这个时候你就需要 ts-node 以及 ts-node-dev 这一类工具了。

它们能直接执行 ts 文件，并且支持监听文件重新执行。同时，它们也支持跳过类型检查这一步骤来获得更快的执行体验。

ts-node 直接执行 ts 文件

将 ts-node 与 typescript 安装到全局


npm i ts-node typescript -g

在项目中执行以下命令创建 TypeScript 的项目配置文件： tsconfig.json


npx --package typescript tsc --init
// 如果全局安装了 TypeScript，可以这么做
tsc --init

创建一个 TS 文件


# index.ts
console.log("Hello TypeScript");

使用 ts-node 执行

bash
ts-node index.ts

如果一切正常，此时你的终端能够正确地输出字符。

ts-node 还可以使用命令参数做定制化执行，如有需要可以自行查看官方文档

ts-node-dev 监听文件重新执行

ts-node-dev 基于 node-dev 与 ts-node

在重启文件进程时共享同一个 TS 编译进程，避免了每次重启时需要重新实例化编译进程等操作

全局安装

bash
npm i ts-node-dev -g

执行文件

ts-node-dev 在全局提供了 tsnd 这一简写，你可以运行 tsnd 来检查安装情况。最常见的使用命令是这样的：

bash
ts-node-dev --respawn --transpile-only app.ts

respawn 选项启用了监听重启的能力
transpileOnly 提供了更快的编译速度。

你可以查看官方仓库来了解更多选项，但在大部分场景中以上这个命令已经足够了

更方便的类型兼容性检查： declear 关键字

某些时候，我们在进行类型比较时，需要使用一个具有具体类型的变量与一个类型进行赋值操作，比如下面这个例子中：

ts
interface Foo {
  name: string;
  age: number;
}

interface Bar {
  name: string;
  job: string;
}

let foo:Foo = {
  name: 'silon',
  age: 18
}

let bar:Bar = {
  name: 'silon',
  job: 'cook'
}

foo = bar;

在“只是想要进行类型比较”的前提下，其实并没有必要真的去声明两个变量，即涉及了值空间的操作。我们完全可以只在类型空间中（你可以理解为用于存放 TypeScript 类型信息的内存空间）比较这些类型，只需要使用 declare 关键字：


interface Foo {
  name: string;
  age: number;
}

interface Bar {
  name: string;
  job: string;
}

declare let foo: Foo;
declare let bar: Bar;

foo = bar;