如何提高 TypeScript 的代码质量？

,大家好，我是 CUGGZ。,Typescript 是 Microsoft 开发的一种编程语言，旨在为 Javascript 语言带来严格的类型检查和类型安全方面的安全性。它是 JavaScript 的超集，可以编译为 Javascript。编译选项是 tsconfig.json 文件中的属性，可以启用或禁用以改善 Typescript 体验。下面就来看看如何通过设置编译选项来提高 Typescript 代码的质量。,在 TypeScript 项目中，tsconfig.json​ 放在项目根目录，它指定了用来编译这个项目的根文件和编译选项。在 tsconfig.json 里有以下可配置项：,这些配置项的作用如下：,将这个选项设置为 true​ 时，编译器将检查未使用的局部变量并生成错误，其方式类似于 ESLint 中的 no-unused-vars。此编译器选项旨在消除和删除 Typescript 中未使用的变量。考虑下面的例子：,在上面的例子中，我们定义了一个名为 numHandler​ 的函数，它接受一个 number​ 类型的参数。接下来，定义并返回了input 参数。当编译上面的代码时，就会提示以下错误：,产生这个错误的原因是声明了 digits​ 变量但并没有使用它。可以通过在代码中的某处使用声明的值，或者通过将 tsconfig.json​ 文件中的 noUnusedLocals​ 选项设置为 false 来消除此错误。,这个编译选项有点类似于 noUnusedLocals​ 选项。不同之处在于，noUnusedLocals​ 在有未使用的局部变量时产生错误，noUnusedParameter 在声明但未使用函数参数时产生错误。考虑下面的例子：,在上面的例子中，我们定义了一个名为 anExample​ 的函数，它接受一个 string​ 类型的参数。接下来，定义了一个名为 someStrings 的变量，然后返回一个布尔值和定义的变量。当编译上面的代码时，将会提示以下错误：,发生这种情况是因为在函数中声明了输入参数而没有使用它。可以通过使用函数体中声明的参数或将 tsconfig.json​ 文件中的 noUnusedParameter​ 选项设置为 false 来消除此错误。,这个编译选项确保任何带有返回声明的函数都返回一些内容。当函数中的代码路径不返回值时，此选项会生成错误。考虑下面的例子：,在上面的例子中，我们定义了一个带有两个 number​ 类型参数的函数。接下来，设置一个 if​ 语句，它检查两个参数的和是否大于零，然后返回该和。将此编译选项设置为 true 时，编译器会提示以下类型错误：,Typescript 在这里检测到并非所有代码路径都返回某些内容。当参数的总和不是正数时，就会没有返回语句，这就可能会引发错误，因为上面的函数将返回 undefined。要解决此问题，请确保代码的所有部分都会返回内容。可以这样进行修改：,通过使用 return 关键字，确保了代码的所有部分都返回一些内容。编译选项帮助我们检测可能的缺失情况，并避免错误。,当这个选项设置为 true​ 时，只要有 switch​ 语句中缺少 break​ 或 return 关键字，这个编译选项就会生成错误。考虑下面的例子：,当编译上面的代码时，将会提示以下错误：,发生这种情况是因为在第一个 switch​ 语句的分支中缺少了 break 关键字。,将这个编译选项设为 true​ 时，null​和 undefined​ 值不能赋值给非这两种类型的值，别的类型的值也不能赋给它们。除了 any​ 类型，还有个例外就是 undefined​ 可以赋值给 void​ 类型。这个选项可以帮助我们消除 Uncaught TypeError 错误。考虑下面的例子：,当编译上面的代码时，将会提示以下错误：,解决这个错误的方法是在使用变量之前为其赋值：,Typescript 中的每个变量都有一个类型。我们要么显式地定义类型，要么 Typescript 推断它的类型。考虑下面的例子：,在上面的代码中，有一个参数为 a​ 的函数。由于没有为该参数定义类型，因此 Typescript 推断该参数具有 any​ 类型。将此编译选项设置为 true 时，编译器会提示以下错误：,解决此问题的方法就是确保正确定义每个参数的类型。,将这个编译器选项设置为 true​ 时，Typescript 会在不正确地使用 this 关键字的情况下或在不清楚 this 所指的位置的地方提示错误。,由于 Javascript 中存在作用域，当编译上面的代码时，就会提示以下错误。这是因为 this​ 关键字的上下文默认没有绑定到任何 Person 实例。,解决这个问题的方法就是使用箭头函数，因为箭头函数使用其父级的执行上下文：,这个编译选项可以确保使用具有正确参数的 call()、bind()​ 和 apply() 函数。,当把这个编译选项设置为 true 的情况下运行上述代码时，将会提示以下错误：,为了解决这个问题，需要传入正确的参数：,将这个编译选项设置为 true 时，可以确保在构造函数中初始化所有类属性。,在上面的代码块中有一个 User​ 类，constructor()​ 方法是初始化其实例属性的地方。当实例化一个类对象时，JavaScript 会自动调用 constructor()​ 方法。Typescript 要求我们要么初始化定义的属性，要么指定一个 undefined 类型。因此，当编译上面的代码时，将会提示以下错误：,在 Javascript 中，可以抛出错误并在 catch 中捕获它。通常这将是一个 error​ 实例，默认设置为 any​。将 useUnknownInCatchVariable​ 编译选项设置为 true​ 时，它会隐式地将 catch​ 中的任何变量设置为 unknown​ 而不是 any。考虑下面的例子：,当编译上述代码时，它会将 err 更改为 unknown 类型。因此会提示以下错误；,产生此错误是因为 Typescript 将 err 设置为 unkown。可以通过以下方式来修复此错误：,在 if 检查的帮助下，Typescript 识别出 typeof err === "string" 是一种特殊形式的代码，我们在其中显式声明和描述类型，这称为类型保护。,当 strictFunctionTypes​ 为 true 时，会更彻底地检查函数参数。Typescript 参数默认是双向协变的，这意味着它们既可以是协变的，也可以是逆变的。方差是一种深入了解子类型关系的方法。当参数是协方差时，我们可以将特定类型分配给更广泛的类型（例如将子类型分配给超类型）。逆变是相反的：可以将更广泛的类型分配给特定类型（例如将超类型分配给子类型）。,上面的代码运行时并没有提示错误，默认情况下参数是双向协变比较的。超类型 getAnimalName​ 和子类型 getDogName​ 的方法可以相互分配。如果 strictFunctionTypes​ 设置为 true，则 Typescript 的参数进行逆变比较。,当上面的代码运行时，将会提示以下错误：,这里，getAnimalName​ 是比 getDogName 更广泛的函数。因此，在这种情况下，无法将超类型分配给子类型。但是，可以将子类型分配给超类型。大多数时候，函数参数应该是逆变的，而不是双向协变的。如果启用这个编译选项，Typescript 将不会将函数参数视为双向协变。,UnReachable 的代码永远不会被执行，例如在 return​ 语句之后的代码。将将这个编译选项设置为 true​ 时，将忽略无法访问的代码。相比之下，TypeScript 会在 allowUnreachableCode​ 设置为 false​ 时验证我们的代码路径，确保所有代码都可以访问和使用。设置为 true 时，如果检测到任何无法访问的代码，则会引发错误。,如果代码被证明无法访问，Typescript 将提示以下警告：,当此编译选项设置为 true​ 时，它要求我们使用 []​ 括号表示法和 .​ 点符号表示法访问未知属性以访问已定义的属性。这提高了一致性，因为使用点符号访问的属性始终指示现有属性。obj.key​ 语法如果属性不存在，可以使用 [] 括号表示法：obj["key"]。,在上面的示例中，我们定义了一个 HorseRac​e 接口，并为其赋予了一些属性，例如breed、speed和索引签名（用于未知属性）。当编译上面的代码时，将会提示以下错误：,要修改此错误，需要在调用属性 ownerName 时使用括号表示法：,默认情况下，Typescript 会忽略一个属性是否被设置为“undefined​”，因为它没有被定义，或者被定义为了 undefined。,上面代码执行的时候不会产生错误，在 test1​ 中，检查是否定义了 property​；如果不是，它会打印一个 false​。在 test2 中，打印出 true​，因为定义了 property​ 并将其设置为 undefined​。接下来，把 exactOptionalPropertyTypes 选项设置为 true：,编译上述代码时，将会提示以下错误：,这里，Typescript 不允许定义 undefined 的属性。为了解决这个问题，可以用 undefined 类型定义属性。,当启用 exactOptionalPropertyTypes​ 时，Typescript 会意识到这两种具有未定义属性的不同方式。它还确保如果我们想显式地将属性定义为 undefined​，则必须首先使用 undefined 类型对其进行注释。,当这个选项设置为 false 时，将遵循运行 Typescript 的操作系统 (OS) 的区分大小写规则。它可以区分大小写（操作系统区分文件名中的小写和大写字符）或不区分大小写（操作系统不区分字符大小写）。当 forceConsistentCasingInFileNames 选项设置为 true 时，如果尝试导入名称大小写与磁盘上文件名称大小写不同的文件，Typescript 将引发错误。,在不考虑文件名大小写的情况下，在上面的代码中导入 StringValidator.ts​ 文件。如果 forceConsistentCasingInFileNames​ 选项设置为 true，将会提示以下错误：,要解决此问题，需要在导入文件时确保文件名大小写正确。,编译选项大致可以分为五类：基础选项、类型检查选项、额外检测选项、模块解析选项、Source Map 选项、实验选项。,注意： 开启了这些检查如果有错会提示但不会报错。,控制是否开启一些实验性质的语法。,参考：