编译器选项

"compilerOptions"

JavaScript 支持
  1. allowJs
  2. checkJs
  3. maxNodeModuleJsDepth
编辑器支持
  1. disableSizeLimit
  2. plugins
命令行

    根字段

    首先是 TSConfig 中的根选项 - 这些选项与 TypeScript 或 JavaScript 项目的设置方式有关。

    # 文件 - files

    指定要包含在程序中的文件白名单。如果找不到任何文件,则会发生错误。

    {
    "": [
    "core.ts",
    "sys.ts",
    "types.ts",
    "scanner.ts",
    "parser.ts",
    "utilities.ts",
    "binder.ts",
    "checker.ts",
    "tsc.ts"
    ]
    }

    当您只有少量文件并且不需要使用 glob 来引用许多文件时,这很有用。如果您需要这样做,请使用 include

    # 扩展 - extends

    extends 的值是一个字符串,包含指向另一个要继承的配置文件的路径。该路径可以使用 Node.js 风格的解析。

    首先加载来自基本文件的配置,然后由继承配置中的配置覆盖。在配置文件中找到的所有相对路径将相对于它们起源的配置文件解析。

    值得注意的是,来自继承配置文件的 filesincludeexclude覆盖来自基本配置文件的那些,并且不允许配置文件之间的循环引用。

    目前,唯一从继承中排除的顶级属性是 references

    示例

    configs/base.json:

    tsconfig.json:

    {
    "": "./configs/base",
    "": ["main.ts", "supplemental.ts"]
    }

    tsconfig.nostrictnull.json:

    {
    "": "./tsconfig",
    }
    }

    在配置文件中找到的具有相对路径的属性(不从继承中排除)将相对于它们起源的配置文件解析。

    • 默认值

      false

    • 已发布

      2.1

    # 包含 - include

    指定要包含在程序中的文件名或模式数组。这些文件名相对于包含 tsconfig.json 文件的目录解析。

    json
    {
    "include": ["src/**/*", "tests/**/*"]
    }

    这将包括

    . ├── scripts ⨯ │ ├── lint.ts ⨯ │ ├── update_deps.ts ⨯ │ └── utils.ts ⨯ ├── src ✓ │ ├── client ✓ │ │ ├── index.ts ✓ │ │ └── utils.ts ✓ │ ├── server ✓ │ │ └── index.ts ✓ ├── tests ✓ │ ├── app.test.ts ✓ │ ├── utils.ts ✓ │ └── tests.d.ts ✓ ├── package.json ├── tsconfig.json └── yarn.lock

    includeexclude 支持通配符以创建 glob 模式

    • * 匹配零个或多个字符(不包括目录分隔符)
    • ? 匹配任何一个字符(不包括目录分隔符)
    • **/ 匹配任何嵌套到任何级别的目录

    如果模式中的最后一个路径段不包含文件扩展名或通配符,则它被视为目录,并且该目录中具有支持扩展名的文件将被包含(例如,默认情况下为 .ts.tsx.d.ts,如果 allowJs 设置为 true,则为 .js.jsx)。

    # 排除 - exclude

    指定在解析 include 时应跳过的文件名或模式数组。

    重要exclude 更改由于 include 设置而包含的文件。由 exclude 指定的文件仍然可能由于代码中的 import 语句、types 包含、/// <reference 指令或在 files 列表中指定而成为代码库的一部分。

    它不是一种阻止文件包含在代码库中的机制 - 它只是更改了 include 设置找到的内容。

    # 引用 - references

    项目引用是将 TypeScript 程序分解成更小部分的一种方式。使用项目引用可以极大地改善构建和编辑器交互时间,强制执行组件之间的逻辑分离,并以新的改进方式组织代码。

    您可以在手册的 项目引用 部分阅读有关引用工作原理的更多信息。

    • 默认值

      false

    编译器选项

    这些选项构成了 TypeScript 配置的大部分,它涵盖了语言应该如何工作。

    #类型检查

    # 允许无法访问的代码 - allowUnreachableCode

    • undefined(默认)向编辑器提供建议作为警告
    • true 忽略无法访问的代码
    • false 针对无法访问的代码引发编译器错误

    这些警告只针对由于使用 JavaScript 语法而被证明无法访问的代码,例如

    ts
    function fn(n: number) {
    if (n > 5) {
    return true;
    } else {
    return false;
    }
    return true;
    }

    使用 "allowUnreachableCode": false

    ts
    function fn(n: number) {
    if (n > 5) {
    return true;
    } else {
    return false;
    }
    return true;
    Unreachable code detected.7027Unreachable code detected.
    }
    Try

    这不会影响由于类型分析而看起来无法访问的代码的错误。

    # 允许未使用的标签 - allowUnusedLabels

    • undefined(默认)向编辑器提供建议作为警告
    • true 忽略未使用的标签
    • false 针对未使用的标签引发编译器错误

    标签在 JavaScript 中非常罕见,通常表示尝试编写对象字面量

    ts
    function verifyAge(age: number) {
    // Forgot 'return' statement
    if (age > 18) {
    verified: true;
    Unused label.7028Unused label.
    }
    }
    Try

    # 始终严格 - alwaysStrict

    确保您的文件在 ECMAScript 严格模式下解析,并为每个源文件发出“use strict”。

    ECMAScript 严格 模式在 ES5 中引入,它对 JavaScript 引擎的运行时提供行为调整以提高性能,并使一组错误抛出而不是静默忽略它们。

    • 推荐
    • 默认值

      如果 strict,则为 true;否则为 false

    • 相关
    • 已发布

      2.1

    # 精确可选属性类型 - exactOptionalPropertyTypes

    启用 exactOptionalPropertyTypes 后,TypeScript 会对处理 typeinterfaces 上带有 ? 前缀的属性的方式应用更严格的规则。

    例如,此接口声明存在一个属性,该属性可以是两个字符串之一:“dark”或“light”,或者它不应该在对象中。

    ts
    interface UserDefaults {
    // The absence of a value represents 'system'
    colorThemeOverride?: "dark" | "light";
    }

    在未启用此标志的情况下,您可以将 colorThemeOverride 设置为三个值:“dark”、“light”和 undefined

    将值设置为 undefined 将允许大多数 JavaScript 运行时检查存在失败,这实际上是假的。但是,这并不完全准确;colorThemeOverride: undefinedcolorThemeOverride 未定义不同。例如,"colorThemeOverride" in settingsundefined 作为键与未定义相比将具有不同的行为。

    exactOptionalPropertyTypes 使 TypeScript 真正强制执行作为可选属性提供的定义

    ts
    const settings = getUserSettings();
    settings.colorThemeOverride = "dark";
    settings.colorThemeOverride = "light";
     
    // But not:
    settings.colorThemeOverride = undefined;
    Type 'undefined' is not assignable to type '"dark" | "light"' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the type of the target.2412Type 'undefined' is not assignable to type '"dark" | "light"' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the type of the target.
    Try
    • 推荐
    • 已发布

      4.4

    # Switch 语句中没有贯穿情况 - noFallthroughCasesInSwitch

    报告 switch 语句中贯穿情况的错误。确保 switch 语句中的任何非空 case 都包含 breakreturnthrow。这意味着您不会意外地发布贯穿情况错误。

    ts
    const a: number = 6;
     
    switch (a) {
    case 0:
    Fallthrough case in switch.7029Fallthrough case in switch.
    console.log("even");
    case 1:
    console.log("odd");
    break;
    }
    Try

    # 没有隐式 any - noImplicitAny

    在某些情况下,如果不存在类型注释,TypeScript 将在无法推断类型时将变量的类型回退到 any

    这可能会导致一些错误被忽略,例如

    ts
    function fn(s) {
    // No error?
    console.log(s.subtr(3));
    }
    fn(42);
    Try

    启用 noImplicitAny,TypeScript 将在推断出 any 时发出错误。

    ts
    function fn(s) {
    Parameter 's' implicitly has an 'any' type.7006Parameter 's' implicitly has an 'any' type.
    console.log(s.subtr(3));
    }
    Try
    • 推荐
    • 默认值

      如果 strict,则为 true;否则为 false

    • 相关

    # 不允许隐式覆盖 - noImplicitOverride

    在使用继承的类中工作时,子类可能会与它重载的函数“不同步”,当这些函数在基类中被重命名时。

    例如,假设您正在模拟一个音乐专辑同步系统。

    ts
    class Album {
    download() {
    // Default behavior
    }
    }
     
    class SharedAlbum extends Album {
    download() {
    // Override to get info from many sources
    }
    }
    Try

    然后,当您添加对机器学习生成的播放列表的支持时,您将重构 Album 类以使用“setup”函数代替。

    ts
    class Album {
    setup() {
    // Default behavior
    }
    }
     
    class MLAlbum extends Album {
    setup() {
    // Override to get info from algorithm
    }
    }
     
    class SharedAlbum extends Album {
    download() {
    // Override to get info from many sources
    }
    }
    Try

    在这种情况下,TypeScript 没有发出警告,表明 SharedAlbum 上的 download 预期 覆盖基类中的函数。

    使用 noImplicitOverride,您可以确保子类永远不会不同步,方法是确保覆盖函数包含 override 关键字。

    以下示例启用了 noImplicitOverride,您可以看到当缺少 override 时收到的错误。

    ts
    class Album {
    setup() {}
    }
     
    class MLAlbum extends Album {
    override setup() {}
    }
     
    class SharedAlbum extends Album {
    setup() {}
    This member must have an 'override' modifier because it overrides a member in the base class 'Album'.4114This member must have an 'override' modifier because it overrides a member in the base class 'Album'.
    }
    Try

    # 不允许隐式返回值 - noImplicitReturns

    启用后,TypeScript 将检查函数中的所有代码路径,以确保它们返回一个值。

    ts
    function lookupHeadphonesManufacturer(color: "blue" | "black"): string {
    Function lacks ending return statement and return type does not include 'undefined'.2366Function lacks ending return statement and return type does not include 'undefined'.
    if (color === "blue") {
    return "beats";
    } else {
    "bose";
    }
    }
    Try

    # 不允许隐式 this - noImplicitThis

    对具有隐式 'any' 类型的 'this' 表达式引发错误。

    例如,下面的类返回一个函数,该函数尝试访问 this.widththis.height - 但 getAreaFunction 中函数内部的 this 上下文不是 Rectangle 的实例。

    ts
    class Rectangle {
    width: number;
    height: number;
     
    constructor(width: number, height: number) {
    this.width = width;
    this.height = height;
    }
     
    getAreaFunction() {
    return function () {
    return this.width * this.height;
    'this' implicitly has type 'any' because it does not have a type annotation.
    'this' implicitly has type 'any' because it does not have a type annotation.
    2683
    2683
    'this' implicitly has type 'any' because it does not have a type annotation.
    'this' implicitly has type 'any' because it does not have a type annotation.
    };
    }
    }
    Try
    • 推荐
    • 默认值

      如果 strict,则为 true;否则为 false

    • 相关
    • 已发布

      2.0

    # 不允许从索引签名访问属性 - noPropertyAccessFromIndexSignature

    此设置确保通过“点”(obj.key) 语法和“索引”(obj["key"]) 访问字段之间的一致性,以及在类型中声明属性的方式。

    没有此标志,TypeScript 将允许您使用点语法访问未定义的字段。

    ts
    interface GameSettings {
    // Known up-front properties
    speed: "fast" | "medium" | "slow";
    quality: "high" | "low";
     
    // Assume anything unknown to the interface
    // is a string.
    [key: string]: string;
    }
     
    const settings = getSettings();
    settings.speed;
    (property) GameSettings.speed: "fast" | "medium" | "slow"
    settings.quality;
    (property) GameSettings.quality: "high" | "low"
     
    // Unknown key accessors are allowed on
    // this object, and are `string`
    settings.username;
    (index) GameSettings[string]: string
    Try

    启用此标志将引发错误,因为未知字段使用点语法而不是索引语法。

    ts
    const settings = getSettings();
    settings.speed;
    settings.quality;
     
    // This would need to be settings["username"];
    settings.username;
    Property 'username' comes from an index signature, so it must be accessed with ['username'].4111Property 'username' comes from an index signature, so it must be accessed with ['username'].
    (index) GameSettings[string]: string
    Try

    此标志的目的是在您的调用语法中表明您对该属性是否存在有多确定。

    # 不允许未检查的索引访问 - noUncheckedIndexedAccess

    TypeScript 有一种方法可以使用索引签名来描述具有未知键但已知值的 对象。

    ts
    interface EnvironmentVars {
    NAME: string;
    OS: string;
     
    // Unknown properties are covered by this index signature.
    [propName: string]: string;
    }
     
    declare const env: EnvironmentVars;
     
    // Declared as existing
    const sysName = env.NAME;
    const os = env.OS;
    const os: string
     
    // Not declared, but because of the index
    // signature, then it is considered a string
    const nodeEnv = env.NODE_ENV;
    const nodeEnv: string
    Try

    启用 noUncheckedIndexedAccess 将在类型中为任何未声明的字段添加 undefined

    ts
    declare const env: EnvironmentVars;
     
    // Declared as existing
    const sysName = env.NAME;
    const os = env.OS;
    const os: string
     
    // Not declared, but because of the index
    // signature, then it is considered a string
    const nodeEnv = env.NODE_ENV;
    const nodeEnv: string | undefined
    Try

    # 不允许未使用的局部变量 - noUnusedLocals

    报告未使用的局部变量的错误。

    ts
    const createKeyboard = (modelID: number) => {
    const defaultModelID = 23;
    'defaultModelID' is declared but its value is never read.6133'defaultModelID' is declared but its value is never read.
    return { type: "keyboard", modelID };
    };
    Try

    # 不允许未使用的参数 - noUnusedParameters

    报告函数中未使用的参数的错误。

    ts
    const createDefaultKeyboard = (modelID: number) => {
    'modelID' is declared but its value is never read.6133'modelID' is declared but its value is never read.
    const defaultModelID = 23;
    return { type: "keyboard", modelID: defaultModelID };
    };
    Try

    # 严格模式 - strict

    strict 标志启用了一系列类型检查行为,这些行为可以提供更强的程序正确性保证。启用此标志等效于启用所有 *严格模式系列* 选项,这些选项在下面概述。然后,您可以根据需要关闭各个严格模式系列检查。

    TypeScript 的未来版本可能会在此标志下引入更严格的检查,因此升级 TypeScript 可能会导致程序中出现新的类型错误。在适当且可能的情况下,将添加相应的标志来禁用该行为。

    # 严格绑定调用应用 - strictBindCallApply

    启用后,TypeScript 将检查函数的内置方法 callbindapply 是否以正确的参数调用了底层函数。

    ts
    // With strictBindCallApply on
    function fn(x: string) {
    return parseInt(x);
    }
     
    const n1 = fn.call(undefined, "10");
     
    const n2 = fn.call(undefined, false);
    Argument of type 'boolean' is not assignable to parameter of type 'string'.2345Argument of type 'boolean' is not assignable to parameter of type 'string'.
    Try

    否则,这些函数将接受任何参数并返回 any

    ts
    // With strictBindCallApply off
    function fn(x: string) {
    return parseInt(x);
    }
     
    // Note: No error; return type is 'any'
    const n = fn.call(undefined, false);
    Try
    • 推荐
    • 默认值

      如果 strict,则为 true;否则为 false

    • 相关
    • 已发布

      3.2

    # 严格函数类型 - strictFunctionTypes

    启用此标志后,将更准确地检查函数参数。

    以下是一个 strictFunctionTypes 关闭时的基本示例

    ts
    function fn(x: string) {
    console.log("Hello, " + x.toLowerCase());
    }
     
    type StringOrNumberFunc = (ns: string | number) => void;
     
    // Unsafe assignment
    let func: StringOrNumberFunc = fn;
    // Unsafe call - will crash
    func(10);
    Try

    strictFunctionTypes 开启时,错误会被正确检测到

    ts
    function fn(x: string) {
    console.log("Hello, " + x.toLowerCase());
    }
     
    type StringOrNumberFunc = (ns: string | number) => void;
     
    // Unsafe assignment is prevented
    let func: StringOrNumberFunc = fn;
    Type '(x: string) => void' is not assignable to type 'StringOrNumberFunc'. Types of parameters 'x' and 'ns' are incompatible. Type 'string | number' is not assignable to type 'string'. Type 'number' is not assignable to type 'string'.2322Type '(x: string) => void' is not assignable to type 'StringOrNumberFunc'. Types of parameters 'x' and 'ns' are incompatible. Type 'string | number' is not assignable to type 'string'. Type 'number' is not assignable to type 'string'.
    Try

    在开发此功能期间,我们发现大量本质上不安全的类层次结构,包括 DOM 中的一些。因此,此设置仅适用于以 函数 语法编写的函数,而不适用于以 方法 语法编写的函数。

    ts
    type Methodish = {
    func(x: string | number): void;
    };
     
    function fn(x: string) {
    console.log("Hello, " + x.toLowerCase());
    }
     
    // Ultimately an unsafe assignment, but not detected
    const m: Methodish = {
    func: fn,
    };
    m.func(10);
    Try
    • 推荐
    • 默认值

      如果 strict,则为 true;否则为 false

    • 相关
    • 已发布

      2.6

    # 严格空检查 - strictNullChecks

    strictNullChecksfalse 时,nullundefined 会被语言有效地忽略。这会导致运行时出现意外错误。

    strictNullCheckstrue 时,nullundefined 具有各自的类型,并且如果您尝试在需要具体值的地方使用它们,您将收到类型错误。

    例如,对于以下 TypeScript 代码,users.find 无法保证它会真正找到用户,但您可以像它会找到一样编写代码

    ts
    declare const loggedInUsername: string;
     
    const users = [
    { name: "Oby", age: 12 },
    { name: "Heera", age: 32 },
    ];
     
    const loggedInUser = users.find((u) => u.name === loggedInUsername);
    console.log(loggedInUser.age);
    Try

    strictNullChecks 设置为 true 将引发错误,因为您没有保证 loggedInUser 存在,然后再尝试使用它。

    ts
    declare const loggedInUsername: string;
     
    const users = [
    { name: "Oby", age: 12 },
    { name: "Heera", age: 32 },
    ];
     
    const loggedInUser = users.find((u) => u.name === loggedInUsername);
    console.log(loggedInUser.age);
    'loggedInUser' is possibly 'undefined'.18048'loggedInUser' is possibly 'undefined'.
    Try

    第二个示例失败是因为数组的 find 函数看起来有点像这种简化

    ts
    // When strictNullChecks: true
    type Array = {
    find(predicate: (value: any, index: number) => boolean): S | undefined;
    };
    // When strictNullChecks: false the undefined is removed from the type system,
    // allowing you to write code which assumes it always found a result
    type Array = {
    find(predicate: (value: any, index: number) => boolean): S;
    };
    • 推荐
    • 默认值

      如果 strict,则为 true;否则为 false

    • 相关
    • 已发布

      2.0

    # 严格属性初始化 - strictPropertyInitialization

    当设置为 true 时,TypeScript 会在类属性被声明但在构造函数中未设置时引发错误。

    ts
    class UserAccount {
    name: string;
    accountType = "user";
     
    email: string;
    Property 'email' has no initializer and is not definitely assigned in the constructor.2564Property 'email' has no initializer and is not definitely assigned in the constructor.
    address: string | undefined;
     
    constructor(name: string) {
    this.name = name;
    // Note that this.email is not set
    }
    }
    Try

    在上面的例子中

    • this.name 被专门设置。
    • this.accountType 被默认设置。
    • this.email 未设置,并引发错误。
    • this.address 被声明为可能为 undefined,这意味着它不必被设置。
    • 推荐
    • 默认值

      如果 strict,则为 true;否则为 false

    • 相关
    • 已发布

      2.7

    # 在捕获变量中使用未知 - useUnknownInCatchVariables

    在 TypeScript 4.0 中,添加了支持,允许将 catch 子句中变量的类型从 any 更改为 unknown。允许使用以下代码

    ts
    try {
    // ...
    } catch (err) {
    // We have to verify err is an
    // error before using it as one.
    if (err instanceof Error) {
    console.log(err.message);
    }
    }
    Try

    这种模式确保错误处理代码变得更加全面,因为您无法保证抛出的对象 Error 子类。启用标志 useUnknownInCatchVariables 后,您不需要额外的语法 (: unknown) 也不需要 linter 规则来尝试强制执行此行为。

    • 推荐
    • 默认值

      如果 strict,则为 true;否则为 false

    • 相关
    • 已发布

      4.4

    #模块

    # 允许任意扩展 - allowArbitraryExtensions

    在 TypeScript 5.0 中,当导入路径以非已知 JavaScript 或 TypeScript 文件扩展名结尾时,编译器将以 {file basename}.d.{extension}.ts 的形式查找该路径的声明文件。例如,如果您在捆绑器项目中使用 CSS 加载器,您可能希望为这些样式表编写(或生成)声明文件

    css
    /* app.css */
    .cookie-banner {
    display: none;
    }
    ts
    // app.d.css.ts
    declare const css: {
    cookieBanner: string;
    };
    export default css;
    ts
    // App.tsx
    import styles from "./app.css";
    styles.cookieBanner; // string

    默认情况下,此导入将引发错误,以告知您 TypeScript 不理解此文件类型,并且您的运行时可能不支持导入它。但是,如果您已配置运行时或捆绑器来处理它,则可以使用新的 --allowArbitraryExtensions 编译器选项来抑制错误。

    请注意,从历史上看,通过添加名为 app.css.d.ts 而不是 app.d.css.ts 的声明文件,通常可以实现类似的效果 - 但是,这只是通过 Node 的 require 针对 CommonJS 的解析规则来实现的。严格来说,前者被解释为名为 app.css.js 的 JavaScript 文件的声明文件。由于相对文件导入需要在 Node 的 ESM 支持中包含扩展名,因此 TypeScript 会在 --moduleResolution node16nodenext 下的 ESM 文件中针对我们的示例报错。

    有关更多信息,请阅读 此功能的提案其对应的拉取请求

      # 允许导入 TS 扩展名 - allowImportingTsExtensions

      --allowImportingTsExtensions 允许 TypeScript 文件使用 TypeScript 特定的扩展名(如 .ts.mts.tsx)相互导入。

      此标志仅在启用 --noEmit--emitDeclarationOnly 时才允许,因为这些导入路径在 JavaScript 输出文件中无法在运行时解析。这里的期望是您的解析器(例如您的捆绑器、运行时或其他工具)将使这些 .ts 文件之间的导入正常工作。

        # 允许 UMD 全局访问 - allowUmdGlobalAccess

        当设置为 true 时,allowUmdGlobalAccess 允许您从模块文件内部以全局方式访问 UMD 导出。模块文件是包含导入和/或导出的文件。没有此标志,使用 UMD 模块的导出需要导入声明。

        此标志的一个示例用例是 Web 项目,您知道特定库(如 jQuery 或 Lodash)始终在运行时可用,但您无法使用导入来访问它。

        # 基本 URL - baseUrl

        设置一个基目录,用于解析裸规范符模块名称。例如,在以下目录结构中

        project ├── ex.ts ├── hello │ └── world.ts └── tsconfig.json

        使用 "baseUrl": "./",TypeScript 将从与 tsconfig.json 相同的文件夹开始查找文件

        ts
        import { helloWorld } from "hello/world";
        console.log(helloWorld);

        此解析优先级高于从 node_modules 中查找。

        此功能旨在与浏览器中的 AMD 模块加载器结合使用,不建议在其他任何情况下使用。从 TypeScript 4.1 开始,当使用 paths 时,不再需要设置 baseUrl

          # 自定义条件 - customConditions

          --customConditions 接受一个额外的 条件 列表,这些条件在 TypeScript 从 exportsimports 字段解析 package.json 时应该成功。这些条件将添加到解析器默认使用的任何现有条件中。

          例如,当在 tsconfig.json 中设置此字段时

          jsonc
          {
          "compilerOptions": {
          "target": "es2022",
          "moduleResolution": "bundler",
          "customConditions": ["my-condition"]
          }
          }

          任何时候在 package.json 中引用 exportsimports 字段时,TypeScript 将考虑名为 my-condition 的条件。

          因此,当从具有以下 package.json 的包导入时

          jsonc
          {
          // ...
          "exports": {
          ".": {
          "my-condition": "./foo.mjs",
          "node": "./bar.mjs",
          "import": "./baz.mjs",
          "require": "./biz.mjs"
          }
          }
          }

          TypeScript 将尝试查找与 foo.mjs 对应的文件。

          此字段仅在 --moduleResolutionnode16nodenextbundler 选项下有效。

          # 模块 - module

          设置程序的模块系统。有关更多信息,请参阅 TypeScript 的 module 选项背后的理论其参考页面。对于现代 Node.js 项目,您很可能需要 "nodenext"

          更改 module 会影响 moduleResolution它也有一个参考页面

          以下是此文件的示例输出

          ts
          // @filename: index.ts
          import { valueOfPi } from "./constants";
           
          export const twoPi = valueOfPi * 2;
          Try

          CommonJS

          ts
          "use strict";
          Object.defineProperty(exports, "__esModule", { value: true });
          exports.twoPi = void 0;
          const constants_1 = require("./constants");
          exports.twoPi = constants_1.valueOfPi * 2;
           
          Try

          UMD

          ts
          (function (factory) {
          if (typeof module === "object" && typeof module.exports === "object") {
          var v = factory(require, exports);
          if (v !== undefined) module.exports = v;
          }
          else if (typeof define === "function" && define.amd) {
          define(["require", "exports", "./constants"], factory);
          }
          })(function (require, exports) {
          "use strict";
          Object.defineProperty(exports, "__esModule", { value: true });
          exports.twoPi = void 0;
          const constants_1 = require("./constants");
          exports.twoPi = constants_1.valueOfPi * 2;
          });
           
          Try

          AMD

          ts
          define(["require", "exports", "./constants"], function (require, exports, constants_1) {
          "use strict";
          Object.defineProperty(exports, "__esModule", { value: true });
          exports.twoPi = void 0;
          exports.twoPi = constants_1.valueOfPi * 2;
          });
           
          Try

          System

          ts
          System.register(["./constants"], function (exports_1, context_1) {
          "use strict";
          var constants_1, twoPi;
          var __moduleName = context_1 && context_1.id;
          return {
          setters: [
          function (constants_1_1) {
          constants_1 = constants_1_1;
          }
          ],
          execute: function () {
          exports_1("twoPi", twoPi = constants_1.valueOfPi * 2);
          }
          };
          });
           
          Try

          ESNext

          ts
          import { valueOfPi } from "./constants";
          export const twoPi = valueOfPi * 2;
           
          Try

          ES2015/ES6/ES2020/ES2022

          ts
          import { valueOfPi } from "./constants";
          export const twoPi = valueOfPi * 2;
           
          Try

          除了ES2015/ES6 的基本功能外,ES2020 还支持 动态importimport.meta,而 ES2022 进一步支持 顶层await

          node16/nodenext

          从 4.7+ 开始,node16nodenext 模式与 Node 的 原生 ECMAScript 模块支持 集成。生成的 JavaScript 使用 CommonJSES2020 输出,具体取决于文件扩展名和最近的 package.jsontype 设置的值。模块解析的方式也不同。您可以在 手册模块参考 中了解更多信息。

          None

          ts
          "use strict";
          Object.defineProperty(exports, "__esModule", { value: true });
          exports.twoPi = void 0;
          const constants_1 = require("./constants");
          exports.twoPi = constants_1.valueOfPi * 2;
           
          Try

          # 模块解析 - moduleResolution

          指定模块解析策略

          • 对于现代版本的 Node.js,使用 'node16''nodenext'。Node.js v12 及更高版本支持 ECMAScript 导入和 CommonJS require,它们使用不同的算法进行解析。这些 moduleResolution 值与相应的 module 值结合使用时,会根据 Node.js 在输出 JavaScript 代码中看到 importrequire 来选择正确的算法。

          • 对于低于 v10 的 Node.js 版本,使用 'node10'(以前称为 'node'),这些版本只支持 CommonJS require。在现代代码中,您可能不需要使用 node10

          • 对于打包器,使用 'bundler'。与 node16nodenext 一样,此模式支持 package.json "imports""exports",但与 Node.js 解析模式不同,bundler 永远不需要导入中相对路径上的文件扩展名。

            bundler 不支持解析 require 调用。在 TypeScript 文件中,这意味着 import mod = require("foo") 语法是被禁止的;在 JavaScript 文件中,require 调用不会报错,但只会返回 any 类型(或者全局 require 函数的任何环境声明被声明为 return 的类型)。

          • 'classic' 在 TypeScript 1.6 版本发布之前使用。classic 不应该再使用。

          有参考页面解释了 TypeScript 模块解析背后的理论 以及 每个选项的细节

          # 模块后缀 - moduleSuffixes

          提供了一种方法来覆盖在解析模块时搜索的文件名后缀的默认列表。

          {
          "moduleSuffixes": [".ios", ".native", ""]
          }
          }

          给定上述配置,以下导入

          ts
          import * as foo from "./foo";

          TypeScript 将查找相对文件 ./foo.ios.ts./foo.native.ts,最后是 ./foo.ts

          请注意 moduleSuffixes 中的空字符串 "",这是 TypeScript 也查找 ./foo.ts 所必需的。

          此功能对于 React Native 项目很有用,在 React Native 项目中,每个目标平台可以使用具有不同 moduleSuffixes 的单独 tsconfig.json。

          # 不解析 - noResolve

          默认情况下,TypeScript 将检查初始文件集以查找 import<reference 指令,并将这些解析的文件添加到您的程序中。

          如果设置了 noResolve,则此过程不会发生。但是,import 语句仍然会检查以查看它们是否解析为有效的模块,因此您需要确保通过其他方式满足此条件。

            # 路径 - paths

            一系列条目,如果设置了 baseUrl,则将导入重新映射到相对于 baseUrl 的查找位置,否则重新映射到 tsconfig 文件本身。在 moduleResolution 参考页面 中对 paths 有更广泛的介绍。

            paths 允许您声明 TypeScript 应该如何解析 require/import 中的导入。

            {
            "": {
            "jquery": ["./vendor/jquery/dist/jquery"]
            }
            }
            }

            这将允许您编写 import "jquery",并获得所有正确的本地类型。

            {
            "": {
            "app/*": ["./src/app/*"],
            "config/*": ["./src/app/_config/*"],
            "environment/*": ["./src/environments/*"],
            "shared/*": ["./src/app/_shared/*"],
            "helpers/*": ["./src/helpers/*"],
            "tests/*": ["./src/tests/*"]
            },
            }

            在这种情况下,您可以告诉 TypeScript 文件解析器支持许多自定义前缀来查找代码。

            请注意,此功能不会更改 tsc 发出的导入路径,因此 paths 仅应用于告知 TypeScript 另一个工具具有此映射,并在运行时或捆绑时使用它。

              # 解析 JSON 模块 - resolveJsonModule

              允许导入扩展名为 .json 的模块,这在 Node 项目中是一种常见做法。这包括根据静态 JSON 形状生成 import 的类型。

              TypeScript 默认不支持解析 JSON 文件。

              ts
              // @filename: settings.json
              Cannot find module './settings.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.2732Cannot find module './settings.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.
              {
              "repo": "TypeScript",
              "dry": false,
              "debug": false
              }
              // @filename: index.ts
              import settings from "./settings.json";
               
              settings.debug === true;
              settings.dry === 2;
              Try

              启用此选项允许导入 JSON,并验证该 JSON 文件中的类型。

              ts
              // @filename: settings.json
              {
              "repo": "TypeScript",
              "dry": false,
              This comparison appears to be unintentional because the types 'boolean' and 'number' have no overlap.2367This comparison appears to be unintentional because the types 'boolean' and 'number' have no overlap.
              "debug": false
              }
              // @filename: index.ts
              import settings from "./settings.json";
               
              settings.debug === true;
              settings.dry === 2;
              Try

                # 解析 package.json Exports - resolvePackageJsonExports

                --resolvePackageJsonExports 强制 TypeScript 在读取 node_modules 中的包时,始终参考 package.json 文件的 exports 字段

                对于 --moduleResolutionnode16nodenextbundler 选项,此选项默认值为 true

                # 解析 package.json Imports - resolvePackageJsonImports

                --resolvePackageJsonImports 强制 TypeScript 在执行从包含 package.json 的祖先目录的某个文件开始的查找时,始终参考 package.json 文件的 imports 字段

                对于 --moduleResolutionnode16nodenextbundler 选项,此选项默认值为 true

                # 根目录 - rootDir

                默认值:所有非声明输入文件的最大公共路径。如果设置了 composite,则默认值为包含 tsconfig.json 文件的目录。

                当 TypeScript 编译文件时,它会在输出目录中保留与输入目录中相同的目录结构。

                例如,假设您有一些输入文件

                MyProj ├── tsconfig.json ├── core │ ├── a.ts │ ├── b.ts │ ├── sub │ │ ├── c.ts ├── types.d.ts

                rootDir 的推断值为所有非声明输入文件的最大公共路径,在本例中为 core/

                如果您的 outDirdist,TypeScript 将写入此树

                MyProj ├── dist │ ├── a.js │ ├── b.js │ ├── sub │ │ ├── c.js

                但是,您可能希望将core作为输出目录结构的一部分。通过在tsconfig.json中设置rootDir: ".",TypeScript 将写入此树

                MyProj ├── dist │ ├── core │ │ ├── a.js │ │ ├── b.js │ │ ├── sub │ │ │ ├── c.js

                重要的是,rootDir **不会影响哪些文件成为编译的一部分**。它与includeexcludefiles tsconfig.json 设置没有交互。

                请注意,TypeScript 永远不会将输出文件写入 outDir 之外的目录,也不会跳过发出文件。因此,rootDir 还强制执行所有需要发出的文件都位于 rootDir 路径下。

                例如,假设您有以下树

                MyProj ├── tsconfig.json ├── core │ ├── a.ts │ ├── b.ts ├── helpers.ts

                rootDir 指定为 core 以及 include 指定为 * 将是一个错误,因为它会创建一个需要在 outDir 之外发出(即 ../helpers.js)的文件(helpers.ts)。

                • 默认值

                  从输入文件列表中计算得出。

                • 已发布

                  1.5

                # 根目录 - rootDirs

                使用 rootDirs,您可以告知编译器存在许多充当单个根的“虚拟”目录。这允许编译器解析这些“虚拟”目录中的相对模块导入,就好像它们合并到一个目录中一样。

                例如

                src └── views └── view1.ts (can import "./template1", "./view2`) └── view2.ts (can import "./template1", "./view1`) generated └── templates └── views └── template1.ts (can import "./view1", "./view2")
                {
                "": ["src/views", "generated/templates/views"]
                }
                }

                这不会影响 TypeScript 如何发出 JavaScript,它只模拟了它们能够在运行时通过这些相对路径工作的假设。

                rootDirs 可用于为不是 TypeScript 或 JavaScript 的文件提供单独的“类型层”,方法是在另一个文件夹中为生成的 .d.ts 文件提供一个位置。此技术对于捆绑应用程序很有用,在这些应用程序中,您使用不是代码的 import 文件

                sh
                src
                └── index.ts
                └── css
                └── main.css
                └── navigation.css
                generated
                └── css
                └── main.css.d.ts
                └── navigation.css.d.ts
                {
                "": ["src", "generated"]
                }
                }

                此技术允许您提前为非代码源文件生成类型。然后,导入将根据源文件的位置自然地工作。例如,./src/index.ts 可以导入文件 ./src/css/main.css,TypeScript 将通过相应的生成声明文件了解捆绑程序对该文件类型的行为。

                ts
                // @filename: index.ts
                import { appClass } from "./main.css";
                Try
                • 默认值

                  从输入文件列表中计算得出。

                • 已发布

                  2.0

                # 类型根目录 - typeRoots

                默认情况下,所有可见的“@types”包都包含在您的编译中。任何包含文件夹中的 node_modules/@types 中的包都被视为可见。例如,这意味着 ./node_modules/@types/../node_modules/@types/../../node_modules/@types/ 等文件夹中的包。

                如果指定了 typeRoots,则包含 typeRoots 下的包。例如

                {
                "": ["./typings", "./vendor/types"]
                }
                }

                此配置文件将包含 ./typings./vendor/types 下的所有包,而不会包含来自 ./node_modules/@types 的任何包。所有路径相对于 tsconfig.json

                # 类型 - types

                默认情况下,所有可见的“@types”包都包含在您的编译中。任何包含文件夹中的 node_modules/@types 中的包都被视为可见。例如,这意味着 ./node_modules/@types/../node_modules/@types/../../node_modules/@types/ 等文件夹中的包。

                如果指定了 types,则仅包含列出的包将包含在全局范围内。例如

                {
                "": ["node", "jest", "express"]
                }
                }

                tsconfig.json 文件将包含 ./node_modules/@types/node./node_modules/@types/jest./node_modules/@types/expressnode_modules/@types/* 下的其他包将不会被包含。

                此选项会影响什么?

                此选项不会影响 @types/* 如何包含在您的应用程序代码中,例如,如果您有上述 compilerOptions 示例,代码如下

                ts
                import * as moment from "moment";
                moment().format("MMMM Do YYYY, h:mm:ss a");

                moment 导入将被完全类型化。

                当您设置此选项时,通过不将模块包含在 types 数组中,它

                • 不会向您的项目添加全局变量(例如,节点中的 process 或 Jest 中的 expect
                • 不会将导出显示为自动导入建议

                此功能与 typeRoots 不同,它只指定要包含的精确类型,而 typeRoots 支持指定要包含的特定文件夹。

                #Emit

                # 声明 - declaration

                为项目中的每个 TypeScript 或 JavaScript 文件生成 .d.ts 文件。这些 .d.ts 文件是类型定义文件,描述了模块的外部 API。使用 .d.ts 文件,像 TypeScript 这样的工具可以为未类型化的代码提供智能感知和准确的类型。

                declaration 设置为 true 时,使用此 TypeScript 代码运行编译器

                ts
                export let helloWorld = "hi";
                Try

                将生成一个像这样的 index.js 文件

                ts
                export let helloWorld = "hi";
                 
                Try

                以及相应的 helloWorld.d.ts

                ts
                export declare let helloWorld: string;
                 
                Try

                在使用 JavaScript 文件的 .d.ts 文件时,您可能需要使用 emitDeclarationOnly 或使用 outDir 来确保 JavaScript 文件不被覆盖。

                # 声明目录 - declarationDir

                提供了一种配置声明文件发出位置的根目录的方法。

                example ├── index.ts ├── package.json └── tsconfig.json

                使用此 tsconfig.json

                {
                "": true,
                "": "./types"
                }
                }

                将把 index.ts 的 d.ts 放置在 types 文件夹中

                example ├── index.js ├── index.ts ├── package.json ├── tsconfig.json └── types └── index.d.ts

                # 声明映射 - declarationMap

                .d.ts 文件生成源映射,这些源映射映射回原始 .ts 源文件。这将允许像 VS Code 这样的编辑器在使用“转到定义”等功能时转到原始 .ts 文件。

                如果您使用项目引用,强烈建议您启用此选项。

                # 下级迭代 - downlevelIteration

                下级转换是 TypeScript 用于将代码转换为旧版 JavaScript 的术语。此标志用于启用对更准确实现现代 JavaScript 如何在旧版 JavaScript 运行时中迭代新概念的支持。

                ECMAScript 6 添加了几个新的迭代原语:for / of 循环 (for (el of arr))、数组展开 ([a, ...b])、参数展开 (fn(...args)) 和 Symbol.iteratordownlevelIteration 允许在 ES5 环境中更准确地使用这些迭代原语,前提是存在 Symbol.iterator 实现。

                示例:对 for / of 的影响

                使用以下 TypeScript 代码

                ts
                const str = "Hello!";
                for (const s of str) {
                console.log(s);
                }
                Try

                如果未启用 downlevelIteration,则对任何对象的 for / of 循环将被下级转换为传统的 for 循环

                ts
                "use strict";
                var str = "Hello!";
                for (var _i = 0, str_1 = str; _i < str_1.length; _i++) {
                var s = str_1[_i];
                console.log(s);
                }
                 
                Try

                这通常是人们所期望的,但它并不完全符合 ECMAScript 迭代协议。某些字符串,例如表情符号 (😜),其 .length 为 2(甚至更多!),但在 for-of 循环中应迭代为 1 个单元。有关更详细的说明,请参阅 Jonathan New 的这篇博文

                启用 downlevelIteration 后,TypeScript 将使用一个辅助函数来检查 Symbol.iterator 实现(本机或 polyfill)。如果此实现不存在,您将回退到基于索引的迭代。

                ts
                "use strict";
                var __values = (this && this.__values) || function(o) {
                var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
                if (m) return m.call(o);
                if (o && typeof o.length === "number") return {
                next: function () {
                if (o && i >= o.length) o = void 0;
                return { value: o && o[i++], done: !o };
                }
                };
                throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
                };
                var e_1, _a;
                var str = "Hello!";
                try {
                for (var str_1 = __values(str), str_1_1 = str_1.next(); !str_1_1.done; str_1_1 = str_1.next()) {
                var s = str_1_1.value;
                console.log(s);
                }
                }
                catch (e_1_1) { e_1 = { error: e_1_1 }; }
                finally {
                try {
                if (str_1_1 && !str_1_1.done && (_a = str_1.return)) _a.call(str_1);
                }
                finally { if (e_1) throw e_1.error; }
                }
                 
                Try

                您可以通过 importHelpers 使用 tslib 来减少内联 JavaScript 的数量

                ts
                "use strict";
                var __values = (this && this.__values) || function(o) {
                var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
                if (m) return m.call(o);
                if (o && typeof o.length === "number") return {
                next: function () {
                if (o && i >= o.length) o = void 0;
                return { value: o && o[i++], done: !o };
                }
                };
                throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
                };
                var e_1, _a;
                var str = "Hello!";
                try {
                for (var str_1 = __values(str), str_1_1 = str_1.next(); !str_1_1.done; str_1_1 = str_1.next()) {
                var s = str_1_1.value;
                console.log(s);
                }
                }
                catch (e_1_1) { e_1 = { error: e_1_1 }; }
                finally {
                try {
                if (str_1_1 && !str_1_1.done && (_a = str_1.return)) _a.call(str_1);
                }
                finally { if (e_1) throw e_1.error; }
                }
                 
                Try

                注意:如果运行时中不存在 Symbol.iterator,则启用 downlevelIteration 不会提高兼容性。

                示例:数组展开的影响

                这是一个数组展开

                js
                // Make a new array whose elements are 1 followed by the elements of arr2
                const arr = [1, ...arr2];

                根据描述,它听起来很容易降级到 ES5

                js
                // The same, right?
                const arr = [1].concat(arr2);

                但是,在某些罕见情况下,这明显不同。

                例如,如果源数组缺少一个或多个项(包含空洞),则展开语法将用undefined替换每个空项,而.concat将保持它们不变。

                js
                // Make an array where the element at index 1 is missing
                let arrayWithHole = ["a", , "c"];
                let spread = [...arrayWithHole];
                let concatenated = [].concat(arrayWithHole);
                console.log(arrayWithHole);
                // [ 'a', <1 empty item>, 'c' ]
                console.log(spread);
                // [ 'a', undefined, 'c' ]
                console.log(concatenated);
                // [ 'a', <1 empty item>, 'c' ]

                就像for / of一样,downlevelIteration将使用Symbol.iterator(如果存在)更准确地模拟 ES 6 行为。

                # 导出 BOM - emitBOM

                控制 TypeScript 在写入输出文件时是否导出字节顺序标记 (BOM)。一些运行时环境需要 BOM 才能正确解释 JavaScript 文件;其他环境则要求它不存在。默认值为false通常是最好的,除非你有理由更改它。

                  # 仅导出声明 - emitDeclarationOnly

                  导出.d.ts文件;不要导出.js文件。

                  此设置在两种情况下很有用

                  • 您正在使用除 TypeScript 之外的转译器来生成您的 JavaScript。
                  • 您正在使用 TypeScript 仅为您的消费者生成d.ts文件。

                  # 导入帮助程序 - importHelpers

                  对于某些降级操作,TypeScript 使用一些帮助程序代码来执行扩展类、展开数组或对象以及异步操作等操作。默认情况下,这些帮助程序将插入使用它们的代码文件中。如果在许多不同的模块中使用相同的帮助程序,这会导致代码重复。

                  如果 importHelpers 标志开启,这些辅助函数将从 tslib 模块导入。您需要确保 tslib 模块能够在运行时被导入。这只会影响模块;全局脚本文件不会尝试导入模块。

                  例如,使用以下 TypeScript 代码

                  ts
                  export function fn(arr: number[]) {
                  const arr2 = [1, ...arr];
                  }

                  开启 downlevelIteration,但 importHelpers 仍然为 false

                  ts
                  var __read = (this && this.__read) || function (o, n) {
                  var m = typeof Symbol === "function" && o[Symbol.iterator];
                  if (!m) return o;
                  var i = m.call(o), r, ar = [], e;
                  try {
                  while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
                  }
                  catch (error) { e = { error: error }; }
                  finally {
                  try {
                  if (r && !r.done && (m = i["return"])) m.call(i);
                  }
                  finally { if (e) throw e.error; }
                  }
                  return ar;
                  };
                  var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
                  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
                  if (ar || !(i in from)) {
                  if (!ar) ar = Array.prototype.slice.call(from, 0, i);
                  ar[i] = from[i];
                  }
                  }
                  return to.concat(ar || Array.prototype.slice.call(from));
                  };
                  export function fn(arr) {
                  var arr2 = __spreadArray([1], __read(arr), false);
                  }
                   
                  Try

                  然后同时开启 downlevelIterationimportHelpers

                  ts
                  import { __read, __spreadArray } from "tslib";
                  export function fn(arr) {
                  var arr2 = __spreadArray([1], __read(arr), false);
                  }
                   
                  Try

                  当您提供这些函数的自定义实现时,可以使用 noEmitHelpers

                  # 未用作值的导入 - importsNotUsedAsValues

                  已弃用,建议使用 verbatimModuleSyntax

                  此标志控制 import 的工作方式,有 3 种不同的选项

                  • remove:默认行为是删除仅引用类型的 import 语句。

                  • preserve:保留所有其值或类型从未使用过的 import 语句。这会导致导入/副作用被保留。

                  • error:保留所有导入(与 preserve 选项相同),但当值导入仅用作类型时会报错。如果您想确保没有值被意外导入,但仍然使副作用导入显式,这可能很有用。

                  此标志有效是因为您可以使用 import type 来显式创建永远不会被发射到 JavaScript 中的 import 语句。

                  # 内联源映射 - inlineSourceMap

                  设置后,TypeScript 不会写入 .js.map 文件来提供源映射,而是将源映射内容嵌入到 .js 文件中。虽然这会导致更大的 JS 文件,但在某些情况下可能很方便。例如,您可能希望在不允许提供 .map 文件的 Web 服务器上调试 JS 文件。

                  sourceMap 互斥。

                  例如,使用以下 TypeScript 代码

                  ts
                  const helloWorld = "hi";
                  console.log(helloWorld);

                  转换为以下 JavaScript 代码

                  ts
                  "use strict";
                  const helloWorld = "hi";
                  console.log(helloWorld);
                   
                  Try

                  然后启用使用inlineSourceMap构建它,文件底部有一个注释,其中包含该文件的源映射。

                  ts
                  "use strict";
                  const helloWorld = "hi";
                  console.log(helloWorld);
                  //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJpbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDO0FBQ3hCLE9BQU8sQ0FBQyxHQUFHLENBQUMsVUFBVSxDQUFDLENBQUMifQ==
                  Try

                  # 内联源 - inlineSources

                  设置后,TypeScript 会将.ts 文件的原始内容作为嵌入字符串包含在源映射中(使用源映射的sourcesContent 属性)。这在与inlineSourceMap相同的情况下通常很有用。

                  需要设置sourceMapinlineSourceMap

                  例如,使用以下 TypeScript 代码

                  ts
                  const helloWorld = "hi";
                  console.log(helloWorld);
                  Try

                  默认情况下转换为以下 JavaScript

                  ts
                  "use strict";
                  const helloWorld = "hi";
                  console.log(helloWorld);
                   
                  Try

                  然后启用使用inlineSourcesinlineSourceMap 构建它,文件底部有一个注释,其中包含该文件的源映射。请注意,结尾与 inlineSourceMap 中的示例不同,因为源映射现在还包含原始源代码。

                  ts
                  "use strict";
                  const helloWorld = "hi";
                  console.log(helloWorld);
                  //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJpbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDO0FBQ3hCLE9BQU8sQ0FBQyxHQUFHLENBQUMsVUFBVSxDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCBoZWxsb1dvcmxkID0gXCJoaVwiO1xuY29uc29sZS5sb2coaGVsbG9Xb3JsZCk7Il19
                  Try

                  # 映射根 - mapRoot

                  指定调试器应查找映射文件的位置,而不是生成的 location。此字符串在源映射中逐字处理,例如

                  {
                  "": true,
                  "": "https://my-website.com/debug/sourcemaps/"
                  }
                  }

                  将声明index.js 的源映射位于https://my-website.com/debug/sourcemaps/index.js.map

                    # 新行 - newLine

                    指定在发出文件时使用的行尾序列:‘CRLF’ (dos) 或 ‘LF’ (unix)。

                    • 默认值

                      平台特定。

                    • 允许
                      • crlf

                      • lf

                    • 已发布

                      1.5

                    # 不发出 - noEmit

                    不要发出编译器输出文件,例如 JavaScript 源代码、源映射或声明。

                    这为其他工具(如 Babelswc)提供了空间,以处理将 TypeScript 文件转换为可以在 JavaScript 环境中运行的文件。

                    然后,您可以将 TypeScript 用作提供编辑器集成和作为源代码类型检查器的工具。

                      # 不发出助手 - noEmitHelpers

                      您可以通过在全局范围内提供您使用的助手的实现,而不是使用 importHelpers 导入助手,并完全关闭助手函数的发出。

                      例如,在 ES5 中使用此async 函数需要一个await 类函数和一个generator 类函数来运行

                      ts
                      const getAPI = async (url: string) => {
                      // Get API
                      return {};
                      };
                      Try

                      这会创建很多 JavaScript

                      ts
                      "use strict";
                      var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
                      function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
                      return new (P || (P = Promise))(function (resolve, reject) {
                      function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
                      function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
                      function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
                      step((generator = generator.apply(thisArg, _arguments || [])).next());
                      });
                      };
                      var __generator = (this && this.__generator) || function (thisArg, body) {
                      var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
                      return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
                      function verb(n) { return function (v) { return step([n, v]); }; }
                      function step(op) {
                      if (f) throw new TypeError("Generator is already executing.");
                      while (g && (g = 0, op[0] && (_ = 0)), _) try {
                      if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
                      if (y = 0, t) op = [op[0] & 2, t.value];
                      switch (op[0]) {
                      case 0: case 1: t = op; break;
                      case 4: _.label++; return { value: op[1], done: false };
                      case 5: _.label++; y = op[1]; op = [0]; continue;
                      case 7: op = _.ops.pop(); _.trys.pop(); continue;
                      default:
                      if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                      if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                      if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                      if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                      if (t[2]) _.ops.pop();
                      _.trys.pop(); continue;
                      }
                      op = body.call(thisArg, _);
                      } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
                      if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
                      }
                      };
                      var getAPI = function (url) { return __awaiter(void 0, void 0, void 0, function () {
                      return __generator(this, function (_a) {
                      // Get API
                      return [2 /*return*/, {}];
                      });
                      }); };
                       
                      Try

                      可以通过此标志用您自己的全局变量替换它

                      ts
                      "use strict";
                      var getAPI = function (url) { return __awaiter(void 0, void 0, void 0, function () {
                      return __generator(this, function (_a) {
                      // Get API
                      return [2 /*return*/, {}];
                      });
                      }); };
                       
                      Try

                      # 错误时不发出 - noEmitOnError

                      如果报告了任何错误,则不发出编译器输出文件,例如 JavaScript 源代码、源映射或声明。

                      默认值为 false,这使得在类似于监视的环境中使用 TypeScript 变得更容易,在该环境中,您可能希望在确保解决所有错误之前在另一个环境中查看代码更改的结果。

                      # 输出目录 - outDir

                      如果指定,.js(以及 .d.ts.js.map 等)文件将被发出到此目录中。原始源文件的目录结构将被保留;如果计算出的根目录不是您想要的,请参见 rootDir

                      如果未指定,.js 文件将被发出到与生成它们的 .ts 文件相同的目录中

                      sh
                      $ tsc
                      example
                      ├── index.js
                      └── index.ts

                      使用这样的 tsconfig.json

                      {
                      "": "dist"
                      }
                      }

                      使用这些设置运行 tsc 会将文件移动到指定的 dist 文件夹中

                      sh
                      $ tsc
                      example
                      ├── dist
                      │ └── index.js
                      ├── index.ts
                      └── tsconfig.json

                      # 输出文件 - outFile

                      如果指定,所有全局(非模块)文件将被连接到指定的单个输出文件中。

                      如果 modulesystemamd,所有模块文件也将被连接到此文件中,在所有全局内容之后。

                      注意:除非 moduleNoneSystemAMD,否则 outFile 无法使用。此选项不能用于捆绑 CommonJS 或 ES6 模块。

                      # 保留常量枚举 - preserveConstEnums

                      不要在生成的代码中删除 const enum 声明。const enum 提供了一种方法,通过发出枚举值而不是引用来减少应用程序在运行时的总体内存占用。

                      例如,使用此 TypeScript

                      ts
                      const enum Album {
                      JimmyEatWorldFutures = 1,
                      TubRingZooHypothesis = 2,
                      DogFashionDiscoAdultery = 3,
                      }
                       
                      const selectedAlbum = Album.JimmyEatWorldFutures;
                      if (selectedAlbum === Album.JimmyEatWorldFutures) {
                      console.log("That is a great choice.");
                      }
                      Try

                      默认的 const enum 行为是将任何 Album.Something 转换为相应的数字文字,并从 JavaScript 中完全删除对枚举的引用。

                      ts
                      "use strict";
                      const selectedAlbum = 1 /* Album.JimmyEatWorldFutures */;
                      if (selectedAlbum === 1 /* Album.JimmyEatWorldFutures */) {
                      console.log("That is a great choice.");
                      }
                       
                      Try

                      preserveConstEnums 设置为 true 时,enum 会在运行时存在,并且数字仍然会被发出。

                      ts
                      "use strict";
                      var Album;
                      (function (Album) {
                      Album[Album["JimmyEatWorldFutures"] = 1] = "JimmyEatWorldFutures";
                      Album[Album["TubRingZooHypothesis"] = 2] = "TubRingZooHypothesis";
                      Album[Album["DogFashionDiscoAdultery"] = 3] = "DogFashionDiscoAdultery";
                      })(Album || (Album = {}));
                      const selectedAlbum = 1 /* Album.JimmyEatWorldFutures */;
                      if (selectedAlbum === 1 /* Album.JimmyEatWorldFutures */) {
                      console.log("That is a great choice.");
                      }
                       
                      Try

                      这实际上使得此类 const enums 成为仅供源代码使用的功能,在运行时没有痕迹。

                      # 保留值导入 - preserveValueImports

                      已弃用,建议使用 verbatimModuleSyntax

                      在某些情况下,TypeScript 无法检测到您正在使用导入。例如,请看以下代码

                      ts
                      import { Animal } from "./animal.js";
                      eval("console.log(new Animal().isDangerous())");

                      或使用“编译为 HTML”语言(如 Svelte 或 Vue)的代码。preserveValueImports 将阻止 TypeScript 删除导入,即使它看起来未使用。

                      isolatedModules 结合使用时:导入的类型 *必须* 被标记为仅类型,因为一次处理单个文件的编译器无法知道导入是看起来未使用的值,还是必须删除以避免运行时崩溃的类型。

                      # 删除注释 - removeComments

                      在将 TypeScript 文件转换为 JavaScript 时,从 TypeScript 文件中删除所有注释。默认值为 false

                      例如,这是一个包含 JSDoc 注释的 TypeScript 文件

                      ts
                      /** The translation of 'Hello world' into Portuguese */
                      export const helloWorldPTBR = "Olá Mundo";

                      removeComments 设置为 true

                      ts
                      export const helloWorldPTBR = "Olá Mundo";
                       
                      Try

                      不设置 removeComments 或将其设置为 false

                      ts
                      /** The translation of 'Hello world' into Portuguese */
                      export const helloWorldPTBR = "Olá Mundo";
                       
                      Try

                      这意味着您的注释将显示在 JavaScript 代码中。

                        # 源映射 - sourceMap

                        启用 源映射文件 的生成。这些文件允许调试器和其他工具在实际使用生成的 JavaScript 文件时显示原始 TypeScript 源代码。源映射文件作为 .js.map(或 .jsx.map)文件发出,位于相应的 .js 输出文件旁边。

                        .js 文件反过来将包含一个源映射注释,以指示外部工具文件的位置,例如

                        ts
                        // helloWorld.ts
                        export declare const helloWorld = "hi";

                        使用 sourceMap 设置为 true 进行编译会创建以下 JavaScript 文件

                        js
                        // helloWorld.js
                        "use strict";
                        Object.defineProperty(exports, "__esModule", { value: true });
                        exports.helloWorld = "hi";
                        //# sourceMappingURL=// helloWorld.js.map

                        这也会生成这个 JSON 地图

                        json
                        // helloWorld.js.map
                        {
                        "version": 3,
                        "file": "ex.js",
                        "sourceRoot": "",
                        "sources": ["../ex.ts"],
                        "names": [],
                        "mappings": ";;AAAa,QAAA,UAAU,GAAG,IAAI,CAAA"
                        }

                          # 源根目录 - sourceRoot

                          指定调试器应该在其中查找 TypeScript 文件的位置,而不是相对源位置。此字符串在源映射中按字面意义处理,您可以在其中使用路径或 URL

                          {
                          "": true,
                          "": "https://my-website.com/debug/source/"
                          }
                          }

                          将声明 index.js 将在 https://my-website.com/debug/source/index.ts 中具有源文件。

                            # 删除内部 - stripInternal

                            不要为其 JSDoc 注释中包含 @internal 注释的代码发出声明。这是一个内部编译器选项;使用风险自负,因为编译器不检查结果是否有效。如果您正在寻找一个工具来处理 d.ts 文件中其他级别的可见性,请查看 api-extractor

                            ts
                            /**
                            * Days available in a week
                            * @internal
                            */
                            export const daysInAWeek = 7;
                             
                            /** Calculate how much someone earns in a week */
                            export function weeklySalary(dayRate: number) {
                            return daysInAWeek * dayRate;
                            }
                            Try

                            将标志设置为 false(默认值)

                            ts
                            /**
                            * Days available in a week
                            * @internal
                            */
                            export declare const daysInAWeek = 7;
                            /** Calculate how much someone earns in a week */
                            export declare function weeklySalary(dayRate: number): number;
                             
                            Try

                            stripInternal 设置为 true 时,发出的 d.ts 将被删除。

                            ts
                            /** Calculate how much someone earns in a week */
                            export declare function weeklySalary(dayRate: number): number;
                             
                            Try

                            JavaScript 输出仍然相同。

                            • 内部

                            #JavaScript 支持

                            # 允许 JS - allowJs

                            允许在您的项目中导入 JavaScript 文件,而不仅仅是 .ts.tsx 文件。例如,此 JS 文件

                            js
                            // @filename: card.js
                            export const defaultCardDeck = "Heart";
                            Try

                            当导入到 TypeScript 文件中时,会引发错误

                            ts
                            // @filename: index.ts
                            import { defaultCardDeck } from "./card";
                             
                            console.log(defaultCardDeck);
                            Try

                            在启用 allowJs 的情况下可以正常导入

                            ts
                            // @filename: index.ts
                            import { defaultCardDeck } from "./card";
                             
                            console.log(defaultCardDeck);
                            Try

                            此标志可以用作将 TypeScript 文件逐步添加到 JS 项目中的方法,方法是允许 .ts.tsx 文件与现有 JavaScript 文件并存。

                            它还可以与 declarationemitDeclarationOnly 一起使用,以 为 JS 文件创建声明

                            # 检查 JS - checkJs

                            allowJs 协同工作。启用 checkJs 后,将在 JavaScript 文件中报告错误。这相当于在项目中包含的所有 JavaScript 文件的顶部包含 // @ts-check

                            例如,根据随 TypeScript 提供的 parseFloat 类型定义,这是不正确的 JavaScript

                            js
                            // parseFloat only takes a string
                            module.exports.pi = parseFloat(3.142);

                            当导入到 TypeScript 模块中时

                            ts
                            // @filename: constants.js
                            module.exports.pi = parseFloat(3.142);
                             
                            // @filename: index.ts
                            import { pi } from "./constants";
                            console.log(pi);
                            Try

                            您不会收到任何错误。但是,如果您打开 checkJs,那么您将从 JavaScript 文件中收到错误消息。

                            ts
                            // @filename: constants.js
                            Argument of type 'number' is not assignable to parameter of type 'string'.2345Argument of type 'number' is not assignable to parameter of type 'string'.
                            module.exports.pi = parseFloat(3.142);
                             
                            // @filename: index.ts
                            import { pi } from "./constants";
                            console.log(pi);
                            Try

                            # 最大 Node 模块 JS 深度 - maxNodeModuleJsDepth

                            node_modules 下搜索和加载 JavaScript 文件的最大依赖深度。

                            此标志仅在启用 allowJs 时才可以使用,如果您希望 TypeScript 推断 node_modules 中所有 JavaScript 的类型,则可以使用此标志。

                            理想情况下,这应该保持在 0(默认值),并且应该使用 d.ts 文件来明确定义模块的形状。但是,在某些情况下,您可能希望以牺牲速度和潜在准确性为代价来打开它。

                              #编辑器支持

                              #禁用大小限制 - disableSizeLimit

                              为了避免在处理非常大的 JavaScript 项目时出现可能的内存膨胀问题,TypeScript 将分配的内存量有一个上限。打开此标志将取消此限制。

                                #插件 - plugins

                                在编辑器中运行的语言服务插件列表。

                                语言服务插件是一种根据现有 TypeScript 文件向用户提供更多信息的方式。它们可以增强 TypeScript 和编辑器之间的现有消息,或提供自己的错误消息。

                                例如

                                VS Code 允许扩展 自动包含语言服务插件,因此您可能在编辑器中运行了一些插件,而无需在 tsconfig.json 中定义它们。

                                  #互操作约束

                                  # 允许合成默认导入 - allowSyntheticDefaultImports

                                  当设置为 true 时,allowSyntheticDefaultImports 允许您编写类似以下的导入语句:

                                  ts
                                  import React from "react";

                                  而不是

                                  ts
                                  import * as React from "react";

                                  当模块**没有**显式指定默认导出时。

                                  例如,如果没有将 allowSyntheticDefaultImports 设置为 true

                                  ts
                                  // @filename: utilFunctions.js
                                  Module '"/home/runner/work/TypeScript-Website/TypeScript-Website/utilFunctions"' has no default export.1192Module '"/home/runner/work/TypeScript-Website/TypeScript-Website/utilFunctions"' has no default export.
                                  const getStringLength = (str) => str.length;
                                   
                                  module.exports = {
                                  getStringLength,
                                  };
                                   
                                  // @filename: index.ts
                                  import utils from "./utilFunctions";
                                   
                                  const count = utils.getStringLength("Check JS");
                                  Try

                                  这段代码会引发错误,因为没有可以导入的 default 对象。尽管看起来应该可以。为了方便起见,像 Babel 这样的转译器会自动创建一个默认对象,如果它没有被创建。使模块看起来更像

                                  js
                                  // @filename: utilFunctions.js
                                  const getStringLength = (str) => str.length;
                                  const allFunctions = {
                                  getStringLength,
                                  };
                                  module.exports = allFunctions;
                                  module.exports.default = allFunctions;

                                  此标志不会影响 TypeScript 生成的 JavaScript 代码,它只用于类型检查。此选项使 TypeScript 的行为与 Babel 保持一致,在 Babel 中,会发出额外的代码,使使用模块的默认导出更加符合人体工程学。

                                  # ES 模块互操作性 - esModuleInterop

                                  默认情况下(esModuleInterop 为 false 或未设置),TypeScript 将 CommonJS/AMD/UMD 模块视为与 ES6 模块类似。这样做,有两个部分被证明是错误的假设

                                  • 类似 import * as moment from "moment" 的命名空间导入与 const moment = require("moment") 相同

                                  • 类似 import moment from "moment" 的默认导入与 const moment = require("moment").default 相同

                                  这种不匹配会导致这两个问题

                                  • ES6 模块规范指出命名空间导入 (import * as x) 只能是对象,通过让 TypeScript 将其视为 = require("x"),TypeScript 允许导入被视为函数并可调用。根据规范,这无效。

                                  • 虽然符合 ES6 模块规范,但大多数使用 CommonJS/AMD/UMD 模块的库并没有像 TypeScript 的实现那样严格地遵循规范。

                                  启用 esModuleInterop 将解决 TypeScript 编译的代码中的这两个问题。第一个更改编译器中的行为,第二个通过两个新的辅助函数修复,这些函数提供了一个垫片以确保在生成的 JavaScript 中的兼容性。

                                  ts
                                  import * as fs from "fs";
                                  import _ from "lodash";
                                  fs.readFileSync("file.txt", "utf8");
                                  _.chunk(["a", "b", "c", "d"], 2);

                                  禁用 esModuleInterop

                                  ts
                                  "use strict";
                                  Object.defineProperty(exports, "__esModule", { value: true });
                                  const fs = require("fs");
                                  const lodash_1 = require("lodash");
                                  fs.readFileSync("file.txt", "utf8");
                                  lodash_1.default.chunk(["a", "b", "c", "d"], 2);
                                   
                                  Try

                                  esModuleInterop 设置为 true

                                  ts
                                  "use strict";
                                  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
                                  if (k2 === undefined) k2 = k;
                                  var desc = Object.getOwnPropertyDescriptor(m, k);
                                  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
                                  desc = { enumerable: true, get: function() { return m[k]; } };
                                  }
                                  Object.defineProperty(o, k2, desc);
                                  }) : (function(o, m, k, k2) {
                                  if (k2 === undefined) k2 = k;
                                  o[k2] = m[k];
                                  }));
                                  var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
                                  Object.defineProperty(o, "default", { enumerable: true, value: v });
                                  }) : function(o, v) {
                                  o["default"] = v;
                                  });
                                  var __importStar = (this && this.__importStar) || function (mod) {
                                  if (mod && mod.__esModule) return mod;
                                  var result = {};
                                  if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
                                  __setModuleDefault(result, mod);
                                  return result;
                                  };
                                  var __importDefault = (this && this.__importDefault) || function (mod) {
                                  return (mod && mod.__esModule) ? mod : { "default": mod };
                                  };
                                  Object.defineProperty(exports, "__esModule", { value: true });
                                  const fs = __importStar(require("fs"));
                                  const lodash_1 = __importDefault(require("lodash"));
                                  fs.readFileSync("file.txt", "utf8");
                                  lodash_1.default.chunk(["a", "b", "c", "d"], 2);
                                   
                                  Try

                                  注意:命名空间导入 import * as fs from "fs" 仅考虑在导入对象上 拥有 的属性(基本上是在对象上设置的属性,而不是通过原型链设置的属性)。如果您要导入的模块使用继承的属性定义其 API,则需要使用默认导入形式 (import fs from "fs"),或禁用 esModuleInterop

                                  注意:您可以通过启用 importHelpers 使 JS 产生更简洁的代码。

                                  ts
                                  "use strict";
                                  Object.defineProperty(exports, "__esModule", { value: true });
                                  const tslib_1 = require("tslib");
                                  const fs = tslib_1.__importStar(require("fs"));
                                  const lodash_1 = tslib_1.__importDefault(require("lodash"));
                                  fs.readFileSync("file.txt", "utf8");
                                  lodash_1.default.chunk(["a", "b", "c", "d"], 2);
                                   
                                  Try

                                  启用 esModuleInterop 也会启用 allowSyntheticDefaultImports

                                  # 强制文件名称大小写一致 - forceConsistentCasingInFileNames

                                  TypeScript 遵循其运行所在文件系统的区分大小写规则。如果一些开发人员在区分大小写的文件系统中工作,而另一些开发人员则没有,这可能会出现问题。如果一个文件尝试通过指定 ./FileManager.ts 来导入 fileManager.ts,则该文件将在不区分大小写的文件系统中找到,但在区分大小写的文件系统中则不会找到。

                                  当此选项设置后,如果程序尝试以与磁盘上大小写不同的方式包含文件,TypeScript 将发出错误。

                                  • 推荐
                                  • 默认值

                                    true

                                  # 独立模块 - isolatedModules

                                  虽然您可以使用 TypeScript 从 TypeScript 代码生成 JavaScript 代码,但使用其他转译器(如 Babel)来执行此操作也很常见。但是,其他转译器一次只对单个文件进行操作,这意味着它们无法应用依赖于理解完整类型系统的代码转换。此限制也适用于 TypeScript 的 ts.transpileModule API,该 API 被一些构建工具使用。

                                  这些限制会导致某些 TypeScript 特性(如 `const enum` 和 `namespace`)在运行时出现问题。设置 `isolatedModules` 标志会告诉 TypeScript 在您编写某些无法被单文件转译过程正确解释的代码时发出警告。

                                  它不会改变您代码的行为,也不会改变 TypeScript 检查和发出过程的行为。

                                  以下是一些在启用 `isolatedModules` 时无法正常工作的代码示例。

                                  非值标识符的导出

                                  在 TypeScript 中,您可以导入一个类型,然后将其导出。

                                  ts
                                  import { someType, someFunction } from "someModule";
                                   
                                  someFunction();
                                   
                                  export { someType, someFunction };
                                  Try

                                  由于 `someType` 没有值,因此发出的 `export` 不会尝试导出它(这在 JavaScript 中将是运行时错误)。

                                  js
                                  export { someFunction };

                                  单文件转译器不知道 `someType` 是否会生成值,因此导出仅引用类型的名称是错误的。

                                  非模块文件

                                  如果设置了 `isolatedModules`,则命名空间仅允许在模块中(这意味着它具有某种形式的 `import`/`export`)。如果在非模块文件中找到命名空间,则会发生错误。

                                  ts
                                  namespace Instantiated {
                                  Namespaces are not allowed in global script files when 'isolatedModules' is enabled. If this file is not intended to be a global script, set 'moduleDetection' to 'force' or add an empty 'export {}' statement.1280Namespaces are not allowed in global script files when 'isolatedModules' is enabled. If this file is not intended to be a global script, set 'moduleDetection' to 'force' or add an empty 'export {}' statement.
                                  export const x = 1;
                                  }
                                  Try

                                  此限制不适用于 `.d.ts` 文件。

                                  const enum 成员的引用

                                  在 TypeScript 中,当您引用 const enum 成员时,引用将被其在已生成的 JavaScript 中的实际值替换。将此 TypeScript 代码

                                  ts
                                  declare const enum Numbers {
                                  Zero = 0,
                                  One = 1,
                                  }
                                  console.log(Numbers.Zero + Numbers.One);
                                  Try

                                  转换为此 JavaScript 代码

                                  ts
                                  "use strict";
                                  console.log(0 + 1);
                                   
                                  Try

                                  在不知道这些成员的值的情况下,其他转译器无法替换对 Numbers 的引用,如果任其存在,这将导致运行时错误(因为运行时没有 Numbers 对象)。因此,当设置 isolatedModules 时,引用环境 const enum 成员将是一个错误。

                                    这反映了 Node.js 中的相同标志;它不会解析符号链接的真实路径。

                                    此标志还表现出与 Webpack 的 resolve.symlinks 选项相反的行为(即,将 TypeScript 的 preserveSymlinks 设置为 true 等同于将 Webpack 的 resolve.symlinks 设置为 false,反之亦然)。

                                    启用此选项后,对模块和包的引用(例如 import/// <reference type="..." /> 指令)都相对于符号链接文件的位置解析,而不是相对于符号链接解析到的路径解析。

                                      # 原文模块语法 - verbatimModuleSyntax

                                      默认情况下,TypeScript 会执行一项名为“导入省略”的操作。基本上,如果您编写类似以下内容

                                      ts
                                      import { Car } from "./car";
                                      export function drive(car: Car) {
                                      // ...
                                      }

                                      TypeScript 会检测到您只使用导入来获取类型,并完全删除导入。您的输出 JavaScript 可能如下所示

                                      js
                                      export function drive(car) {
                                      // ...
                                      }

                                      大多数情况下这是好的,因为如果 Car 不是从 ./car 导出的值,我们将得到一个运行时错误。

                                      但它确实为某些边缘情况增加了复杂性。例如,请注意没有类似 import "./car"; 的语句 - 导入被完全删除了。这实际上会对具有副作用或没有副作用的模块产生影响。

                                      TypeScript 的 JavaScript 导出策略还有其他几个复杂层 - 导入省略并不总是仅仅由导入的使用方式驱动 - 它通常也会参考值的声明方式。因此,以下代码是否应该保留或删除并不总是很清楚

                                      ts
                                      export { Car } from "./car";

                                      应该保留还是删除。如果 Car 是用类似 class 的东西声明的,那么它可以在生成的 JavaScript 文件中保留。但是,如果 Car 仅仅被声明为 type 别名或 interface,那么 JavaScript 文件不应该导出 Car

                                      虽然 TypeScript 可能能够根据跨文件的信息做出这些导出决策,但并非所有编译器都能做到。

                                      导入和导出上的 type 修饰符在这些情况下有所帮助。我们可以明确地说明导入或导出是否仅用于类型分析,并且可以使用 type 修饰符在 JavaScript 文件中完全删除。

                                      ts
                                      // This statement can be dropped entirely in JS output
                                      import type * as car from "./car";
                                      // The named import/export 'Car' can be dropped in JS output
                                      import { type Car } from "./car";
                                      export { type Car } from "./car";

                                      type 修饰符本身并不完全有用 - 默认情况下,模块省略仍然会删除导入,并且没有任何东西强制你区分 type 和普通导入和导出。因此,TypeScript 有 --importsNotUsedAsValues 标志来确保你使用 type 修饰符,--preserveValueImports 来防止某些模块省略行为,以及 --isolatedModules 来确保你的 TypeScript 代码在不同的编译器之间工作。不幸的是,理解这 3 个标志的细节很困难,并且仍然存在一些意外行为的边缘情况。

                                      TypeScript 5.0 引入了一个名为 --verbatimModuleSyntax 的新选项来简化这种情况。规则简单得多 - 任何没有 type 修饰符的导入或导出都会保留。任何使用 type 修饰符的东西都会被完全删除。

                                      ts
                                      // Erased away entirely.
                                      import type { A } from "a";
                                      // Rewritten to 'import { b } from "bcd";'
                                      import { b, type c, type d } from "bcd";
                                      // Rewritten to 'import {} from "xyz";'
                                      import { type xyz } from "xyz";

                                      有了这个新选项,你看到的就是你得到的。

                                      不过,这在模块互操作方面确实有一些影响。在启用此标志的情况下,当您的设置或文件扩展名暗示不同的模块系统时,ECMAScript 的 `import` 和 `export` 不会被重写为 `require` 调用。相反,您将收到错误。如果您需要发出使用 `require` 和 `module.exports` 的代码,您将不得不使用 TypeScript 在 ES2015 之前使用的模块语法。

                                      输入 TypeScript 输出 JavaScript
                                      ts
                                      import foo = require("foo");
                                      js
                                      const foo = require("foo");
                                      ts
                                      function foo() {}
                                      function bar() {}
                                      function baz() {}
                                      export = {
                                      foo,
                                      bar,
                                      baz,
                                      };
                                      js
                                      function foo() {}
                                      function bar() {}
                                      function baz() {}
                                      module.exports = {
                                      foo,
                                      bar,
                                      baz,
                                      };

                                      虽然这是一个限制,但它确实有助于使一些问题更加明显。例如,在 `--module node16` 下忘记设置 `package.json` 中的 ``type` 字段` 非常常见。结果,开发人员会开始编写 CommonJS 模块而不是 ES 模块,而没有意识到这一点,从而导致令人惊讶的查找规则和 JavaScript 输出。这个新的标志确保您对正在使用的文件类型有意识,因为语法是有意不同的。

                                      由于 `--verbatimModuleSyntax` 提供了比 `--importsNotUsedAsValues` 和 `--preserveValueImports` 更一致的故事,因此这两个现有标志将被弃用,以支持它。

                                      有关更多详细信息,请阅读 `原始拉取请求` 和 `其提案问题`。

                                        #向后兼容性

                                        # 字符集 - `charset`

                                        在之前的 TypeScript 版本中,这控制着从磁盘读取文本文件时使用的编码。如今,TypeScript 假设 UTF-8 编码,但会正确检测 UTF-16(BE 和 LE)或 UTF-8 BOM。

                                        • 已弃用
                                        • 默认值

                                          utf8

                                        # 仅 Keyof 字符串 - `keyofStringsOnly`

                                        此标志将 `keyof` 类型运算符更改为返回 `string` 而不是 `string | number`,当应用于具有字符串索引签名的类型时。

                                        此标志用于帮助人们保持这种行为,从 `TypeScript 2.9 版本之前`。

                                        • 已弃用
                                        • 已发布

                                          2.9

                                        # 不隐式使用严格 - `noImplicitUseStrict`

                                        您不需要这个。默认情况下,当将模块文件发出到非 ES6 目标时,TypeScript 会在文件顶部发出一个 `"use strict";` 前言。此设置会禁用前言。

                                          # 不严格泛型检查 - `noStrictGenericChecks`

                                          TypeScript 将在比较两个泛型函数时统一类型参数。

                                          ts
                                          type A = <T, U>(x: T, y: U) => [T, U];
                                          type B = <S>(x: S, y: S) => [S, S];
                                           
                                          function f(a: A, b: B) {
                                          b = a; // Ok
                                          a = b; // Error
                                          Type 'B' is not assignable to type 'A'. Types of parameters 'y' and 'y' are incompatible. Type 'U' is not assignable to type 'T'. 'T' could be instantiated with an arbitrary type which could be unrelated to 'U'.2322Type 'B' is not assignable to type 'A'. Types of parameters 'y' and 'y' are incompatible. Type 'U' is not assignable to type 'T'. 'T' could be instantiated with an arbitrary type which could be unrelated to 'U'.
                                          }
                                          Try

                                          此标志可用于删除该检查。

                                          # Out - out

                                          请使用 outFile 代替。

                                          out 选项以不可预测或不一致的方式计算最终文件位置。此选项仅保留用于向后兼容,并且已弃用。

                                          # 抑制多余属性错误 - suppressExcessPropertyErrors

                                          这将禁用报告多余属性错误,例如以下示例中显示的错误

                                          ts
                                          type Point = { x: number; y: number };
                                          const p: Point = { x: 1, y: 3, m: 10 };
                                          Type '{ x: number; y: number; m: number; }' is not assignable to type 'Point'. Object literal may only specify known properties, and 'm' does not exist in type 'Point'.2322Type '{ x: number; y: number; m: number; }' is not assignable to type 'Point'. Object literal may only specify known properties, and 'm' does not exist in type 'Point'.
                                          Try

                                          此标志是为了帮助人们迁移到 TypeScript 1.6 中对新对象字面量的更严格检查而添加的。

                                          我们不建议在现代代码库中使用此标志,您可以使用 // @ts-ignore 抑制需要它的单次情况。

                                            # 抑制隐式 any 索引错误 - suppressImplicitAnyIndexErrors

                                            启用 suppressImplicitAnyIndexErrors 将抑制报告在对对象进行索引时有关隐式 any 的错误,如以下示例所示

                                            ts
                                            const obj = { x: 10 };
                                            console.log(obj["foo"]);
                                            Element implicitly has an 'any' type because expression of type '"foo"' can't be used to index type '{ x: number; }'. Property 'foo' does not exist on type '{ x: number; }'.7053Element implicitly has an 'any' type because expression of type '"foo"' can't be used to index type '{ x: number; }'. Property 'foo' does not exist on type '{ x: number; }'.
                                            Try

                                            使用 suppressImplicitAnyIndexErrors 是一种相当激进的方法。建议改为使用 @ts-ignore 注释

                                            ts
                                            const obj = { x: 10 };
                                            // @ts-ignore
                                            console.log(obj["foo"]);
                                            Try

                                            #语言和环境

                                            # 导出装饰器元数据 - emitDecoratorMetadata

                                            启用对为装饰器发出类型元数据的实验性支持,该元数据与模块 reflect-metadata 一起使用。

                                            例如,以下是 TypeScript 代码

                                            ts
                                            function LogMethod(
                                            target: any,
                                            propertyKey: string | symbol,
                                            descriptor: PropertyDescriptor
                                            ) {
                                            console.log(target);
                                            console.log(propertyKey);
                                            console.log(descriptor);
                                            }
                                             
                                            class Demo {
                                            @LogMethod
                                            public foo(bar: number) {
                                            // do nothing
                                            }
                                            }
                                             
                                            const demo = new Demo();
                                            Try

                                            如果 emitDecoratorMetadata 未设置为 true(默认值),则发出的 JavaScript 代码为

                                            ts
                                            "use strict";
                                            var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
                                            var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
                                            if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
                                            else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
                                            return c > 3 && r && Object.defineProperty(target, key, r), r;
                                            };
                                            function LogMethod(target, propertyKey, descriptor) {
                                            console.log(target);
                                            console.log(propertyKey);
                                            console.log(descriptor);
                                            }
                                            class Demo {
                                            foo(bar) {
                                            // do nothing
                                            }
                                            }
                                            __decorate([
                                            LogMethod
                                            ], Demo.prototype, "foo", null);
                                            const demo = new Demo();
                                             
                                            Try

                                            如果 emitDecoratorMetadata 设置为 true,则发出的 JavaScript 代码为

                                            ts
                                            "use strict";
                                            var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
                                            var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
                                            if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
                                            else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
                                            return c > 3 && r && Object.defineProperty(target, key, r), r;
                                            };
                                            var __metadata = (this && this.__metadata) || function (k, v) {
                                            if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
                                            };
                                            function LogMethod(target, propertyKey, descriptor) {
                                            console.log(target);
                                            console.log(propertyKey);
                                            console.log(descriptor);
                                            }
                                            class Demo {
                                            foo(bar) {
                                            // do nothing
                                            }
                                            }
                                            __decorate([
                                            LogMethod,
                                            __metadata("design:type", Function),
                                            __metadata("design:paramtypes", [Number]),
                                            __metadata("design:returntype", void 0)
                                            ], Demo.prototype, "foo", null);
                                            const demo = new Demo();
                                             
                                            Try

                                            # 实验性装饰器 - experimentalDecorators

                                            启用实验性装饰器支持,这是一种早于 TC39 标准化过程的装饰器版本。

                                            装饰器是一种语言特性,尚未完全纳入 JavaScript 规范。这意味着 TypeScript 中的实现版本可能与 TC39 决定后的 JavaScript 中的实现版本不同。

                                            您可以在手册中了解更多关于 TypeScript 中装饰器支持的信息。

                                            # JSX - jsx

                                            控制 JSX 结构在 JavaScript 文件中的输出方式。这仅影响从 .tsx 文件开始的 JS 文件的输出。

                                            • react:使用 JSX 转换为等效的 React.createElement 调用,输出 .js 文件
                                            • react-jsx:使用 JSX 转换为 _jsx 调用,输出 .js 文件
                                            • react-jsxdev:使用 JSX 转换为 _jsx 调用,输出 .js 文件
                                            • preserve:输出 .jsx 文件,JSX 不变
                                            • react-native:输出 .js 文件,JSX 不变

                                            例如

                                            这个示例代码

                                            tsx
                                            export const HelloWorld = () => <h1>Hello world</h1>;

                                            默认:"react"

                                            tsx
                                            import React from 'react';
                                            export const HelloWorld = () => React.createElement("h1", null, "Hello world");
                                             
                                            Try

                                            保留:"preserve"

                                            tsx
                                            import React from 'react';
                                            export const HelloWorld = () => <h1>Hello world</h1>;
                                             
                                            Try

                                            React Native:"react-native"

                                            tsx
                                            import React from 'react';
                                            export const HelloWorld = () => <h1>Hello world</h1>;
                                             
                                            Try

                                            React 17 转换:"react-jsx"[1]

                                            tsx
                                            import { jsx as _jsx } from "react/jsx-runtime";
                                            import React from 'react';
                                            export const HelloWorld = () => _jsx("h1", { children: "Hello world" });
                                             
                                            Try

                                            React 17 开发转换:"react-jsxdev"[1]

                                            tsx
                                            import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
                                            const _jsxFileName = "/home/runner/work/TypeScript-Website/TypeScript-Website/index.tsx";
                                            import React from 'react';
                                            export const HelloWorld = () => _jsxDEV("h1", { children: "Hello world" }, void 0, false, { fileName: _jsxFileName, lineNumber: 9, columnNumber: 32 }, this);
                                             
                                            Try

                                            # JSX 工厂 - jsxFactory

                                            在使用经典 JSX 运行时编译 JSX 元素时,更改 .js 文件中调用的函数。最常见的更改是使用 "h""preact.h" 而不是默认的 "React.createElement"(如果使用 preact)。

                                            例如,这个 TSX 文件

                                            tsx
                                            import { h } from "preact";
                                            const HelloWorld = () => <div>Hello</div>;

                                            使用 jsxFactory: "h" 后的样子

                                            tsx
                                            const preact_1 = require("preact");
                                            const HelloWorld = () => (0, preact_1.h)("div", null, "Hello");
                                             
                                            Try

                                            此选项也可以在每个文件的基础上使用,类似于Babel 的 /** @jsx h */ 指令

                                            tsx
                                            /** @jsx h */
                                            import { h } from "preact";
                                             
                                            const HelloWorld = () => <div>Hello</div>;
                                            Try

                                            选择的工厂也会影响在回退到全局命名空间之前查找JSX命名空间的位置(用于类型检查信息)。

                                            如果工厂定义为React.createElement(默认值),编译器将在检查全局JSX之前检查React.JSX。如果工厂定义为h,它将在检查全局JSX之前检查h.JSX

                                            # JSX 片段工厂 - jsxFragmentFactory

                                            指定在将目标设置为 react JSX 发射时要使用的 JSX 片段工厂函数,并指定jsxFactory编译器选项,例如Fragment

                                            例如,使用此 TSConfig

                                            {
                                            "": "esnext",
                                            "": "commonjs",
                                            "": "react",
                                            "": "h",
                                            "": "Fragment"
                                            }
                                            }

                                            此 TSX 文件

                                            tsx
                                            import { h, Fragment } from "preact";
                                            const HelloWorld = () => (
                                            <>
                                            <div>Hello</div>
                                            </>
                                            );

                                            将看起来像

                                            tsx
                                            const preact_1 = require("preact");
                                            const HelloWorld = () => ((0, preact_1.h)(preact_1.Fragment, null,
                                            (0, preact_1.h)("div", null, "Hello")));
                                             
                                            Try

                                            此选项也可以在每个文件的基础上使用,类似于Babel 的/* @jsxFrag h */ 指令

                                            例如

                                            tsx
                                            /** @jsx h */
                                            /** @jsxFrag Fragment */
                                             
                                            import { h, Fragment } from "preact";
                                             
                                            const HelloWorld = () => (
                                            <>
                                            <div>Hello</div>
                                            </>
                                            );
                                            Try

                                            # JSX 导入源 - jsxImportSource

                                            声明用于导入jsxjsxs工厂函数的模块说明符,当使用jsx作为"react-jsx""react-jsxdev"时,它们是在 TypeScript 4.1 中引入的。

                                            使用React 17,库支持通过单独的导入进行新的 JSX 转换形式。

                                            例如,使用此代码

                                            tsx
                                            import React from "react";
                                            function App() {
                                            return <h1>Hello World</h1>;
                                            }

                                            使用此 TSConfig

                                            {
                                            "": "esnext",
                                            "": "commonjs",
                                            "": "react-jsx"
                                            }
                                            }

                                            从 TypeScript 发射的 JavaScript 是

                                            tsx
                                            "use strict";
                                            var __importDefault = (this && this.__importDefault) || function (mod) {
                                            return (mod && mod.__esModule) ? mod : { "default": mod };
                                            };
                                            Object.defineProperty(exports, "__esModule", { value: true });
                                            const jsx_runtime_1 = require("react/jsx-runtime");
                                            const react_1 = __importDefault(require("react"));
                                            function App() {
                                            return (0, jsx_runtime_1.jsx)("h1", { children: "Hello World" });
                                            }
                                             
                                            Try

                                            例如,如果你想使用"jsxImportSource": "preact",你需要一个像这样的 tsconfig

                                            {
                                            "": "esnext",
                                            "": "commonjs",
                                            "": "react-jsx",
                                            "": "preact",
                                            "": ["preact"]
                                            }
                                            }

                                            它生成类似于以下代码的代码

                                            tsx
                                            function App() {
                                            return (0, jsx_runtime_1.jsx)("h1", { children: "Hello World" });
                                            }
                                            exports.App = App;
                                             
                                            Try

                                            或者,你可以使用每个文件的 pragma 来设置此选项,例如

                                            tsx
                                            /** @jsxImportSource preact */
                                            export function App() {
                                            return <h1>Hello World</h1>;
                                            }

                                            preact/jsx-runtime添加为_jsx工厂的导入。

                                            注意:为了使它按预期工作,你的tsx文件必须包含exportimport,以便它被视为模块。

                                            # Lib - lib

                                            TypeScript 包含一组默认的内置 JS API(如 Math)类型定义,以及浏览器环境中(如 document)的类型定义。TypeScript 还包含与您指定的 target 匹配的较新 JS 功能的 API;例如,如果 targetES6 或更高版本,则 Map 的定义可用。

                                            您可能出于以下几个原因想要更改这些定义:

                                            • 您的程序不在浏览器中运行,因此您不需要 "dom" 类型定义。
                                            • 您的运行时平台提供某些 JavaScript API 对象(可能是通过 polyfills),但尚未支持给定 ECMAScript 版本的完整语法。
                                            • 您对某些(但不是全部)更高版本的 ECMAScript 具有 polyfills 或原生实现。

                                            在 TypeScript 4.5 中,lib 文件可以被 npm 模块覆盖,了解更多信息请访问 博客

                                            高级库

                                            名称 内容
                                            ES5 所有 ES3 和 ES5 功能的核心定义
                                            ES2015 ES2015(也称为 ES6)中可用的其他 API - array.findPromiseProxySymbolMapSetReflect 等。
                                            ES6 “ES2015” 的别名
                                            ES2016 ES2016 中可用的其他 API - array.include 等。
                                            ES7 “ES2016” 的别名
                                            ES2017 ES2017 中可用的其他 API - Object.entriesObject.valuesAtomicsSharedArrayBufferdate.formatToParts、类型化数组等。
                                            ES2018 ES2018 中可用的其他 API - async 可迭代对象、promise.finallyIntl.PluralRulesregexp.groups 等。
                                            ES2019 ES2019 中可用的其他 API - array.flatarray.flatMapObject.fromEntriesstring.trimStartstring.trimEnd 等。
                                            ES2020 ES2020 中可用的其他 API - string.matchAll 等。
                                            ES2021 ES2021 中可用的其他 API - promise.anystring.replaceAll 等。
                                            ES2022 ES2022 中可用的其他 API - array.atRegExp.hasIndices 等。
                                            ESNext ESNext 中提供的额外 API - 随着 JavaScript 规范的演变,这些 API 会发生变化
                                            DOM DOM 定义 - windowdocument 等。
                                            WebWorker WebWorker 上下文中可用的 API
                                            ScriptHost Windows 脚本宿主系统 的 API

                                            单个库组件

                                            名称
                                            DOM.Iterable
                                            ES2015.Core
                                            ES2015.Collection
                                            ES2015.Generator
                                            ES2015.Iterable
                                            ES2015.Promise
                                            ES2015.Proxy
                                            ES2015.Reflect
                                            ES2015.Symbol
                                            ES2015.Symbol.WellKnown
                                            ES2016.Array.Include
                                            ES2017.object
                                            ES2017.Intl
                                            ES2017.SharedMemory
                                            ES2017.String
                                            ES2017.TypedArrays
                                            ES2018.Intl
                                            ES2018.Promise
                                            ES2018.RegExp
                                            ES2019.Array
                                            ES2019.Object
                                            ES2019.String
                                            ES2019.Symbol
                                            ES2020.String
                                            ES2020.Symbol.wellknown
                                            ES2021.Promise
                                            ES2021.String
                                            ES2021.WeakRef
                                            ESNext.AsyncIterable
                                            ESNext.Array
                                            ESNext.Intl
                                            ESNext.Symbol

                                            此列表可能已过时,您可以在 TypeScript 源代码 中查看完整列表。

                                            # 模块检测 - moduleDetection

                                            此设置控制 TypeScript 如何确定文件是 脚本还是模块

                                            有三种选择

                                            • "auto"(默认) - TypeScript 不仅会查找导入和导出语句,还会检查运行时 modulenodenextnode16package.json 中的 "type" 字段是否设置为 "module",以及在运行时 jsxreact-jsx 时当前文件是否为 JSX 文件。

                                            • "legacy" - 与 4.6 及更早版本的行为相同,使用导入和导出语句来确定文件是否为模块。

                                            • "force" - 确保每个非声明文件都被视为模块。

                                            • 默认值

                                              "auto": 将带有导入、导出、import.meta、jsx(使用 jsx: react-jsx)或 esm 格式(使用 module: node16+)的文件视为模块。

                                            • 允许
                                              • legacy

                                              • auto

                                              • force

                                            • 已发布

                                              4.7

                                            # 无库 - noLib

                                            禁用自动包含任何库文件。如果设置了此选项,则会忽略 lib

                                            TypeScript 无法在没有针对关键原语(如:ArrayBooleanFunctionIArgumentsNumberObjectRegExpString)的接口集的情况下编译任何内容。如果使用 noLib,则应包含这些接口的自定义类型定义。

                                            # React 命名空间 - reactNamespace

                                            请使用 jsxFactory 代替。指定在针对 TSX 文件的 react 时为 createElement 调用的对象。

                                            • 默认值

                                              React

                                            # 目标 - target

                                            现代浏览器支持所有 ES6 功能,因此 ES6 是一个不错的选择。如果您的代码部署到较旧的环境,您可能选择设置较低的目标,或者如果您的代码保证在较新的环境中运行,则选择设置较高的目标。

                                            target 设置会更改哪些 JS 功能被降级以及哪些功能保持不变。例如,如果 target 为 ES5 或更低,则箭头函数 () => this 将转换为等效的 function 表达式。

                                            更改 target 也会更改 lib 的默认值。您可以根据需要“混合匹配”targetlib 设置,但为了方便起见,您只需设置 target 即可。

                                            对于像 Node 这样的开发人员平台,target 有基线,具体取决于平台类型及其版本。您可以在 tsconfig/bases 中找到一组社区组织的 TSConfigs,其中包含针对常见平台及其版本的配置。

                                            特殊的 ESNext 值是指您使用的 TypeScript 版本支持的最高版本。此设置应谨慎使用,因为它在不同的 TypeScript 版本之间含义不同,并且可能会使升级变得不可预测。

                                            • 默认值

                                              ES3

                                            • 允许
                                              • es3

                                              • es5

                                              • es6/es2015

                                              • es2016

                                              • es2017

                                              • es2018

                                              • es2019

                                              • es2020

                                              • es2021

                                              • es2022

                                              • esnext

                                            • 已发布

                                              1.0

                                            # 使用 Define 为类字段 - useDefineForClassFields

                                            此标志用于迁移到即将推出的类字段标准版本。TypeScript 在 TC39 标准化之前就引入了类字段。即将推出的规范的最新版本具有与 TypeScript 实现不同的运行时行为,但语法相同。

                                            此标志切换到即将推出的 ECMA 运行时行为。

                                            您可以在 3.7 版本说明 中了解更多关于过渡的信息。

                                            • 默认值

                                              如果 targetES2022 或更高版本(包括 ESNext),则为 true;否则为 false

                                            • 已发布

                                              3.7

                                            #编译器诊断

                                            # 诊断 - diagnostics

                                            用于输出诊断信息以进行调试。此命令是 extendedDiagnostics 的子集,后者是面向用户的更易于理解的结果。

                                            如果您被 TypeScript 编译器工程师要求使用此标志在编译中提供结果,那么使用 extendedDiagnostics 不会造成任何损害。

                                            # 解释文件 - explainFiles

                                            打印 TypeScript 视为项目一部分的文件名称以及它们成为编译一部分的原因。

                                            例如,对于仅包含一个 index.ts 文件的项目

                                            sh
                                            example
                                            ├── index.ts
                                            ├── package.json
                                            └── tsconfig.json

                                            使用将 explainFiles 设置为 true 的 tsconfig.json

                                            json
                                            {
                                            "compilerOptions": {
                                            "target": "es5",
                                            "module": "commonjs",
                                            "explainFiles": true
                                            }
                                            }

                                            针对此文件夹运行 TypeScript 将产生以下输出

                                            ❯ tsc node_modules/typescript/lib/lib.d.ts Default library for target 'es5' node_modules/typescript/lib/lib.es5.d.ts Library referenced via 'es5' from file 'node_modules/typescript/lib/lib.d.ts' node_modules/typescript/lib/lib.dom.d.ts Library referenced via 'dom' from file 'node_modules/typescript/lib/lib.d.ts' node_modules/typescript/lib/lib.webworker.importscripts.d.ts Library referenced via 'webworker.importscripts' from file 'node_modules/typescript/lib/lib.d.ts' node_modules/typescript/lib/lib.scripthost.d.ts Library referenced via 'scripthost' from file 'node_modules/typescript/lib/lib.d.ts' index.ts Matched by include pattern '**/*' in 'tsconfig.json'

                                            上面的输出显示

                                            • 基于 target 的初始 lib.d.ts 查找,以及引用的 .d.ts 文件链
                                            • 通过 include 的默认模式找到的 index.ts 文件

                                            此选项旨在用于调试文件如何成为编译的一部分。

                                            # 扩展诊断 - extendedDiagnostics

                                            您可以使用此标志来发现 TypeScript 在编译时花费时间的地方。这是一个用于了解代码库整体性能特征的工具。

                                            您可以在 wiki 的性能 部分 中了解更多关于如何衡量和理解输出的信息。

                                            # 生成 CPU 配置文件 - generateCpuProfile

                                            此选项使您有机会在编译器运行期间让 TypeScript 发出一个 v8 CPU 配置文件。CPU 配置文件可以提供有关构建速度慢的原因的见解。

                                            此选项只能通过以下方式从 CLI 使用:--generateCpuProfile tsc-output.cpuprofile

                                            sh
                                            npm run tsc --generateCpuProfile tsc-output.cpuprofile

                                            此文件可以在基于 Chromium 的浏览器(如 Chrome 或 Edge 开发人员)的 CPU 分析器 部分中打开。您可以在 TypeScript wiki 中有关性能的部分 中了解有关理解编译器性能的更多信息。

                                            • 默认值

                                              profile.cpuprofile

                                            • 已发布

                                              3.7

                                            # 列出已发出的文件 - listEmittedFiles

                                            将编译生成的已生成文件的名称打印到终端。

                                            此标志在两种情况下很有用

                                            • 您希望将 TypeScript 作为终端中构建链的一部分进行转译,其中文件名将在下一个命令中进行处理。
                                            • 您不确定 TypeScript 是否已将您期望的文件(作为调试 文件包含设置 的一部分)包含在内。

                                            例如

                                            example ├── index.ts ├── package.json └── tsconfig.json

                                            使用

                                            {
                                            "": true,
                                            "": true
                                            }
                                            }

                                            将回显类似于以下内容的路径

                                            $ npm run tsc path/to/example/index.js path/to/example/index.d.ts

                                            通常,TypeScript 会在成功时静默返回。

                                              # 列出文件 - listFiles

                                              打印编译中文件的名称。当您不确定 TypeScript 是否已包含您期望的文件时,这很有用。

                                              例如

                                              example ├── index.ts ├── package.json └── tsconfig.json

                                              使用

                                              {
                                              "": true
                                              }
                                              }

                                              将回显类似于以下内容的路径

                                              $ npm run tsc path/to/example/node_modules/typescript/lib/lib.d.ts path/to/example/node_modules/typescript/lib/lib.es5.d.ts path/to/example/node_modules/typescript/lib/lib.dom.d.ts path/to/example/node_modules/typescript/lib/lib.webworker.importscripts.d.ts path/to/example/node_modules/typescript/lib/lib.scripthost.d.ts path/to/example/index.ts

                                              注意,如果使用 TypeScript 4.2,请优先使用 explainFiles,它还提供了有关添加文件原因的说明。

                                              # 跟踪解析 - traceResolution

                                              当您尝试调试为什么模块未被包含时。您可以将 traceResolution 设置为 true,让 TypeScript 打印有关其对每个已处理文件的解析过程的信息。

                                              #项目

                                              # 复合 - composite

                                              composite 选项强制执行某些约束,这些约束使构建工具(包括 TypeScript 本身,在 --build 模式下)能够快速确定项目是否已构建。

                                              当此设置开启时

                                              • 如果未显式设置,rootDir 设置默认设置为包含 tsconfig.json 文件的目录。

                                              • 所有实现文件必须与 include 模式匹配或列在 files 数组中。如果违反此约束,tsc 将告知您哪些文件未指定。

                                              • declaration 默认设置为 true

                                              您可以在 手册 中找到有关 TypeScript 项目的文档。

                                              # 禁用引用项目加载 - disableReferencedProjectLoad

                                              在多项目 TypeScript 程序中,TypeScript 会将所有可用项目加载到内存中,以便为需要完整知识图(如“查找所有引用”)的编辑器响应提供准确的结果。

                                              如果您的项目很大,您可以使用标志 disableReferencedProjectLoad 禁用自动加载所有项目。相反,项目会在您通过编辑器打开文件时动态加载。

                                              # 禁用解决方案搜索 - disableSolutionSearching

                                              在使用 复合 TypeScript 项目 时,此选项提供了一种方法来声明您不希望在使用诸如查找所有引用跳转到定义等功能时将项目包含在内。

                                              此标志可用于提高大型复合项目的响应速度。

                                              # 禁用源项目引用重定向 - disableSourceOfProjectReferenceRedirect

                                              在使用 复合 TypeScript 项目 时,此选项提供了一种方法来 返回到 3.7 之前的 行为,其中 d.ts 文件用作模块之间的边界。在 3.7 中,真相来源现在是您的 TypeScript 文件。

                                              # 增量 - incremental

                                              告诉 TypeScript 将上次编译的项目图信息保存到磁盘上的文件中。这会在您的编译输出的同一文件夹中创建一系列 .tsbuildinfo 文件。它们在运行时不会被您的 JavaScript 使用,可以安全删除。您可以在 3.4 版本说明 中了解更多关于此标志的信息。

                                              要控制要将文件构建到的文件夹,请使用配置选项 tsBuildInfoFile

                                              # TS 构建信息文件 - tsBuildInfoFile

                                              此设置允许您指定一个文件来存储增量编译信息,作为复合项目的一部分,这可以更快地构建更大的 TypeScript 代码库。您可以在 手册 中了解更多关于复合项目的信息。

                                              默认值取决于其他设置的组合

                                              • 如果设置了 outFile,则默认值为 <outFile>.tsbuildinfo
                                              • 如果设置了 rootDiroutDir,则文件为 <outDir>/<相对于 rootDir 的配置路径>/<配置名称>.tsbuildinfo 例如,如果 rootDirsrcoutDirdest,并且配置为 ./tsconfig.json,则默认值为 ./tsconfig.tsbuildinfo,因为从 src/./tsconfig.json 的相对路径为 ../
                                              • 如果设置了 outDir,则默认值为 <outDir>/<配置名称>.tsbuildInfo
                                              • 否则,默认值为 <配置名称>.tsbuildInfo

                                              #输出格式

                                              # 不截断错误 - noErrorTruncation

                                              不要截断错误消息。

                                              使用 false,默认值。

                                              ts
                                              var x: {
                                              propertyWithAnExceedinglyLongName1: string;
                                              propertyWithAnExceedinglyLongName2: string;
                                              propertyWithAnExceedinglyLongName3: string;
                                              propertyWithAnExceedinglyLongName4: string;
                                              propertyWithAnExceedinglyLongName5: string;
                                              propertyWithAnExceedinglyLongName6: string;
                                              propertyWithAnExceedinglyLongName7: string;
                                              propertyWithAnExceedinglyLongName8: string;
                                              };
                                               
                                              // String representation of type of 'x' should be truncated in error message
                                              var s: string = x;
                                              Type '{ propertyWithAnExceedinglyLongName1: string; propertyWithAnExceedinglyLongName2: string; propertyWithAnExceedinglyLongName3: string; propertyWithAnExceedinglyLongName4: string; propertyWithAnExceedinglyLongName5: string; propertyWithAnExceedinglyLongName6: string; propertyWithAnExceedinglyLongName7: string; propert...' is not assignable to type 'string'.
                                              Variable 'x' is used before being assigned.
                                              2322
                                              2454
                                              Type '{ propertyWithAnExceedinglyLongName1: string; propertyWithAnExceedinglyLongName2: string; propertyWithAnExceedinglyLongName3: string; propertyWithAnExceedinglyLongName4: string; propertyWithAnExceedinglyLongName5: string; propertyWithAnExceedinglyLongName6: string; propertyWithAnExceedinglyLongName7: string; propert...' is not assignable to type 'string'.
                                              Variable 'x' is used before being assigned.
                                              Try

                                              使用 true

                                              ts
                                              var x: {
                                              propertyWithAnExceedinglyLongName1: string;
                                              propertyWithAnExceedinglyLongName2: string;
                                              propertyWithAnExceedinglyLongName3: string;
                                              propertyWithAnExceedinglyLongName4: string;
                                              propertyWithAnExceedinglyLongName5: string;
                                              propertyWithAnExceedinglyLongName6: string;
                                              propertyWithAnExceedinglyLongName7: string;
                                              propertyWithAnExceedinglyLongName8: string;
                                              };
                                               
                                              // String representation of type of 'x' should be truncated in error message
                                              var s: string = x;
                                              Type '{ propertyWithAnExceedinglyLongName1: string; propertyWithAnExceedinglyLongName2: string; propertyWithAnExceedinglyLongName3: string; propertyWithAnExceedinglyLongName4: string; propertyWithAnExceedinglyLongName5: string; propertyWithAnExceedinglyLongName6: string; propertyWithAnExceedinglyLongName7: string; propertyWithAnExceedinglyLongName8: string; }' is not assignable to type 'string'.
                                              Variable 'x' is used before being assigned.
                                              2322
                                              2454
                                              Type '{ propertyWithAnExceedinglyLongName1: string; propertyWithAnExceedinglyLongName2: string; propertyWithAnExceedinglyLongName3: string; propertyWithAnExceedinglyLongName4: string; propertyWithAnExceedinglyLongName5: string; propertyWithAnExceedinglyLongName6: string; propertyWithAnExceedinglyLongName7: string; propertyWithAnExceedinglyLongName8: string; }' is not assignable to type 'string'.
                                              Variable 'x' is used before being assigned.
                                              Try

                                                # 保留监视输出 - preserveWatchOutput

                                                是否在监视模式下保留过时的控制台输出,而不是在每次发生更改时清除屏幕。

                                                • 内部

                                                # 漂亮 - pretty

                                                使用颜色和上下文来美化错误和消息,默认情况下启用 - 为您提供机会从编译器获得更简洁、单色消息。

                                                • 默认值

                                                  true

                                                #完整性

                                                # 跳过默认库检查 - skipDefaultLibCheck

                                                使用 skipLibCheck 代替。跳过对默认库声明文件的类型检查。

                                                  # 跳过库检查 - skipLibCheck

                                                  跳过对声明文件的类型检查。

                                                  这可以在编译期间节省时间,但会以类型系统准确性为代价。例如,两个库可以在不一致的方式下定义两个相同 type 的副本。TypeScript 不会对所有 d.ts 文件进行完整检查,而是会检查您在应用程序源代码中专门引用的代码。

                                                  在某些情况下,你可能会考虑使用 skipLibCheck,例如当你的 node_modules 中存在两个相同库的类型副本时。在这种情况下,你应该考虑使用像 yarn 的 resolutions 这样的功能来确保你的依赖树中只有一个副本,或者通过理解依赖解析来调查如何确保只有一个副本,从而在没有额外工具的情况下解决问题。

                                                  另一种可能性是在你迁移 TypeScript 版本时,由于更改导致 node_modules 和 JS 标准库出现问题,而你不想在 TypeScript 更新期间处理这些问题。

                                                  请注意,如果这些问题来自 TypeScript 标准库,你可以使用 TypeScript 4.5 的 lib 替换 技术来替换该库。

                                                  • 推荐
                                                  • 已发布

                                                    2.0

                                                  #命令行

                                                  #监视选项

                                                  TypeScript 3.8 发布了一种新的目录监视策略,这对于有效地获取 node_modules 中的更改至关重要。

                                                  在 Linux 等操作系统上,TypeScript 在 node_modules 及其许多子目录上安装目录监视器(而不是文件监视器)以检测依赖项中的更改。这是因为可用文件监视器的数量通常少于 node_modules 中的文件数量,而要跟踪的目录数量要少得多。

                                                  由于每个项目可能在不同的策略下运行得更好,并且这种新方法可能不适合你的工作流程,因此 TypeScript 3.8 引入了一个新的 watchOptions 字段,允许用户告诉编译器/语言服务应该使用哪些监视策略来跟踪文件和目录。

                                                  # 假设更改只影响直接依赖项 - assumeChangesOnlyAffectDirectDependencies

                                                  启用此选项后,TypeScript 将避免重新检查/重建所有可能受影响的文件,而只重新检查/重建已更改的文件以及直接导入这些文件的其他文件。

                                                  这可以被认为是监视算法的“快速且松散”实现,它可以大幅减少增量重建时间,但代价是偶尔需要运行完整构建才能获得所有编译器错误消息。

                                                  监视选项

                                                  你可以配置 TypeScript --watch 的工作方式。本节主要用于处理 fs.watchfs.watchFile 在 Linux 上有额外约束的情况。你可以在 配置监视 中了解更多信息。

                                                  # 监视文件 - watchFile

                                                  单个文件监视策略。

                                                  • fixedPollingInterval:以固定间隔每秒检查几次每个文件以查看是否有更改。
                                                  • priorityPollingInterval:每秒检查几次每个文件以查看是否有更改,但使用启发式方法来降低某些类型文件的检查频率。
                                                  • dynamicPriorityPolling:使用动态队列,其中修改频率较低的将被检查得更少。
                                                  • useFsEvents(默认):尝试使用操作系统/文件系统的本机事件来监视文件更改。
                                                  • useFsEventsOnParentDirectory:尝试使用操作系统/文件系统的本机事件来监听文件父目录的更改
                                                  • 允许
                                                    • fixedpollinginterval

                                                    • prioritypollinginterval

                                                    • dynamicprioritypolling

                                                    • fixedchunksizepolling

                                                    • usefsevents

                                                    • usefseventsonparentdirectory

                                                  • 已发布

                                                    3.8

                                                  # 监视目录 - watchDirectory

                                                  在缺乏递归文件监视功能的系统下,监视整个目录树的策略。

                                                  • fixedPollingInterval:以固定间隔每秒检查几次每个目录以查看是否有更改。
                                                  • dynamicPriorityPolling:使用动态队列,其中修改频率较低的目录将被检查得更少。
                                                  • useFsEvents(默认):尝试使用操作系统/文件系统的本机事件来监视目录更改。
                                                  • 允许
                                                    • usefsevents

                                                    • fixedpollinginterval

                                                    • dynamicprioritypolling

                                                    • fixedchunksizepolling

                                                  • 已发布

                                                    3.8

                                                  # 回退轮询 - fallbackPolling

                                                  当使用文件系统事件时,此选项指定当系统用完本机文件监视器和/或不支持本机文件监视器时使用的轮询策略。

                                                  • fixedPollingInterval:以固定间隔每秒检查几次每个文件以查看是否有更改。
                                                  • priorityPollingInterval:每秒检查几次每个文件以查看是否有更改,但使用启发式方法来降低某些类型文件的检查频率。
                                                  • dynamicPriorityPolling:使用动态队列,其中修改频率较低的将被检查得更少。
                                                  • synchronousWatchDirectory:禁用目录上的延迟监视。当可能同时发生大量文件更改时(例如,从运行 npm install 中更改 node_modules),延迟监视很有用,但您可能希望使用此标志在某些不太常见的设置中禁用它。
                                                  • 允许
                                                    • fixedinterval

                                                    • priorityinterval

                                                    • dynamicpriority

                                                    • fixedchunksize

                                                  • 已发布

                                                    3.8

                                                  # 同步监视目录 - synchronousWatchDirectory

                                                  在不支持原生递归监视的平台上,同步调用回调并更新目录监视器的状态。 而不是给出一个小的超时时间来允许对文件进行潜在的多次编辑。

                                                  {
                                                  "watchOptions": {
                                                  }
                                                  }

                                                    # 排除目录 - excludeDirectories

                                                    您可以使用 excludeFiles 大幅减少在 --watch 期间监视的文件数量。 这对于减少 TypeScript 在 Linux 上跟踪的打开文件数量是一个有用的方法。

                                                    {
                                                    "watchOptions": {
                                                    "": ["**/node_modules", "_build", "temp/*"]
                                                    }
                                                    }

                                                      # 排除文件 - excludeFiles

                                                      您可以使用 excludeFiles 从监视的文件中删除一组特定文件。

                                                      {
                                                      "watchOptions": {
                                                      "": ["temp/file.ts"]
                                                      }
                                                      }

                                                        类型获取

                                                        类型获取仅对 JavaScript 项目很重要。 在 TypeScript 项目中,您需要在项目中显式包含类型。 但是,对于 JavaScript 项目,TypeScript 工具将在后台和 node_modules 文件夹之外下载模块的类型。

                                                        # 启用 - enable

                                                        在 JavaScript 项目中禁用自动类型获取

                                                        json
                                                        {
                                                        "typeAcquisition": {
                                                        "enable": false
                                                        }
                                                        }

                                                          # 包含 - include

                                                          如果您有一个 JavaScript 项目,TypeScript 需要额外的指导来理解全局依赖项,或者已通过 disableFilenameBasedTypeAcquisition 禁用了内置推断。

                                                          您可以使用 include 指定应从 DefinitelyTyped 使用哪些类型

                                                          json
                                                          {
                                                          "typeAcquisition": {
                                                          "include": ["jquery"]
                                                          }
                                                          }

                                                          # 排除 - exclude

                                                          提供一个配置,用于在 JavaScript 项目中禁用对特定模块的类型获取。这对于包含其他库(在测试基础设施中)但不在主应用程序中需要的项目很有用。

                                                          json
                                                          {
                                                          "typeAcquisition": {
                                                          "exclude": ["jest", "mocha"]
                                                          }
                                                          }

                                                          # 禁用基于文件名类型获取 - disableFilenameBasedTypeAcquisition

                                                          TypeScript 的类型获取可以根据项目中的文件名推断出应该添加哪些类型。这意味着在你的项目中有一个名为 jquery.js 的文件,会自动从 DefinitelyTyped 下载 JQuery 的类型。

                                                          你可以通过 disableFilenameBasedTypeAcquisition 来禁用此功能。

                                                          json
                                                          {
                                                          "typeAcquisition": {
                                                          "disableFilenameBasedTypeAcquisition": true
                                                          }
                                                          }