搭建 TypeScript
的开发环境。一个舒适、便捷且顺手的开发环境,不仅能大大提高学习效率,也会对我们日常的开发工作有很大帮助。
这一节我们就来介绍 VS Code
下的 TypeScript
环境搭建:插件以及配置项。对于 TS
文件的执行,我们会介绍 ts-node
、ts-node-dev
等工具,帮助你快速验证 TS
代码的执行结果。而如果你只想快速开始学习,我们也会介绍 TypeScript
官方提供的 TypeScript Playground
,利用它你可以快速开始编写及分享 TS
代码。最后,我们还会介绍如何通过 TS
声明的方式来检查类型兼容性。
VS Code搭配插件
1-TypeScript Importer
TypeScript Importer
是一个用于导入 TypeScript
模块的工具。它可以让开发者在使用 TypeScript
编写代码时,更加轻松地引入和使用其他模块的代码。
TypeScript Importer
可以通过指定模块的路径和文件名,将 TypeScript
代码导入到 JavaScript
代码中。这样可以让开发者在使用 TypeScript
编写代码时,更加方便地与 JavaScript
代码进行交互和协作。
2-Move TS
这一插件在重构以及像我们这样写 demo
的场景下很有帮助。它可以让你通过编辑文件的路径,直接修改项目的目录结构。比如从home/project/learn-interface.ts
修改成 home/project/interface-notes/interface-extend.ts
,这个插件会自动帮你把文件目录更改到对应的样子,并且更新其他文件中对这一文件的导入语句。
3-Error Lens
Error Lens
是一个用于查看和分析 JavaScript
错误信息的工具。它可以在开发者编写和运行 JavaScript
代码时,提供错误信息的实时反馈和分析,从而帮助开发者快速定位和解决错误。
这一插件能够把你的 VS Code 底部问题栏的错误下直接显示到代码文件中的对应位置,比如这样:
TS演练场:无需搭建环境,可直接运行TS代码
如果你只是想拥有一个简单的环境,能写 TypeScript
,能检查错误,能快速地调整 tsconfig
,那官方提供的 Playground
一定能满足你的需求。
TypeScript Playground
是一个在线的 TypeScript
代码编辑器,它提供了一个简单易用的 TypeScript
编辑环境,可以帮助开发者快速编写和运行 TypeScript
代码。 TypeScript Playground
的作用包括:
- 提供了一个简单易用的
TypeScript
编辑环境,让开发者可以快速编写和运行TypeScript
代码。 - 支持
TypeScript
的各种功能和特性,如类型注释、接口类型、类型继承等。 - 提供了一些常用的
TypeScript
代码示例和演示,帮助开发者快速上手TypeScript
。 - 可以与其他
TypeScript
工具和IDE
集成,如VS Code
、WebStorm
等。 - 可以将
TypeScript Playground
部署到服务器上,让多个开发者共同使用和编辑代码。
总之,TypeScript Playground
是一个非常有用的 TypeScript
工具,可以帮助开发者更快速、高效地编写和运行 TypeScript
代码。
TypeScript Playground入口地址:https://www.typescriptlang.org/zh/play
TS快速执行验证代码逻辑:ts-node和ts-node-dev
如果你主要是想执行 TypeScript 文件,就像 node index.js
这样快速地验证代码逻辑,这个时候你就需要 ts-node 以及 ts-node-dev 这一类工具了。它们能直接执行 ts 文件,并且支持监听文件重新执行。同时,它们也支持跳过类型检查这一步骤来获得更快的执行体验。
对于 ts-node,你可以将其安装到项目本地或直接全局安装。
npm i ts-node typescript -g
在项目中执行以下命令创建 TypeScript
的项目配置文件: tsconfig.json
。
npx --package typescript tsc --init
// 如果全局安装了 TypeScript,可以这么做
tsc --init
创建一个TS文件:index.ts
console.log("Hello TS")
使用ts-node
执行TS文件,在控制台可以查看输出结果:
ts-node index.ts
// 输出以下结果
Hello TS
关于ts-node
的使用,我们可以查看帮助命令,来进一步使用它的功能
ts-node -h
详情点击查看ts-node官网
这里我们主要介绍通过命令行进行常用配置的方式。
-P,--project
:指定你的tsconfig
文件位置。默认情况下ts-node
会查找项目下的tsconfig.json
文件,如果你的配置文件是tsconfig.script.json
、tsconfig.base.json
这种,就需要使用这一参数来进行配置了。-T, --transpileOnly
:禁用掉执行过程中的类型检查过程,这能让你的文件执行速度更快,且不会被类型报错卡住。这一选项的实质是使用了TypeScript Compiler API
中的transpileModule
方法,我们会在后面的章节详细讲解。--swc
:在transpileOnly
的基础上,还会使用swc
来进行文件的编译,进一步提升执行速度。--emit
:如果你不仅是想要执行,还想顺便查看下产物,可以使用这一选项来把编译产物输出到.ts-node
文件夹下(需要同时与--compilerHost
选项一同使用)。
ts-node
本身并不支持自动地监听文件变更然后重新执行,而这一能力又是某些项目场景下的刚需,如 NodeJs API
的开发。因此,我们需要 ts-node-dev
库来实现这一能力。ts-node-dev
基于 node-dev
(你可以理解一个类似 nodemon
的库,提供监听文件重新执行的能力) 与 ts-node
实现,并在重启文件进程时共享同一个 TS 编译进程,避免了每次重启时需要重新实例化编译进程等操作。
全局安装:
npm i ts-node-dev -g
ts-node-dev
在全局提供了 tsnd
这一简写,你可以运行 tsnd
来检查安装情况。最常见的使用命令是这样的:
ts-node-dev --respawn --transpile-only app.ts
respawn
选项启用了监听重启的能力,而 transpileOnly
提供了更快的编译速度。你可以查看官方仓库来了解更多选项,但在大部分场景中以上这个命令已经足够了。
更方便的类型兼容性检查
某些时候,我们在进行类型比较时,需要使用一个具有具体类型的变量与一个类型进行赋值操作,比如下面这个例子中:
interface Foo {
name: string;
age: number;
}
interface Bar {
name: string;
job: string;
}
let foo:Foo = {
name: '李华',
age: 18
}
let bar:Bar = {
name: '韩梅梅',
job: 'student'
}
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;
你可以理解为在开始时的例子,我们使用一个值空间存放这个变量具体的属性,一个类型空间存放这个变量的类型。而通过 declare 关键字,我们声明了一个仅在类型空间存在的变量,它在运行时完全不存在,这样就避免了略显繁琐的属性声明。
对于类型兼容的检查,除了两两声明然后进行赋值以外,我们还可以通过工具类型的形式,如 tsd 这个 npm 包提供的一系列工具类型,能帮助你进行声明式的类型检查。
安装依赖包:
npm i tsd
引入使用:
import { expectType } from 'tsd';
expectType<string>("hello"); // √
expectType<string>(666); // ×
它的结构大致是这样:expectType<你预期的类型>(表达式或变量等)
,除了 expectType
(检查预期类型与表达式或变量的类型是否一致),tsd
还提供了 expectNotType
(检查预期类型与表达式或变量的类型是否不同)、expectAssignable
(检查表达式或变量的类型是否能赋值给预期类型)等工具类型。