Effective TypeScript 中改善TypeScript代码结构的62种方法

[xingbofeng]

• 理解TypeScript和JavaScript的关系
• 理解所使用的TypeScript选项：即tsconfig.json
• 理解TypeScript代码生成类型无关的JavaScript代码（TypeScript做了两件事，一是将高级的JavaScript语法和TypeScript转化为低级的浏览器可运行的JavaScript代码，二是编译时校验类型）
  • 类型错误的代码会报错
  • TypeScript是编译时检查，并不会在运行时检查
  • 类型断言并不会影响真正的返回值（即使使用as语法，也不会发生强制类型转换）
  • 运行时的类型不一定会和声明的类型一致（因为可能并不知道调用者会传什么类型）
  • 不能像C++那样使用函数重载，TypeScript一个函数只能有一个实现
  • TypeScript并不会影响运行时的性能，编译后还是JavaScript
• TypeScript使用结构化类型，而JavaScript使用鸭子类型
• 避免使用any类型
• 使用编辑器来查询和推断类型
• 将类型视为值的集合，这些集合可能是有限的（如boolean，或常值类型），也可能是无限的（如number或string）
• 区别值空间和类型空间
  • 每个值有一个类型，但类型没有值。
  • 'foo'这种字符串可能是一个字符串值，也可能是字符串常量类型
  • 许多运算符和关键字可能在值空间和类型空间里具有不同含义，如this、typeof、& / |操作符、const声明变量但as const推断常量、extends可以用于类继承和接口继承也可以用于限制类型、in可用于for循环遍历也可用于泛型遍历
  • class、enum这种关键字会同时存在类型空间和值空间
• 优先使用类型声明而非类型断言
  • 除非真的确认类型，例如获取DOM时，确认获取的是button的DOM节点，可以断言为HTMLButtonElement
  • 可以使用非null断言

    const $el = document.getElementById('foo'); // $el的类型是HTMLElement | null
    const $el = document.getElementById('foo')!; // $el的类型是HTMLElement

• 不要使用基本包装类型（String、Number、Boolean、Symbol、BigInt），因为直接声明的基本类型不是包装类型，包装类型是为了方便在基本类型值上提供静态方法和实例方法使用，请勿直接用包装类型实例化
  • 请勿使用const str = new String('');，这时str是String类型而非string类型，而要用const str = '';