专栏首页全栈者Typescript 严格模式有多严格?

Typescript 严格模式有多严格?

前言

"use strict"指令在JavaScript 1.8.5 (ECMAScript5)中新增。

至今,前端 er 们基本都默认开启严格模式敲代码。

那么,你知道Typescript其实也有属于自己的严格模式吗?

1.Typescript严格模式规则

Typescript严格模式设置为on时,它将使用strict族下的严格类型规则对项目中的所有文件进行代码验证。规则是:

不允许变量或函数参数具有隐式any类型。

2.noImplicitAny

此规则不允许变量或函数参数具有隐式any类型。请看以下示例:

// Javascript/Typescript 非严格模式
function extractIds (list) {
  return list.map(member => member.id)
}

上述例子没有对list进行类型限制,map循环了item的形参member。而在Typescript严格模式下,会出现以下报错:

// Typescript 严格模式
function extractIds (list) {
  //              ❌ ^^^^
  //                 Parameter 'list' implicitly
  //                 has an 'any' type. ts(7006)
  return list.map(member => member.id)
  //           ❌ ^^^^^^
  //              Parameter 'member' implicitly
  //              has an 'any' type. ts(7006)
}

正确写法应是:

// Typescript 严格模式
interface Member {
  id: number
  name: string
}

function extractIds (list: Member[]) {
  return list.map(member => member.id)
}

1.1 浏览器自带事件该如何处理?

浏览器自带事件,比如e.preventDefault(),是阻止浏览器默认行为的关键代码。

这在Typescript严格模式下是会报错的:

// Typescript 严格模式
function onChangeCheckbox (e) {
  //                    ❌ ^
  //                       Parameter 'e' implicitly
  //                       has an 'any' type. ts(7006)
  e.preventDefault()
  const value = e.target.checked
  validateCheckbox(value)
}

若需要正常使用这类Web API,就需要在全局定义扩展。比如:

// Typescript 严格模式
interface ChangeCheckboxEvent extends MouseEvent {
  target: HTMLInputElement
}

function onChangeCheckbox (e: ChangeCheckboxEvent) {
  e.preventDefault()
  const value = e.target.checked
  validateCheckbox(value)
}

1.2 第三方库也需定义好类型

请注意,如果导入了非Typescript库,这也会引发错误,因为导入的库的类型是any

// Typescript 严格模式
import { Vector } from 'sylvester'
//                  ❌ ^^^^^^^^^^^
//                     Could not find a declaration file
//                     for module 'sylvester'.
//                     'sylvester' implicitly has an 'any' type.
//                     Try `npm install @types/sylvester`
//                     if it exists or add a new declaration (.d.ts)
//                     file containing `declare module 'sylvester';`
//                     ts(7016)

这可能是项目重构Typescript版的一大麻烦,需要专门定义第三方库接口类型

3.noImplicitThis

此规则不允许this上下文隐式定义。请看以下示例:

// Javascript/Typescript 非严格模式
function uppercaseLabel () {
  return this.label.toUpperCase()
}

const config = {
  label: 'foo-config',
  uppercaseLabel
}

config.uppercaseLabel()
// FOO-CONFIG

在非严格模式下,this指向config对象。this.label只需检索config.label

但是,this在函数上进行引用可能是不明确的

// Typescript严格模式
function uppercaseLabel () {
  return this.label.toUpperCase()
  //  ❌ ^^^^
  //     'this' implicitly has type 'any'
  //     because it does not have a type annotation. ts(2683)
}

如果单独执行this.label.toUpperCase(),则会因为this上下文config不再存在而报错,因为label未定义。

解决该问题的一种方法是避免this在没有上下文的情况下使用函数:

// Typescript严格模式
const config = {
  label: 'foo-config',
  uppercaseLabel () {
    return this.label.toUpperCase()
  }
}

更好的方法是编写接口,定义所有类型,而不是Typescript来推断:

// Typescript严格模式
interface MyConfig {
  label: string
  uppercaseLabel: (params: void) => string
}

const config: MyConfig = {
  label: 'foo-config',
  uppercaseLabel () {
    return this.label.toUpperCase()
  }
}

4.strictNullChecks

此规则不允许出现nullundefined的可能性。请看以下示例:

// Typescript 非严格模式
function getArticleById (articles: Article[], id: string) {
  const article = articles.find(article => article.id === id)
  return article.meta
}

Typescript非严格模式下,这样写不会有任何问题。但严格模式会非给你搞出点幺蛾子:

“你这样不行,万一find没有匹配到任何值呢?”:

