简介
在前端开发中，使用 TypeScript 提升了开发效率和代码质量，但是 TypeScript 内置的类型检查并不够严格，这就可能导致一些隐藏的错误在编译期间无法被发现。而 @tsconf/strict 就是一个 npm 包，可以让 TypeScript 的类型检查更加严格，从而提高代码的质量和可靠性。
功能
@tsconf/strict 提供了以下功能：
- 禁止隐式的 any 类型
- 禁止隐式的 any 包装类型
- 禁止隐式的 any 数组
- 禁止空值的对象访问
- 禁止非 nullish 类型的 null 或者 undefined 赋值
- 禁止直接使用 window 或者 document 对象
安装和使用
使用 @tsconf/strict 很简单，只需要在 TypeScript 项目中安装这个包并在 tsconfig.json 文件中增加相应的配置即可。下面是具体的步骤：
- 安装
npm install @tsconf/strict --dev
- 配置
在 tsconfig.json 文件中，增加以下配置：
-- -------------------- ---- -------
-
------------------ -
--------- -----
---------------- -----
----------------- -----
----------------- -----
--------------------- -----
-------------------- -----
----------------------------- -----
----------------------------------- -----
------------------ -----
--------------- -----
-------------------- -----
---------- ----
-------- -------- -----------------
--
---------- -------
-以上配置中，strict 表示开启严格模式，其他的配置都是 TypeScript 自带的一些严格检查配置。同时，也需要将 "@tsconf/strict" 添加到 typescript 的 types 配置中来告诉 TypeScript 编译器需要使用这个 npm 包。
深入理解
防止使用 any
在 TypeScript 中，any 类型是非常灵活的，因为它可以表示任何类型的值。但是，使用 any 类型也是非常危险的，因为它会让代码变得非常难以维护和调试。严格模式会强制禁止隐式的 any 类型，这样可以让代码更加可读、可维护。
以下是一个使用 any 类型的示例：
function add(a: any, b: any): any {
return a + b;
}
const result = add(1, '2'); // 这里不会报错，但是结果是 "12"可以看到，在没有使用严格模式的情况下，这段代码是能够编译通过的。但是，由于 TypeScript 编译器无法确定 a 和 b 的类型，所以在调用 add 函数时，传入的参数是一个数字和一个字符串，最终的结果是将两个值拼接成了一个字符串。显然，这个结果是不符合预期的。
在开启 @tsconf/strict 后，上面的代码会直接报错，让开发者必须明确指定函数参数类型才能通过编译。
禁止隐式的 any 包装类型
在 TypeScript 中，如果一个变量的类型为 any，那么它可以隐式地转换为任何其他类型。例如：
const num: number = 1 as any;
这里的 1 as any 是把数字 1 转换为 any 类型，然后再将 any 类型转换为 number 类型。虽然这段代码能够正确地编译，但是在运行时会抛出一个异常。
在 @tsconf/strict 中，会禁止这种隐式的类型转换，因此，以上代码会直接报错。
禁止隐式的 any 数组
在 TypeScript 中，如果一个数组的类型为 any，那么它可以隐式地转换为任何其他类型的数组。例如：
const arr: number[] = [1, 2, '3'] as any[];
这里的 [1, 2, '3'] as any[] 是把这个数组看作 any 类型的数组，然后再将其转换为 number 类型的数组。显然，这个数组中的第三个元素是字符串类型，而不是数字类型，这将导致类型错误。
在 @tsconf/strict 中，会禁止这种隐式的类型转换，因此，以上代码也会直接报错。
禁止空值的对象访问
在 JavaScript 中，如果一个对象为 null 或者 undefined，那么我们访问它的属性或者方法时就会出现运行时错误。例如：
const obj = null; const prop = obj.name; // 这行代码会抛出异常
在 JavaScript 中，这种异常是非常常见的，因为我们经常在代码中使用对象属性或者方法，但是却没有进行空值判断。
在 @tsconf/strict 中，会禁止对空值的对象进行属性或者方法的访问，这样可以避免这类运行时错误。
禁止非 nullish 类型的 null 或者 undefined 赋值
在 TypeScript 中，nullish 类型是指 null 或者 undefined，这两个值可以赋值给任何类型的变量。但是，在 @tsconf/strict 中，会禁止将 null 或者 undefined 赋值给非 nullish 类型的变量，这样可以避免一些类型错误。
以下是一个例子：
let num: number = null; // 这里会直接报错
这段代码中，我们将 null 赋值给了一个 number 类型的变量，这是不允许的，在 @tsconf/strict 中会直接报错。
禁止直接使用 window 或者 document 对象
在前端开发中，window 和 document 对象是非常常见的全局对象。但是，在 TypeScript 中，如果直接使用这些全局对象，那么就无法进行类型检查和提示。
在 @tsconf/strict 中，会禁止直接使用 window 和 document 对象，这样可以让 TypeScript 的类型检查更加严格，从而避免一些隐藏的错误。
document.getElementById('app').innerText = 'Hello, world!'; // 这里会直接报错这段代码中，我们直接使用了 document 对象来获取 DOM 元素，并设置该元素的文本内容。但是，在 @tsconf/strict 中，这样的代码是不允许的，必须要使用类型安全的方式来获取 DOM 元素。
总结
@tsconf/strict 是一个非常有用的 npm 包，可以让 TypeScript 的类型检查更加严格，从而提高代码的质量和可靠性。在使用 @tsconf/strict 时，需要了解它的具体功能和配置，同时也需要深入理解 TypeScript 的类型系统，这样才能更好地使用 @tsconf/strict 来优化自己的前端开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005591481e8991b448d6842