Skip to content

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

危险

2024 Alvisliu. All Rights Reserved.