> 文档中心 > React中的TypeScript配置文件:tsconfig.json各配置项详细说明

React中的TypeScript配置文件:tsconfig.json各配置项详细说明


TS配置文件 tsconfig.json

tsconfig.js指定:项目文件和项目编译所需的配置项

注意:TS的配置项非常多(100+),以 CRA(React脚手架工具 create-react-app(简称:CRA)) 项目中的配置为例来学习,其他的配置项用到时查文档typescriptlang.org/tsconfig#include即可。

  1. tsconfig.json 文件所在目录为项目根目录(与 package.json 同级)。
  2. tsconfig.json 可以自动生成,命令:tsc --init
// 这是 tsconfig.json 配置文件// 说明:所有的配置项都可以通过鼠标移入的方式,来查看配置项的解释说明// tsconfig 文档链接(https://www.typescriptlang.org/tsconfig){  "compilerOptions": {   // 编译选项    "target": "es5",   // 生成代码的语言版本    "lib": [ "dom", "dom.iterable", "esnext" ],   // 指定要包含在编译中的library    "allowJs": true,   // 允许 ts 编译器编译 js 文件    "skipLibCheck": true,   // 跳过声明文件的类型检查    "esModuleInterop": true,   // es 模块互操作,屏蔽 ESModule和CommonJS之间的差异    "allowSyntheticDefaultImports": true,// 允许通过import x from 'y' 即使模块没有显式指定 default 导出 "strict": true,   // 开启严格模式    "forceConsistentCasingInFileNames": true,   // 对文件名称强制区分大小写    "noFallthroughCasesInSwitch": true,   // 为 switch 语句启用错误报告    "module": "esnext",   // 生成代码的模块化标准    "moduleResolution": "node",   // 模块解析(查找)策略    "resolveJsonModule": true,   // 允许导入扩展名为 .json 的模块    "isolatedModules": true,// 是否将没有 import/export 的文件视为旧(全局而非模块化)脚本文件。 "noEmit": true,   // 编译时不生成任何文件(只进行类型检查)    "jsx": "react-jsx"   // 指定将 JSX 编译成什么形式  },  "include": ["src"]   // 指定允许 ts 处理的目录}

除了在 tsconfig.json 文件中使用编译配置外,还可以通过命令行来使用

使用演示:tsc hello.ts --target es6。指定编译生成 es6 版本的js文件。

注意:

  1. tsc 后带有输入文件时(比如,tsc hello.ts),将忽略 tsconfig.json 文件。
  2. tsc 后不带输入文件时(比如,tsc),才会启用 tsconfig.json 。

推荐使用:tsconfig.json 配置文件。