TypeScript实践总结

下文将TypeScript简称ts

一、为什么要学

1.1 减少bug，提高质量

• 强语言，语法等方面异常，编译阶段“提前”报错
• 支持面向对象，软件设计与工程化更为成熟，更容易做单元测试、持续集成等

1.2 提高效率

• 语言简单易学
• ide支持更为友好，如：智能提示、变量强关联、重构等
• 绝大部分常用类库已经支持

1.3 业内趋势

• GitHub年度报告：TypeScript超越C++成第四大语言
• ts成为腾讯2020年增速第二的语言，仅次于go

1.4 代表作品

• 越来越多前端类库改用ts
• github上使用ts开发仓库-按star降序
  • vscode
  • node下一代-deno
  • angular
  • nest
  • apollo-client
  • ....不一一举例

二、练级攻略

2.1 基础语法

• typescript入门教程：内容少，易上手
• 官方手册：相对全面

2.2 编码风格

• 谷歌-ts代码风格指导

2.3 核心功能

• tsconfig.json
• 接口
• 泛型
• 高级类型
• 面向对象
• [程序设计]
  • 代码
  • 重构
  • 设计模式

2.4 编译原理

三、适用场景

尤其适合：类库、组件等公共组件开发

四、推荐ide

webstorm > vscode

优点： 开箱即用(无需安装插件)、易于重构【个人觉得非常重要】

缺点： 收费、没idea成熟

五、推荐书籍

• TypeScript入门与实战
  • 推荐级别A，理由：介绍全面，适合入门及进阶
• 深入理解TypeScript
  • 推荐级别B，理由：入门及编译简介

六、tsconfig.json配置demo

{
  "compilerOptions": {
    "pretty": true,
    "module": "commonjs",
    "importHelpers": true,
    "target": "es5",
    "lib": [
      "es2015",
      "es2016",
      "es2017",
      "es2018",
      "es2019",
      "dom",
      "ES2015.Promise"
    ],
    "allowJs": true,
    "sourceMap": false,
    "baseUrl": "./src",
    "outDir": "./build/src/",
    "paths": {
      "@/*": [
        "*"
      ],
      "tslib": [
        "path/to/node_modules/tslib/tslib.d.ts"
      ]
    },
    //编译异常时候，禁止发行
    "noEmitOnError": true,
    //禁止隐性any
    "noImplicitAny": true,
    //严格的null检查，避免如可选参数，未判断undefined引发的问题等
    "strictNullChecks": true,
    //未使用的变量，抛出错误
    "noUnusedLocals": true,
    //未使用的参数，抛出错误
    "noUnusedParameters": true,
    //检查函数是否有返回值
    "noImplicitReturns": true,
    //启用严格模式，对类型赋值、类型转换更严格
    "strict": true,
    //https://mariusschulz.com/blog/downlevel-iteration-for-es3-es5-in-typescript
    "downlevelIteration": true
  },
  "typeRoots": [
    "node_modules/@types",
    "typings"
  ],
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "test"
  ]
}

八、ts的缺点

8.1 不得已的any类型

存在后的坑： any类型，不支持强类型、智能提示等，相当于把ts回退到js

存在原因：

1.兼容性，老代码及外部依赖如webapi接口返回参数类型不确定，只能用any类型；

2.类库不健全，lid.d.ts不全面，导致部分属性、方法的类型描述不完整，得通过添加|any组合类型才能满足需求，不得不用any类型。

改进办法： 有明确类型的通过组合类型来完成类型定义，如: age:int | any，比纯any，IDE能添加相关的属性智能提示及部分错误使用场景下的错误提示

8.2 复合类型没必要

组合类型、交叉类型、索引类型、映射对象类型，意义不大，适用场景少，易滥用，明显降低可读性。js的问题是语言太随意，导致很多程序员把大量的时间浪费在语法上，多向golang学一下

8.3 面向对象不彻底

不支持重载：c#、java没抄好？不是，是底层js不支持

8.4 JS本身诸多缺点

（1）js是门非常容易出bug的语言，当下统计数据多数不准。原因在于生产环境js运行在客户端浏览器，出了bug，要么没前端监控，要么没被QA发现。

（2）js上手很容易，学好很难，一种需求，有N种编码方案，沟通交流成本很高

9. 最佳实践

• 整洁的js代码
• 整洁的js代码-中文翻译
• 将超过5000万行JS代码迁移到TypeScript，我们得到的10大见解
• Typescript Best Practices
• TypeScript系列（五）最佳实践
• ts面向对象边界？建议服务端：尽量面向对象编程；客户端：关注打包大小及编译后的js代码，易复用的业务逻辑抽象为类，工具类还是使用传统的面向过程的方式
• 减少any类型
• ......TODO待补充