// Typescript严格模式
function getArticleById (articles: Article[], id: string) {
  const article = articles.find(article => article.id === id)
  return article.meta
  //  ❌ ^^^^^^^
  //     Object is possibly 'undefined'. ts(2532)
}

“我星星你个星星!”

于是你会将改成以下模样:

// Typescript严格模式
function getArticleById (articles: Article[], id: string) {
  const article = articles.find(article => article.id === id)
  if (typeof article === 'undefined') {
    throw new Error(`Could not find an article with id: ${id}.`)
  }

  return article.meta
}

“真香!”

5.strictPropertyInitialization

此规则将验证构造函数内部初始化前后已定义的属性。

必须要确保每个实例的属性都有初始值,可以在构造函数里或者属性定义时赋值。

strictPropertyInitialization,这臭长的命名像极了React源码里的众多任性属性)

请看以下示例:

// Typescript非严格模式
class User {
  username: string;
}

const user = new User();

const username = user.username.toLowerCase();

如果启用严格模式,类型检查器将进一步报错:

class User {
  username: string;
  //    ❌  ^^^^^^
  //     Property 'username' has no initializer
  //     and is not definitely assigned in the constructor
}

const user = new User();
/
const username = user.username.toLowerCase();
 //                 ❌         ^^^^^^^^^^^^
//          TypeError: Cannot read property 'toLowerCase' of undefined

解决方案有四种。

方案#1:允许undefined

username属性定义提供一个undefined类型:

class User {
  username: string | undefined;
}

const user = new User();

username属性可以为string | undefined类型,但这样写,需要在使用时确保值为string类型

const username = typeof user.username === "string"
  ? user.username.toLowerCase()
  : "n/a";

这也太不Typescript了。

方案#2:属性值显式初始化

这个方法有点笨,却挺有效:

class User {
  username = "n/a";
}

const user = new User();

// OK
const username = user.username.toLowerCase();

方案#3:在构造函数中赋值

最有用的解决方案是向username构造函数添加参数,然后将其分配给username属性。

这样,无论何时new User(),都必须提供默认值作为参数:

class User {
  username: string;

  constructor(username: string) {
    this.username = username;
  }
}

const user = new User("mariusschulz");

// OK
const username = user.username.toLowerCase();

还可以通过public修饰符进一步简化:

class User {
  constructor(public username: string) {}
}

const user = new User("mariusschulz");

// OK
const username = user.username.toLowerCase();

方案#4:显式赋值断言

在某些场景下,属性会被间接地初始化(使用辅助方法或依赖注入库)。

这种情况下,你可以在属性上使用显式赋值断言来帮助类型系统识别类型。

class User {
  username!: string;

  constructor(username: string) {
    this.initialize(username);
  }

  private initialize(username: string) {
    this.username = username;
  }
}

const user = new User("mariusschulz");

// OK
const username = user.username.toLowerCase();

通过向该username属性添加一个明确的赋值断言,我们告诉类型检查器:username,即使它自己无法检测到该属性,也可以期望该属性被初始化。

6.strictBindCallApply

此规则将对bind, call, apply更严格地检测类型。

啥意思?请看以下示例:

// JavaScript
function sum (num1: number, num2: number) {
  return num1 + num2
}

sum.apply(null, [1, 2])
// 3

在你不记得参数类型时,非严格模式下不会校验参数类型和数量,运行代码时,Typescript和环境(可能是浏览器)都不会引发错误:

// Typescript非严格模式
function sum (num1: number, num2: number) {
  return num1 + num2
}

sum.apply(null, [1, 2, 3])
// 还是...3?

Typescript严格模式下,这是不被允许的:

// Typescript严格模式
function sum (num1: number, num2: number) {
  return num1 + num2
}

sum.apply(null, [1, 2, 3])
//           ❌ ^^^^^^^^^
//              Argument of type '[number, number, number]' is not
//              assignable to parameter of type '[number, number]'.
//                Types of property 'length' are incompatible.
//                  Type '3' is not assignable to type '2'. ts(2345)

那怎么办?“...”扩展运算符和reduce老友来相救

// Typescript严格模式
function sum (...args: number[]) {
  return args.reduce<number>((total, num) => total + num, 0)
}

sum.apply(null, [1, 2, 3])
// 6

7. strictFunctionTypes

该规则将检查并限制函数类型参数是抗变(contravariantly)而非双变(bivariantly,即协变或抗变)的。

初看,内心 OS:“这什么玩意儿?”,这里有篇介绍:

协变(covariance)和抗变(contravariance)是什么?[1]

