这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

为什么学习TypeScript

历史

语言优势

• JS
  • 动态类型
  • 弱类型语言
• TS
  • 静态类型
  • 弱类型语言
• 动态类型
  • 执行阶段确定类型匹配
• 静态类型
  • 执行前
  • 优点
    • 可读性强
    • 可维护性强
    • 稳定和效率
• 弱类型语言
  • 类型转换
• TS优点
  • 包含所有JS特性，支持共存
  • 支持渐进式引入与升级

基础语法

基础数据类型

• const name: type-name = x;

  • name是变量名称

  • type-name是数据种类（基础数据类型可以不用）

  • x是赋值

对象类型

• interface IBytedancer { ​ name: string;

  ​ /* 只读属性：约束属性不可在对象初始化外赋值 / ​ readonly jobId: number; ​ / 可选属性：定义该属性可以不存在 */

  ​ hobby?: string; ​ /* 任意属性：约束所有对象属性都必须是该属性的子类型 */ ​ [key: string]: any; ​ }

• const bytedancer: IBytedancer = {

  ​ jobId: 1,

  ​ name: 'Lin',

  }

函数类型

• function add(x, y){

  ​ return x + y;

  }

• const mult = (x, y) => x * y;

• interface IMult{

  ​ (x: number, y: number): number;

  }

  const muit: IMult = (x, y) => x * y;

数组类型

• type IArr1 = number[];

• type IArr2 = Arrary<string \ number \ Record<string, number>>;

• type IArr3 = [number, number, string, string];

• interface IArr4 {

  [key: number]: any;

  }

空类型

• type IEmptyFunction = () => void;

任意类型

• type IAnyType = any;

枚举类型

• enum EnumExample {

  ​ add = '+',

  ​ mult = '*',

  }

泛型

• 不事先指定类型，在使用时确定
• type name = (target: T) => T[];
• 泛型约束
  • <T extends string>
• 泛型默认类型
  • <T = number>

高级类型

联合交叉类型

• 联合类型
  • IA | IB
  • 表示一个值可以是几种类型之一
• 交叉类型
  • IA & IB
  • 表示多种类型叠加到一起成为一种类型，它包含了所需所有类型的特性
• 例
  • 

类型保护与类型守卫

• 问题
  • 访问联合类型，只能访问交集部分
• 类型保护与类型守卫
  • 
  • 

Merge 函数类型实现

• 
• 类型定义时不明确，使用时明确
• 

函数返回值类型

• 
• 也是使用前不明确
• 

TypeScript 工程应用

• webpack
  • 配置webpack loader相关配置
  • 配置tscongif.js文件
  • 运行webpack启动/打包
  • loader处理ts文件时，会进行编译与类型检查
    • 相关loader：
      • awesome-typescript-loader
      • babel-loader
• 使用TSC编译
  • 安装Node与npm
  • 配置tscongif.js文件
  • 使用npm安装tsc
  • 使用tsc运行编译得到js文件