typescript

​区别与联系

• JavaScript
  • 动态类型
  • 弱类型
• TypeScript
  • 包含于兼容所有JS特性，支持共存
  • 支持渐进式引入与升级
  • 可读性增强：基于语法解析TSDos，ide增强
  • 可维护性增强：在编译阶段暴露大部分错误=>多人合作的大型项目中提高稳定性和开发效率
  • 静态类型
  • 弱类型语言
  • JS的超集

基本语法

JS：

const q = 'string';
/*字符串*/
const w = 1;
/*数字*/
const e = true;
/*布尔值*/
const r = null;
/*null*/
const t = undefined;
/*未定义*/

TS：

属性名: 属性类型 = 属性值;
const q: string = 'string';
/*字符串*/
const w: number = 1;
/*数字*/
const e: boolean = true;
/*布尔值*/
const e: null = null;
/*null*/
const t: undefined = undefined;
/*undefined*/

对象类型

const bytedancer: IBytedancer = {
jobID: 9303245,
name: 'Lin',
gender: 'man',
age: 20,
}
/*对象实例*/
​
interface IBytedancer {
属性名: 属性类型
readonly jobID: number; /*只读属性：不可在对象初始化    外赋值*/
name: string;
gender: 'man' | 'woman' | 'other';
age: number;
hobby?: string; /*可选属性: 该属性可以不存在*/
[key: string]: any; /*任意属性: 自定义属性必须是该属    性的子类型*/
}
/*对象定义*/

补充类型

• 空类型，表示无赋值
• 任意类型，是所有类型的子类型
• 枚举类型，支持枚举值到枚举名的正、反向映射

泛型

不预先指定具体的类型，而在使用的时候再指定类型的一种特性

• 泛型接口&多泛型

    interface IX<T, U> {
        key: T;
        val: U;
    }
  

• 泛型类

    class IMan<T> {
        instance: T;
    }
  

• 泛型别名

    type ITypeArr<T> = Array<T>
  

• 泛型约束：限制泛型必须符合字符串

• 泛型参数默认类型

字符串/数字 字面量

允许指定字符串/数字必须的固定值

高级类型

联合/交叉类型

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

类型保护与类型守卫

• 类型守卫：定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域
• 联合类型+类型保护=自动类型推断
• 索引类型：关键字【keyof】，相当于取值对象中的所有Key组成的字符串字面量

工程应用

Webpack

• 配置webpack loader相关配置
• 配置tsconfig.js相关文件
• 运行webpack启动，打包
• loader处理ts文件时，会自动进行编译与类型检查

使用TSC编译

• 安装node与npm
• 使用npm安装tsc
• 配置tsconfig.js文件
• 使用tsc运行编译得到js文件