【Typescript小手册】基础使用

178 阅读2分钟

概述

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 项目的根目录。