TypeScript使用总结

1. 为什么要学

1). 减少bug，提高质量

强类型、强语言【枚举、接口、泛型...】，代码更健壮，语法等异常，编译阶段能“提前”报错

2). 面向对象

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

3). 提高效率

• 语言简单易学，尤其是有C#、java基础的后端同学
• 相比js，代码简洁易读，大型项目实现相同的功能代码量更少
• ide支持更为友好，如：智能提示、变量强关联、重构等
• 绝大部分常用类库已经支持智能提示

4). 业内趋势

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

• 代表作品github上使用ts得repo-按star降序

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

2. 练级攻略

• 基础语法

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

• 编码风格

  • 谷歌-ts代码风格指导

• 核心功能

  • tsconfig.json
  • 面向对象
  • 泛型
  • 编译 -> 包大小

• 软件工程

  • 单元测试
  • 重构
  • 设计模式
  • 面向对象-Java编程思想

3.适用场景

• 适合：1)框架、类库组件开发；2)业务开发。尤其适合框架、类库组件开发，建议先将类库组件ts，逐步向业务开发推广

4. 推荐ide

新手 webstorm > vscode，老手反之

• webstorm特点

  • 优点：开箱即用(无需安装插件)、易于重构【个人觉得非常重要】
  • 缺点：收费、没idea成熟
  • 长期：还是要被VSC碾压的

5. 推荐书籍

• TypeScript入门与实战

  • 推荐级别A，理由：介绍全面，适合入门及进阶

• 深入理解TypeScript

  • 推荐级别B，理由：入门及编译简介

6. 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"
  ]
}

7. 看法

ts将会是web前端开发首选语言

ts是js的超集，不是替代物

• 写好ts，还得先学好js
• 再学习ts语法及面向对象设计
• 关注ts编译原理及编译结果

不得已存在的any类型

• 产生问题：any类型，不支持强类型、智能提示等，相当于把ts回退到js
• 问题原因：1)兼容，老代码及外部依赖如WEBAPI返回的参数类型，在不同浏览器或不同版本的相同浏览器都不一样，只能定义为any类型；2)类库不健全，lid.d.ts不全面，导致部分属性、方法的类型描述不完整，得再类型定义后添加" | any" 组合类型才能满足需求，不得不用any类型
• 改进办法：有明确的复合类型，可以通过组合类型来定义类型，如: age: int | any，比纯any，IDE能添加int类型相关的智能提示和语法报错

复合类型没必要

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

面向对象不彻底

• 不支持重载
• 方法默认是public修饰符

面向对象的边界

• 服务端开发，如使用nestjs等框架，建议所有代码都面向对象，甚至可以借鉴java spring，使用面向接口编程，解决依赖倒置的需求
• 客户端开发，部分场景下，过度使用面向对象，可能会导致包体积变大，需要留意

8. 业内实践

• 整洁的js代码
• 整洁的js代码-中文翻译
• 将超过5000万行JS代码迁移到TypeScript，我们得到的10大见解
• Typescript Best Practices
• TypeScript系列（五）最佳实践