如何生成 tsconfig.json 文件

要生成 tsconfig.json 文件:

  1. 在项目的根目录中打开终端。
  2. 全局安装 typescript:npm install typescript@latest -g
  3. 通过运行生成一个 tsconfig 文件: tsc --init

在项目的根目录(package.json 文件所在的位置)中打开终端并运行以下命令:

# 👇️ 全局安装 typescript
$ npm install typescript@latest -g

# 👇️ 生成 tsconfig.json 文件
$ tsc --init

第一个命令全局安装最新版本的 typescript 包,第二个命令生成一个 tsconfig.json 文件。

如果 typescript 的全局安装失败,我们可能必须运行以 sudo 为前缀的命令。

# 👇️ 如果遇到权限错误,请使用 sudo 运行
$ sudo npm install typescript@latest -g

$ tsc --init

如果我们能够运行 tsc --version 命令并获取 typescript 包的版本号,则安装成功。

$ tsc --version

如何生成 tsconfig.json 文件

或者,我们可以在本地安装 typescript 并从本地安装生成 tsconfig.json 文件。

# 👇️ 本地安装 typescript
$ npm install --save-dev typescript

# 👇️ 生成 tsconfig.json 文件
$ tsc --init

tsc --init 命令生成一个 tsconfig.json 文件,表示该目录是 TypeScript 项目的根目录。

默认的 tsconfig.json 文件在 compilerOptions 对象中设置了一些选项,并对每个选项的作用进行了注释。

如果我们需要更改默认配置,我们可以通过访问 tsconfig.json 参考页面获取有关每个选项的更多信息。

例如,如果我们正在为 Node.js 项目生成 tsconfig.json,那么我们的文件最终可能会如下所示:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "rootDir": "src",
    "outDir": "build",
    "lib": ["ES2022"],
    "strict": true,
    "esModuleInterop": true,
    "allowJs": true,
    "checkJs": false,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

此配置假定我们在项目的根目录中有一个 src 目录。

我们可以在 src 目录中创建一个 index.ts 文件并运行 tsc src/index.ts 命令将其转换为 JavaScript。

上面的示例使用 include 选项指定要包含在代码库中的模式。

文件名或指定模式是相对于目录解析的,该目录包含您的 tsconfig.json 文件。

exclude 数组包含解析包含数组时应跳过的文件名或模式。

exclude 选项改变了 include 选项找到的内容,有效地从编译中过滤掉一些文件夹或文件。

如果我们没有在 tsconfig.json 文件中显式添加排除数组,则它默认为 node_modulesbower_components 和 jspm_packages

target 选项设置发出的 JavaScript 文件的语言版本。

所有现代浏览器(和 Node.js)都支持所有 ES6 功能。例如,当您的目标选项设置为早于 {' '} es6(例如 es5)时,TypeScript 必须将我们的类转换为函数。