TypeScript升级到v4

发表于 更新于 阅读次数： 本文字数： 1.3k 阅读时长 ≈ 2 分钟

今天花了点时间进行了TypeScript的升级，好处是可以进一步使用TS/JS的新特性，比如短路赋值运算符等。这里简单Mark下升级细节。

注意，TS只是类型，原则上升级并不会造成项目任何功能BUG，这点要明确_

升级包

1
2
3
4
5
6
{
 "typescript": "4.0.3"
 "@typescript-eslint/eslint-plugin": "^4.5.0",
 "@typescript-eslint/eslint-plugin-tslint": "^4.5.0",
 "@typescript-eslint/parser": "^4.5.0",
}
  • 以上为主要升级的几个包，其它vendor相关使用，如果出现类型报错，对应升级最新包即可
  • @typescript-eslint相关包之所以需要升级，是因为eslint使用了TS的parser，需要升级来保证对于TS@v4的支持

遇到的几个问题

  1. Parsing error: Cannot read property ‘map’ of undefined

    该问题升级如上的@typescript-eslint相关包即可解决

  2. Property ‘canCostRelief’ does not exist on type ‘never’.

    Error:(1236, 35) TS2339: Property ‘canCostRelief’ does not exist on type ‘never’.

The intersection ‘ISaeFeature & { selected: string; }’ was reduced to ‘never’ because property ‘selected’ has conflicting types in some constituents.

 ISaeFeature本身有selected属性定义，类型为boolean，而这里联合类型为string，所以TS最终类型降为never，因此明确最终真正类型即可解决

  1. This expression is not callable.

    1
    2
    (quoteDetail.quoteLines).every(quoteLine => 	checkQuoteLineMRP(quoteDetail, quoteLine));

    如上quoteLines的类型是A｜B，但是checkQuoteLineMRP函数中对于quoteLine的签名类型是A，因此类型报错，毕竟A与B并不完全兼容，除非B继承了A。

    解决办法即是类型安全，比如quoteDetail.quoteLines as A[]，再比如改变checkQuoteLineMRP类型签名即可。

写在最后

  • 开源虽免费，版本需谨慎。版本升级，从来也都是伴随着坑，当然，升级中遇到问题往往也是个学习的过程。
  • 正如一开始所说，TS的升级可以进一步提升类型安全，同时可以更好的使用JS的新特性，因此，阶段性升级是有benefit的。