base_TS
TypeScript (TS) 是一种由 Microsoft 开发的编程语言,它是 JavaScript 的超集,增加了静态类型和其他功能。使用 TypeScript 可以让代码更具可读性和可维护性.
INFO
使用 npm 安装 TypeScript
js
npm install -g typescript
在项目目录中初始化 TypeScript 配置文件 tsconfig.json
js
tsc --init
使用 tsc
命令将 TypeScript 编译为 JavaScript
js
tsc index.ts
使用 tsc
-w 持续监听
js
tsc index.ts -w
使用tsc --outFile ./dist/app.js a.ts b.ts 将a.ts b.ts打包到 dist文件夹中的app.js
js
tsc --outFile ./dist/app.js a.ts b.ts
使用reference 打包(a.ts引入b.ts)
js
a.ts中
/// <reference path='b.ts'/>
命令行:
tsc --outFile ./dist/app.js
WARNING
tsconfig.json
文件,解释每个配置选项(部分)
js
{
"compilerOptions": {
// 将 ECMAScript 目标版本设置为 ES6 (ECMAScript 2015)
"target": "es6",
// 指定模块代码生成方式为 commonjs
"module": "commonjs",
// 启用所有严格类型检查选项
"strict": true,
// 允许对导入模块进行默认导入处理
"esModuleInterop": true,
// 跳过所有声明文件的类型检查
"skipLibCheck": true,
// 在文件名大小写不一致时报告错误
"forceConsistentCasingInFileNames": true
},
// 包含的文件或目录模式
"include": ["src/**/*.ts"],
// 排除的文件或目录模式
"exclude": ["node_modules"]
}
Details
tsconfig.json
文件,解释每个配置选项(齐全)
js
{
"compilerOptions": {
/* 访问 https://aka.ms/tsconfig 了解更多关于此文件的信息 */
/* 项目相关 */
// "incremental": true, /* 保存 .tsbuildinfo 文件以支持项目的增量编译 */
// "composite": true, /* 启用约束以允许 TypeScript 项目与项目引用一起使用 */
// "tsBuildInfoFile": "./.tsbuildinfo", /* 指定 .tsbuildinfo 增量编译文件的路径 */
// "disableSourceOfProjectReferenceRedirect": true, /* 禁用优先使用源文件而非声明文件来引用复合项目 */
// "disableSolutionSearching": true, /* 在编辑时选择退出多项目引用检查 */
// "disableReferencedProjectLoad": true, /* 减少 TypeScript 自动加载的项目数量 */
/* 语言和环境 */
"target": "es2016", /* 设置生成的 JavaScript 语言版本并包含兼容的库声明 */
// "lib": [], /* 指定一组描述目标运行时环境的捆绑库声明文件 */
// "jsx": "preserve", /* 指定生成的 JSX 代码 */
// "experimentalDecorators": true, /* 启用对旧版实验性装饰器的支持 */
// "emitDecoratorMetadata": true, /* 为源文件中的装饰声明发出设计类型元数据 */
// "jsxFactory": "", /* 指定在针对 React JSX 生成时使用的 JSX 工厂函数,例如 'React.createElement' 或 'h' */
// "jsxFragmentFactory": "", /* 指定在针对 React JSX 生成时用于片段的 JSX Fragment 引用,例如 'React.Fragment' 或 'Fragment' */
// "jsxImportSource": "", /* 指定在使用 'jsx: react-jsx*' 时用于导入 JSX 工厂函数的模块说明符 */
// "reactNamespace": "", /* 指定用于 'createElement' 的对象。仅在针对 'react' JSX 生成时适用 */
// "noLib": true, /* 禁用包含任何库文件,包括默认的 lib.d.ts */
// "useDefineForClassFields": true, /* 生成符合 ECMAScript 标准的类字段 */
// "moduleDetection": "auto", /* 控制用于检测模块格式 JS 文件的方法 */
/* 模块相关 */
"module": "commonjs", /* 指定生成的模块代码 */
// "rootDir": "./", /* 指定源文件中的根文件夹 */
// "moduleResolution": "node10", /* 指定 TypeScript 如何从给定的模块说明符查找文件 */
// "baseUrl": "./", /* 指定解析非相对模块名称的基目录 */
// "paths": {}, /* 指定一组将导入重新映射到其他查找位置的条目 */
// "rootDirs": [], /* 允许将多个文件夹视为一个文件夹来解析模块 */
// "typeRoots": [], /* 指定多个类似于 './node_modules/@types' 的文件夹 */
// "types": [], /* 指定未在源文件中引用但需要包含的类型包名称 */
// "allowUmdGlobalAccess": true, /* 允许从模块访问 UMD 全局变量 */
// "moduleSuffixes": [], /* 指定解析模块时搜索的文件名后缀列表 */
// "allowImportingTsExtensions": true, /* 允许导入包含 TypeScript 文件扩展名的文件。需要 '--moduleResolution bundler' 并设置 '--noEmit' 或 '--emitDeclarationOnly' */
// "rewriteRelativeImportExtensions": true, /* 在输出文件中将相对导入路径中的 '.ts', '.tsx', '.mts', 和 '.cts' 文件扩展名重写为其 JavaScript 等效项 */
// "resolvePackageJsonExports": true, /* 在解析包导入时使用 package.json 的 'exports' 字段 */
// "resolvePackageJsonImports": true, /* 在解析导入时使用 package.json 的 'imports' 字段 */
// "customConditions": [], /* 指定在解析导入时除解析器特定默认值之外的条件 */
// "noUncheckedSideEffectImports": true, /* 检查副作用导入 */
// "resolveJsonModule": true, /* 启用导入 .json 文件 */
// "allowArbitraryExtensions": true, /* 启用导入具有任何扩展名的文件,前提是存在声明文件 */
// "noResolve": true, /* 禁止通过 'import's, 'require's 或 '<reference>'s 扩展 TypeScript 应添加到项目中的文件数量 */
/* JavaScript 支持 */
// "allowJs": true, /* 允许 JavaScript 文件成为程序的一部分。使用 'checkJS' 选项从这些文件中获取错误 */
// "checkJs": true, /* 在类型检查的 JavaScript 文件中启用错误报告 */
// "maxNodeModuleJsDepth": 1, /* 指定用于检查来自 'node_modules' 的 JavaScript 文件的最大文件夹深度。仅在 'allowJs' 时适用 */
/* 输出相关 */
// "declaration": true, /* 从项目中的 TypeScript 和 JavaScript 文件生成 .d.ts 文件 */
// "declarationMap": true, /* 为 .d.ts 文件创建源映射 */
// "emitDeclarationOnly": true, /* 仅输出 .d.ts 文件而不生成 JavaScript 文件 */
// "sourceMap": true, /* 为生成的 JavaScript 文件创建源映射文件 */
// "inlineSourceMap": true, /* 在生成的 JavaScript 中包含源映射文件 */
// "noEmit": true, /* 禁用从编译中生成文件 */
// "outFile": "./", /* 指定将所有输出捆绑到一个 JavaScript 文件的文件。如果 'declaration' 为 true,则还指定将所有 .d.ts 输出捆绑到一个文件的文件 */
// "outDir": "./", /* 指定所有生成文件的输出文件夹 */
// "removeComments": true, /* 禁用生成注释 */
// "importHelpers": true, /* 允许从 tslib 导入辅助函数,每个项目一次,而不是每个文件都包含它们 */
// "downlevelIteration": true, /* 生成更符合标准但更冗长且性能较低的 JavaScript 迭代代码 */
// "sourceRoot": "", /* 指定调试器查找参考源代码的根路径 */
// "mapRoot": "", /* 指定调试器应定位映射文件的位置,而不是生成的位置 */
// "inlineSources": true, /* 在生成的 JavaScript 的源映射中包含源代码 */
// "emitBOM": true, /* 在输出文件的开头发出 UTF-8 字节顺序标记 (BOM) */
// "newLine": "crlf", /* 设置生成文件时使用的换行符 */
// "stripInternal": true, /* 禁用生成带有 '@internal' JSDoc 注释的声明 */
// "noEmitHelpers": true, /* 禁用生成自定义辅助函数,如编译输出中的 '__extends' */
// "noEmitOnError": true, /* 如果报告了任何类型检查错误,则禁用生成文件 */
// "preserveConstEnums": true, /* 禁用删除生成代码中的 'const enum' 声明 */
// "declarationDir": "./", /* 指定生成的声明文件的输出目录 */
/* 互操作性约束 */
// "isolatedModules": true, /* 确保每个文件可以安全地转译而不依赖其他导入 */
// "verbatimModuleSyntax": true, /* 不转换或省略任何未标记为仅类型的导入或导出,确保它们根据 'module' 设置以输出文件的格式写入 */
// "isolatedDeclarations": true, /* 要求导出有足够的注释,以便其他工具可以轻松生成声明文件 */
// "allowSyntheticDefaultImports": true, /* 允许在模块没有默认导出时使用 'import x from y' */
"esModuleInterop": true, /* 生成额外的 JavaScript 以简化对 CommonJS 模块的导入支持。这为类型兼容性启用了 'allowSyntheticDefaultImports' */
// "preserveSymlinks": true, /* 禁用将符号链接解析为其真实路径。这与 node 中的相同标志相关 */
"forceConsistentCasingInFileNames": true, /* 确保导入中的大小写正确 */
/* 类型检查 */
"strict": true, /* 启用所有严格类型检查选项 */
// "noImplicitAny": true, /* 启用对具有隐式 'any' 类型的表达式和声明的错误报告 */
// "strictNullChecks": true, /* 在类型检查时考虑 'null' 和 'undefined' */
// "strictFunctionTypes": true, /* 在分配函数时,检查以确保参数和返回值是子类型兼容的 */
// "strictBindCallApply": true, /* 检查 'bind', 'call', 和 'apply' 方法的参数是否与原始函数匹配 */
// "strictPropertyInitialization": true, /* 检查类属性是否已声明但未在构造函数中设置 */
// "strictBuiltinIteratorReturn": true, /* 内置迭代器实例化时 'TReturn' 类型为 'undefined' 而不是 'any' */
// "noImplicitThis": true, /* 当 'this' 被赋予 'any' 类型时启用错误报告 */
// "useUnknownInCatchVariables": true, /* 默认将 catch 子句变量设置为 'unknown' 而不是 'any' */
// "alwaysStrict": true, /* 确保始终生成 'use strict' */
// "noUnusedLocals": true, /* 启用对未读取的局部变量的错误报告 */
// "noUnusedParameters": true, /* 当函数参数未被读取时引发错误 */
// "exactOptionalPropertyTypes": true, /* 按照编写的方式解释可选属性类型,而不是添加 'undefined' */
// "noImplicitReturns": true, /* 启用对函数中未显式返回的代码路径的错误报告 */
// "noFallthroughCasesInSwitch": true, /* 启用对 switch 语句中 fallthrough 情况的错误报告 */
// "noUncheckedIndexedAccess": true, /* 在使用索引访问时向类型添加 'undefined' */
// "noImplicitOverride": true, /* 确保派生类中的重写成员标记有 override 修饰符 */
// "noPropertyAccessFromIndexSignature": true, /* 强制对使用索引类型声明的键使用索引访问器 */
// "allowUnusedLabels": true, /* 禁用对未使用标签的错误报告 */
// "allowUnreachableCode": true, /* 禁用对无法访问代码的错误报告 */
/* 完整性 */
// "skipDefaultLibCheck": true, /* 跳过对 TypeScript 包含的 .d.ts 文件的类型检查 */
"skipLibCheck": true /* 跳过对所有 .d.ts 文件的类型检查 */
}
}
DANGER
危险