TypeScript实践总结

TypeScript 实践总结

以下将 TypeScript 简称 ts

一、为什么要学

1. 减少 bug，提高质量

强语言，语法等方面异常，编译阶段“提前”报错

支持面向对象，软件设计与工程化更为成熟，更容易做单元测试、持续集成等

2. 提高效率

语言简单易学

ide 支持更为友好，如：智能提示、变量强关联、重构等

绝大部分 常用类库 已经支持

3. 业内趋势

GitHub 年度报告：TypeScript 超越 C++成第四大语言

ts 成为腾讯 2020 年增速第二的语言，仅次于 go

4. 代表作品

越来越多前端类库改用 ts

github 上使用 ts 开发仓库-按 star 降序

• vscode
• node 下一代-deno
• angular
• nest
• apollo-client
• .... 不一一举例

二、练级攻略

1. 基础语法

typescript 入门教程：内容少，易上手

官方手册：相对全面

2. 编码风格

谷歌-ts 代码风格指导

3. 核心功能

tsconfig.json

接口

泛型

高级类型

面向对象

程序设计

• 代码
• 重构
• 设计模式

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 的缺点

1. 不得已的 any 类型

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

存在原因：

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

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

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

2. 复合类型没必要

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

3. 面向对象不彻底

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

4. JS 本身诸多缺点

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

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

5. 编译慢，编译后代码可读性低

九、最佳实践

整洁的 js 代码：整洁的 js 代码-中文翻译

将超过 5000 万行 JS 代码迁移到 TypeScript，我们得到的 10 大见解

Typescript Best Practices

TypeScript 系列（五）最佳实践