详解Typescript 严格模式有多严格

更新时间：2023年01月29日 14:40:44 作者：CUGGZ

这篇文章主要为大家介绍了Typescript 严格模式有多严格实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

正文

TypeScript 是微软于 2012 年推出的一门语言，它是 JavaScript 的超集，具有更强的可选类型系统。TypeScript 和 JavaScript 一样是有严格模式的，今天就来看看 TypeScript 中的严格模式如何开启，以及它到底有多严格！

TypeScript 的配置项都写在项目根目录名为 tsconfig.json 的配置文件中，可以通过以下方式来开启严格模式：

{
  ...
  "compilerOptions": {
    "strict": true,
    ...
  },
  ...
}

TypeScript 编译器有超过 90 个不同的配置项。其中 7 个是关于严格模式的：

noImplicitAny
noImplicitThis
alwaysStrict
strictBindCallApply
strictNullChecks
strictPropertyInitialization
strictFunctionTypes

当在 tsconfig.json 中开启严格模式之后，就相当于开启了这些配置：

{
  ...
  "compilerOptions": {
    "noImplicitAny": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "strictBindCallApply": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    ...
  }
  ...
}

下面就来分别看一下这些选项都有什么含义。

noImplicitAny

此规则不允许变量或函数参数具有隐式 any 类型。来看下面的例子：

const add10 = number =&gt; number + 10;

当启用了严格模式时，函数参数 number 就报错了：

参数“number”隐式具有“any”类型。ts(7006)

要想修复这个报错，只需给参数或变量显式指定类型：

const add10 = (number: number) =&gt; number + 10;

因此 noImplicitAny 规则可以确保代码更具可读性。否则，add10 函数的调用者需要推断参数是一个数字，那使用 TypeScript 还有什么意义呢？

noImplicitThis

此规则不允许 this 隐式定义上下文。来看下面的例子：

class Person {
  weight: number;
  height: number; 
  constructor(weight: number, height: number) {
    this.weight = weight;
    this.height = height;
  } 
  getBodyMassIndex() {
    return function () {
      return this.weight / (this.height * this.height);
    };
  }
}

当启用了严格模式时，getBodyMassIndex 中的 this 就报错了：

"this" 隐式具有类型 "any"，因为它没有类型注释。ts(2683)

解决这个问题的方法就是使用箭头函数，因为箭头函数使用其父级的执行上下文：

class Person {
  weight: number;
  height: number; 
  constructor(weight: number, height: number) {
    this.weight = weight;
    this.height = height;
  } 
  getBodyMassIndex() {
    return () => {
      return this.weight / (this.height * this.height);
    };
  }
}

alwaysStrict

此规则指定始终以严格模式检查每个模块，并且在编译之后的 JavaScript 文件中加入"use strict"，用来告诉浏览器该 JavaScript 为严格模式。

ECMAScript 严格模式是在 ES5 中引入的，它只是向编译器提示代码应该以严格模式执行，使用严格模式可以使代码更以更安全、高效的方式运行。

strictBindCallApply

此规则可以确保使用具有正确参数的 call()、bind() 和 apply() 函数。来看下面的例子：

const logNumber = (x: number) =&gt; {
  console.log(`number：${x}`)
}
logNumber.call(undefined, "10"); //

当启用了严格模式时，getBodyMassIndex 中的 this 就报错了：

类型“string”的参数不能赋给类型“number”的参数。ts(2345)

当遇到这种报错时，只需检查函数调用的参数，并使用正常的方式调用：

logNumber.call(undefined, 10); // number：10

strictNullChecks

此规则使得 null和 undefined 值不能赋值给非这两种类型的值，别的类型的值也不能赋给它们。除了 any 类型，还有个例外就是 undefined 可以赋值给 void 类型。这个选项可以帮助 Uncaught TypeError 错误。来看下面的例子：

interface Book {
    name: string;
    author: string;
  }
const books: Book[] = [ {name: 'Test1', author: 'Max'} ];
const getBookByAuthor = (author: string) => books.find((book) => book.author = author);
const book = getBookByAuthor("John");
console.log(book.name);

当启用了严格模式时，打印 book.name 时就报错了：

对象可能为“未定义”。ts(2532)

如果未开启严格模式，即使 book.name 可能未定义，此代码也会编译。想要修复这个问题，就需要为要编译的代码添加 null 检查：

interface Book {
  name: string;
  author: string;
}
const books: Book[] = [ {name: 'Test1', author: 'Max'} ];
const getBookByAuthor = (author: string) => books.find((book) => book.author = author);
const book = getBookByAuthor("John");
if (book) {
  console.log(book.name);
} else {
  console.log('Book not found');
}

函数中也是一样的，来看下面的例子：

interface Book {
    name: string;
    author: string;
  }
const books: Book[] = [ {name: 'Test1', author: 'Max'} ];
const getBookByAuthor = (author: string) => books.find((book) => book.author = author);
const book = getBookByAuthor("John");
const logBookName = (book: Book) => {
    console.log(book.name);
}
logBookName(book);

如果启用了严格模式时，调用 logBookName(book); 时就会报错：

类型“Book | undefined”的参数不能赋给类型“Book”的参数。
不能将类型“undefined”分配给类型“Book”。ts(2345)

这里提供两种解决方案：

A：将logBookName 函数参数类型设置为 Book | undefined
B：null 检查条件调用

