yarn create umi [app-name]

选择 antd pro + TypeScript 其它一路 NEXT 创建一个本地代码库。

代码片段📒

image.png
图 1 路由的定义

image.png
图 2 组件 Props 的定义

image.png
图 3 一个 FunctionComponent

image.png
image.png
图 4 HTTP 接口的定义

一些思考💡

使用 TS 的初级收益

  1. 配置文件 config.ts 有类型提示及检查，config.d.ts 类型定义可以兼作文档。
  2. 对外部组件尤其是 antd 等常用类库的引用方便了，组件 props 调用方便，节约查文档时间。
  3. HTTP 接口的入参与返回值可以类型化，结合接口代码自动生成工具（例如：OneAPI），可以大幅提效。
  4. 这些初级收益都是几乎零成本获取的，只要你有一个靠谱的 TS 脚手架，如：antd pro 😄

一些进阶的收益

  1. 给组件加上类型，语义更加清晰。

image.png

  1. 可以一路下钻，研究依赖的代码，不用看实现细节，光是看类型的定义也可以加深对源码的理解。

image.png

  1. 复杂项目中 push 开发者通过先定义类型，想清楚代码设计。

一些留白疑问🤔️

  • 历史存留 JS 项目如何平滑升级至 TS？升级成本高的话，收益也会被抵消。
  • 类型定义是有成本的，哪些场景进行类型定义是收益比较高的？须要一个最佳实践。