协变和逆变维基上写的很复杂,但是总结起来原理其实就一个。

  • 子类型可以隐性的转换为父类型

说个最容易理解的例子,intfloat两个类型的关系可以写成下面这样。intfloat:也就是说intfloat的子类型。

这一更严格的检查应用于除方法或构造函数声明以外的所有函数类型。方法被专门排除在外是为了确保带泛型的类和接口(如 Array )总体上仍然保持协变。

请看下面这个AnimalDogCat的父类型的例子:

declare let f1: (x: Animal) => void;
declare let f2: (x: Dog) => void;
declare let f3: (x: Cat) => void;
f1 = f2;  // 启用 --strictFunctionTypes 时错误
f2 = f1;  // 正确
f2 = f3;  // 错误
  1. 第一个赋值语句在默认的类型检查模式中是允许的,但是在严格函数类型模式下会被标记错误。
  2. 而严格函数类型模式将它标记为错误,因为它不能 被证明合理。
  3. 任何一种模式中,第三个赋值都是错误的,因为它 永远不合理。

用另一种方式来描述这个例子则是,默认类型检查模式中T在类型(x: T) => void是 双变的,但在严格函数类型模式中T是 抗变的:

interface Comparer<T> {
    compare: (a: T, b: T) => number;
}

declare let animalComparer: Comparer<Animal>;
declare let dogComparer: Comparer<Dog>;

animalComparer = dogComparer;  // 错误
dogComparer = animalComparer;  // 正确

写到此处,逼死了一个菜鸡前端。

总结&参考

  1. How strict is Typescript’s strict mode?[2]
  2. 应该怎么理解编程语言中的协变逆变?[3]
  3. TypeScript 严格函数类型[4]

在面试的过程中,常被问到为什么TypescriptJavaScript好用?

从这些严格模式规则,你就可以一窥当中的奥秘,今日开严格,他日 Bug 秒甩锅,噢耶。

本文分享自微信公众号 - 全栈者(fullStackEngineer)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 高级前端开发者必会的34道Vue面试题系列(一)

    最近拿到一套高级前端的Vue面试题,从头往下看了一遍,居然大部分都是一知半解的,遂准备一道一道的认真学习总结,立志做一位Vue高级开发者!

    用户1462769
  • 科普:身份证号为什么不会重复?

    中国目前已经超过十三亿人,一个巨大的数字,在如此庞大的人群下,政府是如何有序管理的呢?众所周知,每个人都有一个唯一标识的身份证号,你是否想过会不会有一个人和你有...

    用户1462769
  • 浏览器HTTP请求并发数和TCP连接的关系

    浏览器对并发请求的数目限制是针对域名的,即针对同一域名(包括二级域名)在同一时间支持的并发请求数量的限制。如果请求数目超出限制,则会阻塞。因此,网站中对一些静态...

    用户1462769
  • Typescript 严格模式有多严格?

    "use strict"指令在JavaScript 1.8.5 (ECMAScript5)中新增。

    前端劝退师
  • Twitter收购Magic Pony进军直播视频领域,打造人工智能化社交

    镁客网
  • CentOs5.2中PHP的升级

    最近一个项目中需要使用到PHP5.2的版本,而服务器上使用了官方的yum源进行安装,默认的版本是5.1.6,需要升级。但是因为不是一个非常正式的服务器环境,所以...

    大江小浪
  • 洋垃圾“漂洋过海”到中国:纽约的垃圾回收之旅

    纽约每年会产生约1400万吨城市垃圾,并需花费23亿美元政府资金来处理。这些垃圾有的会被就地掩埋,有的会被回收再利用,有的甚至被卖往7000英里外的中国等地。在...

    DT数据侠
  • 逼死上海宁的垃圾分类“太难了”?快来VR游戏恶补一下!

    提起近期最能引起“社会恐慌”的新闻,大概就是“垃圾分类”了吧。对于上海人来说,这辈子没有为垃圾拼过命,都不算是真正活过……

    VRPinea
  • 骑上我心爱的小摩托,再挂上AI摄像头,去认识一下全城的垃圾!

    垃圾管理是现代城市一个非常有挑战性的任务,每个地区都有其独特的垃圾产生模式,但无论产生垃圾的种类和数量如何变化,优化垃圾的收集方式是降低成本、保持城市清洁的重要...

    大数据文摘
  • 程序员如何不被垃圾分类逼疯?

    今天是《上海市生活垃圾管理条例》施行的第2天,这场被称为“史上最严”垃圾分类多次成功占据热搜头条。

    养码场

扫码关注云+社区

领取腾讯云代金券