// A
const logBookName = (book: Book | undefined) => {
    if (book) {
        console.log(book.name);
    }
    else {
        console.log('not book');
    }
}
// B
if (book) {
    logBookName(book);
}

使用该规则时，可以强制开发人员编写具有更好类型描述的代码。

strictPropertyInitialization

此规则将强制在构造函数中初始化所有属性值。来看下面的例子：

class User {
    name: string;
    age: number;
    occupation: string | undefined;   
    constructor(name: string) {
        this.name = name;
    }
}

在上面的代码块中有一个 User 类，constructor() 方法是初始化其实例属性的地方。当实例化一个类对象时，JavaScript 会自动调用 constructor() 方法。Typescript 要求要么初始化定义的属性，要么指定一个 undefined 类型。因此，当编译上面的代码时，将会提示以下错误：

属性“age”没有初始化表达式，且未在构造函数中明确赋值。ts(2564)

对于上面的代码，可以这样改：

// A:指定 undefined 类型
class User {
    name: string;
    age: number | undefined;
    occupation: string | undefined;
    constructor(name: string) {
        this.name = name;
    }
}
// B:初始化定义的属性
class User {
    name: string;
    age: number;
    occupation: string | undefined;
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }
}

strictFunctionTypes

此规则会更彻底地检查函数参数。Typescript 参数默认是双向协变的，这意味着它们既可以是协变的，也可以是逆变的。方差是一种深入了解子类型关系的方法。当参数是协方差时，我们可以将特定类型分配给更广泛的类型（例如将子类型分配给超类型）。逆变是相反的：可以将更广泛的类型分配给特定类型（例如将超类型分配给子类型）。

// 非严格模式
interface Animal {
  name: string;
}
interface Dog extends Animal {
  breeds: Array<string>;
}
let getDogName = (dog: Dog) => dog.name;
let getAnimalName = (animal: Animal) => animal.name;
getDogName = getAnimalName;  // Ok
getAnimalName = getDogName;  // Ok

上面的代码运行时并没有提示错误，默认情况下参数是双向协变比较的。超类型 getAnimalName 和子类型 getDogName 的方法可以相互分配。当开启严格模式之后，则 TypeScript 的参数进行逆变比较。

// 严格模式
interface Animal {
  name: string;
}
interface Dog extends Animal {
  breeds: Array<string>;
}
let getDogName = (dog: Dog) => dog.name;
let getAnimalName = (animal: Animal) => animal.name;
getDogName = getAnimalName; // Ok
getAnimalName = getDogName; // Error

当开启严格模式时，最后一行将报以下错误：

不能将类型“(dog: Dog) => string”分配给类型“(animal: Animal) => string”。
参数“dog”和“animal” 的类型不兼容。
类型 "Animal" 中缺少属性 "breeds"，但类型 "Dog" 中需要该属性。ts(2322)

这里，getAnimalName 是比 getDogName 更广泛的函数。因此，在这种情况下，无法将超类型分配给子类型。但是，可以将子类型分配给超类型。大多数时候，函数参数应该是逆变的，而不是双向协变的。如果开启严格模式，Typescript 将不会将函数参数视为双向协变。

以上就是详解Typescript 严格模式有多严格的详细内容，更多关于Typescript 严格模式的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

TypeScript数组实现栈与对象实现栈的区别详解
这篇文章主要为大家介绍了TypeScript数组实现栈与对象实现栈的区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
移动设备web开发首选框架：zeptojs介绍
这篇文章主要介绍了移动设备web开发首选框架：zeptojs介绍,他兼容jquery的API,所以学起来或用起来并不吃力,需要的朋友可以参考下
2015-01-01
初识SmartJS - AOP三剑客
隔了好久才终于又发布了一点东西，SmartJS是最近才开始搞的一个开源js库，目的是做一些比较有特点的事情（smartjs暂时也是依赖于jquery）。
2014-06-06
js库Modernizr的介绍和使用
Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单
2015-05-05
前端构建 Less入门(CSS预处理器)
众多CSS预处理器中Less的语法最接近原生CSS，因此相对来说更容易上手，假如有JS、C#等编程经验的话，其实上述的几种预处理器的学习成本也不会特别高。下面是我们这阵子的学习笔记，以便日后查阅
2017-03-03
layui中的layer弹出层自定义样式更改背景
layui中的layer弹出层有很多提示框，但是我们使用最多的应该就几种，layer.msg、layer.alert、layer.open、layer.load等。layer 有内置的skin：layui-layer-lan，layui-layer-molv，可以直接使用。skin不仅允许你传入layer内置的样式class名，可以自定义class名。
2023-06-06
基于Javascript实现页面商品个数增减功能
本文给大家介绍基于Javascript实现页面商品个数增减功能，通过点击数量增减个数，代码分为前端页面，后台返回代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2019-07-07
TypeScript 中 as const使用介绍
这篇文章主要为大家介绍了TypeScript 中 as const使用介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
requireJS使用指南
如今最常用的JavaScript库之一是RequireJS。最近我参与的每个项目，都用到了RequireJS，或者是我向它们推荐了增加RequireJS。在这篇文章中，我将描述RequireJS是什么，以及它的一些基础场景。 
2016-04-04
TypeScript中的递归类型示例解析
这篇文章主要为大家介绍了TypeScript中的递归类型示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04