配置typeScript编辑器（一）

js笔记

2025-03-29

typescript

安装与编译

可以全局或者局部安装TypeScript

1
npm install -g typescript

编译, 可以输入文件列表作为参数

1
tsc greeter.ts router/index.ts

每次输入太麻烦了，我们不手动指定文件列表。TS 自动编译项目目录及其子目录中的所有文件。我们在项目目录中创建tsconfig.json 文件。当我们在命令行上运行 tsc 时，它会从当前目录开始搜索 tsconfig.json，并继续向上搜索父目录链。

执行一下命令自动创建tsconfig.json

1
tsc --init

现在， TS compiles 递归地搜索根目录和子目录中的所有文件并编译它们。
我们还可以指定编译的目录

1
2
3
4
5
"compilerOptions": { ... },
  "files": [
    "greeter.ts",
    "router/index.ts",
  ]

注意：TS compiler也将编译文件列表中的文件内部引用的文件。例如，如果 greeter.ts 从 a.ts 导入导出，则也将编译此文件。

我们还可以使用include指定目录，使用exclude排除文件或目录

1
2
3
4
5
6
7
8
9
{
  "compilerOptions": { ... },
  "include": [
    "router/*"
  ],
  "exclude": [
    "navigation/*"
  ]
}

如果发生冲突按以下优先级

Files > Exclude > Include

编译文件位置

默认情况下，TS 编译器将编译后的文件输出到原始 TS 文件所在的同一目录。然而，这可以通过使用 outDir 编译器选项进行更改。

1
2
3
4
5
{
  "compilerOptions": {
    "outDir": "dist"
  }
}

当我们运行 tsc 时，所有的输出将被复制到 dist 文件夹中，并保留原始的目录结构。

但是如果我们指定 outFile 编译器选项，TS 也可以将所有文件编译到一个文件中。因此，定义了以下配置：

1
2
3
4
5
{
  "compilerOptions": {
    "outFile": "dist/bundle"
  }
}

所有输出将被连接到 bundle.js 文件中，并放在 dist 文件夹中。

优先级 outFile>outDir

设置及时出错，TS compiler也会输出：

1
2
3
4
5
{
  "compilerOptions": {
    "noEmitOnError": true
  }
}

输出编译文件

使用默认配置，编译器只导出 .js 文件。为了能够在运行时调试 TS 文件，我们需要source maps。要启用source maps，我们可以使用 sourceMap 选项：

1
2
3
"compilerOptions": {
  "sourceMap": true
}

当您运行编译器时，您将看到编译器将与其相应的 ts 文件一起导出.map文件。所以，如果你有 main.ts 文件，编译后你将有 3 个文件：

1
2
3
main.ts
main.js
main.js.map

在 main.js 文件中，您将看到source map file的 URL：

1
//# sourceMappingURL=main.js.map

您可以像这样修改添加到地图文件中的生成的 URL：

1
2
3
"compilerOptions": {
  "mapRoot": "/sourcemap/directory/on/webserver",
}

这将生成以下路径：

1
//# sourceMappingURL=/sourcemap/directory/on/webserver/main.js.map

map文件使用以下两个键引用源

1
2
3
4
"sourceRoot": "",
"sources": [
  "/typescript/main.ts"
],

您可以使用 sourceRoots 选项修改source file的根：

1
"sourceRoot": "/path/to/sources",

生产环境的输出

1
2
3
4
"sourceRoot": "/path/to/sources",
"sources": [
  "main.ts"
],

如果您希望将sources放在.map文件夹中（因为您希望将浏览器请求保存到 Web 服务器，或者您的产品不将源代码作为单独的文件提供），您可以使用以下选项：

1
2
3
4
5
6
{
  "compilerOptions": {
    "sourceMap": true,
    "inlineSources": true
  }
}

这样，编译器会将原始 TS 源放入 sourcesContent 属性中：

1
2
3
4
5
6
7
8
9
10
11
{
  "file": "main.js",
  "sourceRoot": "",
  "sources": [
    "main.ts"
  ],
  "mappings": ";AAAA;IAAA;IAAgB,CAAC;...",
  "sourcesContent": [
    "export class Main {}"
  ]
}

此外，TS 允许将源映射文件内容放入 .js 文件中，使用：

1
2
3
"compilerOptions": {
  "inlineSourceMap": true
}

通过这种方式，而不是有一个单独的文件 main.js.map，该文件的内容将包含在 main.js 文件中，如下所示

1
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJza...

配置typeScript编辑器（一 ）

安装与编译

编译文件位置

输出编译文件

配置typeScript编辑器（一）