相关文章推荐
粗眉毛的沙滩裤  ·  css设置父div高度为90%后，子div高 ...·  3 月前    · 
细心的骆驼  ·  为Ubuntu 20.04 ...·  3 月前    · 
傲视众生的桔子  ·  学习笔记 --《C++Primer》 - 知乎·  1 年前    · 
谦和的灌汤包  ·  Mysql，Oracle中 ...·  1 年前    · 
慷慨大方的手套  ·  【Jquery】根据条件对json数组进行搜 ...·  1 年前    · 
Code  ›  Typescript 严格模式有多严格？-腾讯课堂
string 编程语言 typescript 腾讯课堂
https://ke.qq.com/cheese/graphic_47845ee3317225ce181e78e43a3a0d8e_0-1.html
跑龙套的松树
1 年前
// 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) // 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

此规则不允许出现 null 或 undefined 的可能性。请看以下示例：

// 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])

在你不记得参数类型时，非严格模式下不会校验参数类型和数量，运行代码时， 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 ((total, num) => total + num, 0) sum.apply(null, [1, 2, 3])

7. strictFunctionTypes

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

初看，内心 OS：“这什么玩意儿？”，这里有篇介绍：

协变（covariance）和抗变（contravariance）是什么？ [1]

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

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

说个最容易理解的例子， int 和 float 两个类型的关系可以写成下面这样。 int ≦ float ：也就是说 int 是 float 的子类型。

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

请看下面这个 Animal 是 Dog 和 Cat 的父类型的例子：

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; // 错误

协变（covariance）和抗变（contravariance）是什么？: https://www.stephanboyer.com/post/132/what-are-covariance-and-contravariance

How strict is Typescript’s strict mode?: https://medium.com/swlh/how-strict-is-typescripts-strict-mode-f36a4d1a948a

应该怎么理解编程语言中的协变逆变？: https://www.zhihu.com/question/38861374

TypeScript 严格函数类型: https://www.tslang.cn/docs/release-notes/typescript-2.6.html

 
推荐文章
粗眉毛的沙滩裤  ·  css设置父div高度为90%后，子div高度超出父div范围解决方法 - CSDN文库
3 月前
细心的骆驼  ·  为Ubuntu 20.04 设置静态IP简明教程（转） - 奋斗终生 - 博客园
3 月前
傲视众生的桔子  ·  学习笔记 --《C++Primer》 - 知乎
1 年前
谦和的灌汤包  ·  Mysql，Oracle中 sum、count函数使用条件判断 - 掘金
1 年前
慷慨大方的手套  ·  【Jquery】根据条件对json数组进行搜索或筛选（精确查找和模糊查找）_jq匹配json值内容_一起来学吧的博客-CSDN博客
1 年前
今天看啥   ·   Py中国   ·   codingpro   ·   藏经阁   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号