前言
随着前端的不断发展与壮大，JS弱类型的缺点在一些重大的项目中慢慢的暴露出来，由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript ，使得其能够胜任开发大型项目。也就是给js增加了一层类型编程，
1、编译配置
极客时间里面的ts开发实战中将编译配置分为三个模块：文件选项、编译选项、工程引用
文件选项
ts配置默认会编译当前目录下的所有ts文件，分别有三种类型 ts、d.ts、.tsx文件
{
"files": [], // 编译的单个文件列表
"include": [], // 需要编译的目录 会和files 进行合并
"exclude": [], // 编译需要排除的文件 默认会排出node_modules下面的所有文件 和 一些声明文件
"extends": "",// 继承某个配置
}
- 编译选项
一些常用的选项
{ "compilerOptions": { /* Visit https://aka.ms/tsconfig.json to read more about this file */ /* Projects */ // "incremental": true, /* 增量编译 在编译的过程中会生产一个增量文件 提升编译的速递 */ // "tsBuildInfoFile": "./buildFile", /* 增量编译的文件存放位置 */ // "diagnostics": true, // 打印诊断信息 // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */ // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ /* Language and Environment */ // "target": "ES5", /* 目标语言的版本 */ // "lib": ["ES2019.Array", "DOM", "ES5"], /* ts 需要的引用的库，即声明文件 es5 默认: "dom", "es5" */ // "jsx": "preserve", /* Specify what JSX code is generated. */ // "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */ // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */ // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */ // "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */ // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ /* Modules */ // "module": "AMD", /* 生成目标的模块标准 */ // "rootDir": "./", /* Specify the root folder within your source files. */ // "moduleResolution": "node", /* 模块解析策略 classic ts tsx d.ts package.json .... */ // "baseUrl": "./", /* 解析非相对模块的基地址 */ "paths": {}, /* 映射路径，相当于 baseUrl */ // "rootDirs": [], /* 将多个目录放在一个虚拟目录下 用于运行时 */ // "typeRoots": [], /* 声明文件目录 默认为 `./node_modules/@types`. */ // "types": [], /* 声明文件包 */ // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ // "resolveJsonModule": true, /* Enable importing .json files */ // "noResolve": true, /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */ /* JavaScript Support */ // "allowJs": true, /* 允许编辑js文件 (.js .jsx) */ // "checkJs": true, /* 检查js文件 */ // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */ /* Emit */ // "declaration": true, /* 生成声明文件 */ // "declarationDir": "./", /* 声明文件目录 */ // "declarationMap": true, /* 为声明文件也生产一个sourceMap */ // "emitDeclarationOnly": true, /* 只声明声明文件 */ // "sourceMap": true, /* 自动生成sourceMap文件 */ // "inlineSourceMap": true, /* sourceMap会生成在文件之中. */ // "outFile": "./app.js", /* 将多个依赖的文件编译成一个文件 可以在AMD 模块中 ? */ // "outDir": "./out", /* 指定输出目录 */ // "rootDir": "./src/", /* 指定输入文件目录 */ // "removeComments": true, /* 删除注释 */ // "noEmit": true, /* 不输出任何人接 */ // "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */ // "downlevelIteration": true, /* 降级遍历器的实现 es3/5 */ // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ // "newLine": "crlf", /* Set the newline character for emitting files. */ // "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */ "noEmitHelpers": true, /* 涉及一个类的继承 不生产help函数 ts-helpers */ "importHelpers": true, /* 通过tslib引入helper 函数 文件必须是模块 export = a; */ // "noEmitOnError": true, /* 发生错误的时候不生产任何文件 */ // "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */ // "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */ /* Interop Constraints */ // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ "esModuleInterop": true, /* 允许export = 导出 由import from 导入 */ // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ // "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ /* Type Checking */ "strict": true, /* 开启严格的类型检查 */ // "alwaysStrict": true, /* 在代码中注入 'use strict' */ // "noImplicitAny": true, /* 不允许隐式的any类型 */ // "strictNullChecks": true, /* 不允许把null undefined 赋值给其他的类型变量 */ // "strictFunctionTypes": true, /* 不允许函数参数的双向协变 */ // "strictBindCallApply": false, /* 严格的 bind/call/apply 检查 */ // "strictPropertyInitialization": true, /* 类的实例属性必须出示话 */ // "noImplicitThis": true, /* 不允许this 有 any类型 */ // "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */ // 函数相关 提示错误 不阻碍编译 // "noUnusedLocals": true, /* 不允许出现只声明 未使用的局部变量 */ // "noUnusedParameters": true, /* 检查未使用的函数参数 */ // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ // "noImplicitReturns": true, /* 保证每个分支都有返回值 */ // "noFallthroughCasesInSwitch": true, /* 防止 switch 语句贯穿 */ // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */ // "allowUnusedLabels": true, /* 允许在模块中访问umd全局变量 */ // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ /* Completeness */ // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ "skipLibCheck": true, /* Skip type checking all .d.ts files. */ // "listEmittedFiles": true, // 打印输出的文件 // "listFiles": true, // 打印编译的文件 }}
- 工程引用
