概述
Typescript 是 Javascript 的超集,也就是说 Javascript 的所有语法和功能,Typescript 都支持,同时 Typescript 对 Javascript 进行了扩展,加入了类型系统。
学习 Typescript 主要包含两个部分:语法和编译器。即学习 Typescript 对 Javascript 的扩充和 Typescript 编译器的使用方法。
编译器
Typescript 是对 Javascript 的扩展,但是大部分平台(浏览器和 Node)无法直接运行 Typescript,而是需要使用编译器将 Typescript 编译(转译)为 Javascript。
我们可以使用 NPM 安装 Typescript 编译器:
npm install -g typescript
编译
我们准备一个 ts 文件,比如index.ts:
function typeOf(arg: string): void {
console.log(typeof arg)
}
这个函数中,我们使用了静态类型检查(冒号后面的代码)。接着我们使用由 typescript 包提供的 tsc(别纠结为什么命令不叫 typescript,可能是为了少输入几个字母吧)命令来编译这个文件:
tsc index.ts
我们可以看到 ts 文件被编译成一个同名的 js 文件:
function typeOf(arg) {
console.log(typeof arg)
}
其中 Typescript 有关类型的语法全部被删除,留下了完全合法的 Javascript。
我们可以使用观察模式,这个模式下编译器会持续监听文件变化,发生变化时自动重新编译。示例:
tsc -w
tsc 命令的更多细节可参考tsc CLI Options。
配置
我们可以配置 tsc 的编译方式,通过命令行参数或者配置文件。比如一个常用的配置如下:
tsc -p tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"importHelpers": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"resolveJsonModule": true,
"paths": {
"@/*": ["src/*"]
},
"lib": ["esnext", "dom"]
},
"include": ["src/**/*.ts"],
"exclude": ["node_modules"]
}
这个配置文件中,我们设置了目标 Javascript 代码的的版本为最新版本,开启了源代码映射,设置了严格模式,设置了需要和不需要编译的文件等等。
我们可以指定不同名称的配置文件。如果不指定配置文件,那么 tsc 命令会首先搜索工作目录下是否有 tsconfig.json,如果有就自动将其作为配置文件。同时一个 tsc 配置文件也表明了当前目录为 Typescript 项目的根目录。