区别与联系
- 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文件