Learning Notes

# 配置相关

# watch mode

在要编译的 ts 文件后添加-W或者--watch就能使这个 ts 文件变为热更新的方式.

tsc app.ts -W
tsc index.ts --watch
1
2

# 编译整个项目的 ts 文件

  1. 首先运行tsc init
  2. 运行tsc

# exclude&include

我们可以选择哪些文件或者目录不被编译, 这时需要用到exclude选项:

// tsconfig.json

{
  ...,
  "exclude": [
    "node_modules", //默认不会编译该目录
    "app.ts", // 该文件不会编译
    "*.dev.ts", // 以dev.ts结尾的文件不会编译
    "**/*.dev.ts" // 任何目录下的dev.ts都不会编译
  ]
}
1
2
3
4
5
6
7
8
9
10
11

相反的, 我们可以选择哪些文件或目录要被编译, 那就使用include, 用法和上面一样.

# lib

在tsconfig.json里有一个lib配置选项, 它告诉 TS 编译器需要引入的哪些库.比如要用 ts 实现一个点击按钮在控制台打印信息的功能:

<button>click me</button>
1
const button = document.querySelector("button") as HTMLElement;
// Cannot find name 'document'. Do you need to change your target library? Try changing the `lib` compiler option to include 'dom'.

button.addEventListener("click", () => {
  console.log("clicked!");
  // Cannot find name 'document'. Do you need to change your target library? Try changing the `lib` compiler option to include 'dom'.
});
1
2
3
4
5
6
7

TS 不能像 JS 那样可以直接调用 DOM, BOM 等其他内置库, 需要我们去声明, 告诉 TS 在这个项目里需要引用哪些库. 于是我们使用lib这个选项来做这个配置工作.下面这个配置能够满足全套的 JS 功能:

// tsconfig.json

{
  ...,
  "lib": [
      "DOM",
      "ES2015",
      "DOM.Iterable",
      "ScriptHost"
    ]
}
1
2
3
4
5
6
7
8
9
10
11

lib选项是默认注释的, 但是 TS 已经预先配置好了内置库, 其实也就是上面的四个选项. 如果需要更多功能, 可以在数组里继续添加, 以便使 TS 能够认识而不报错.

配置好lib后, 原来报错的信息都消除了.

# sourceMap

当 ts 文件被编译为 js 文件后, 如果我们发现了某些错误, 但在浏览器端只能调试 js 而不能调试原 ts 文件, 使用 sourceMap 就能在浏览器里调试 ts 文件:

// tsconfig.json

{
  ...,
  sourceMap: true
}
1
2
3
4
5
6

← Introduction →