1 引言
Typescript 3.2 发布了几个新特性,主要变化是类型检查更严格,对 ES6、ES7 一些时髦功能拓展了类型支持。
2 概要
下面挑一些相对重要配置介绍。
strictBindCallApply
对 bind
call
apply
更严格的类型检测。
比如如下可以检测出 apply
函数参数数量和类型的错误:
function foo(a: number, b: string): string {
return a + b;
}
let a = foo.apply(undefined, [10]); // error: too few argumnts
特别对一些 react
老代码,函数需要自己 bind(this)
,在没有用箭头函数时,可能经常使用 this.foo = this.foo.bind(this)
,这时类型可能会不准,但升级到 TS3.2 后,可以准确捕获到错误了。
Object spread 类型自动合并
现在 Object spread
类型可以自动合并了:
// Returns 'T & U'
function merge<T, U>(x: T, y: U) {
return { ...x, ...y };
}
Object rest 类型自动剔除
const { x, y, z, ...rest } = obj;
当我们使用了 Object rest 语法时,rest
的类型其实是 obj
类型剔除了 x
y
z
这三个 key 的类型,现在 ts 已经能自动做到了!
下面是实现方式:
interface XYZ {
x: any;
y: any;
z: any;
}
type DropXYZ<T> = Pick<T, Exclude<keyof T, keyof XYZ>>;
function dropXYZ<T extends XYZ>(obj: T): DropXYZ<T> {
let { x, y, z, ...rest } = obj;
return rest;
}
通过 Pick
& Exclude
达到剔除 obj 属性的效果,具体可以参考之前的精读:精读《Typescript2.0 – 2.9》。
tsconfig 配置集成支持 node_modules
这是一个福音,以往在 tsconfig.json
为了继承一个配置,我们需要这么写:
{
"extends": "../node_modules/@my-team/tsconfig-base/tsconfig.json"
}
TS3.2 内置了 node_modules 解析,因此就可以更清晰的描述了:
{
"extends": "@my-team/tsconfig-base"
}
内置 BigInt 类型
新增了 bigint
类型,再也不会把 bigint
和 number
混淆了。
declare let foo: number;
declare let bar: bigint;
foo = bar; // error: Type 'bigint' is not assignable to type 'number'.
bar = foo; // error: Type 'number' is not assignable to type 'bigint'.
3 精读
这次改动意图非常明显,是为了跟上 JS 的新语法。随着 JS 规范发展,TS 类型必然要得到补充,像 Object spread 与 Object rest 在项目中使用已经非常普遍了,及时完善类型支持,有助于对项目类型的约束。
strictBindCallApply
基本可以算是对 React 社区的回馈。在 React 很早期的版本是支持函数自动 bind
的,后来觉得过于 magic 就移除了,由于当时没有箭头函数,大家只好在调用处 .bind(this)
一下。
后来有人发现 .bind(this)
会导致函数引用变化,对 Mutable 性能优化不友好,所以许多代码都在 constructor
位置进行类似 this.fooBind = this.foo.bind(this)
这样的赋值,如今 TS3.2 对这种 bind
过后的函数也具备了严格的类型推测,将会有一大批代码从中受益。
顺带一提,最近 Babel 7.2.0 发布,也带来了一些新特性支持,比如:
提前支持私有属性:
class Person {
#age = 19;
#increaseAge() {
this.#age++;
}
birthday() {
this.#increaseAge();
alert("Happy Birthday!");
}
}
提前支持 pipleline Operator:
const result = 2 |> double |> 3 + # |> toStringBase(2, #); // "111"
整个 JS 生态一篇欣欣向荣的景象。不过 TS 对 ES 规范支持还是比较保守的,比如 Babel 6.x 就支持的 optional chain,现在也没有得到支持,原因是 “等待进入 Stage3”。追踪 ISSUE 可以参考:https://github.com/Microsoft/TypeScript/issues/16
如果不清楚 Stage3 的含义,可以阅读前端精读之前的一篇文章:精读 TC39 与 ECMAScript 提案。
4 总结
这次的版本升级几乎没带来什么新语法,只是纯粹的类型检测能力增强,所以如果希望进一步提高代码质量,就尽快升级把。
1、本站所有资源均从互联网上收集整理而来,仅供学习交流之用,因此不包含技术服务请大家谅解!
2、本站不提供任何实质性的付费和支付资源,所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用!
3、本站所有资源仅用于学习及研究使用,您必须在下载后的24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担!
4、本站站内提供的所有可下载资源,本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发),但本站不保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug!如有链接无法下载、失效或广告,请联系客服处理!
5、本站资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您的合法权益,请立即告知本站,本站将及时予与删除并致以最深的歉意!
6、如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
7、如果您喜欢该资源,请支持官方正版资源,以得到更好的正版服务!
8、请您认真阅读上述内容,注册本站用户或下载本站资源即您同意上述内容!
原文链接:https://www.shuli.cc/?p=17722,转载请注明出处。
评论0