TypeScript入门｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 6 天重点内容 ts的好处基本

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

重点内容

ts的好处
基本语法
高级类型
工程应用

详细介绍

ts在2012年10月最初由微软发布，目前前端主流框架都支持ts。

为什么选择ts

js是动态类型语言（执行的时候进行类型匹配），ts是静态类型语言（编译时进行类型匹配）
js和ts都是弱类型语言（自动进行隐式类型转换）
ts代码可读性更强，基于语法解析可以生成文档
ts代码可维护性更强，编译阶段可以暴露大部分错误
ts是js的超集，兼容js特性，支持渐进式引入升级

基本语法

基础数据类型

变量名后面加冒号，再加基础数据类型

const q: string = 'string';
const w: number = 0;
const e: boolean = false;
const r: null = null;
const t: undefined = undefined;

对象类型

只读属性：只能在初始化的时候修改
可选属性：可以不填
任意属性：名字可以任意，只要满足规则

interface IPerson {
  readonly id: number;
  name: string;
  sex: 'man' | 'woman' | 'other';
  hobby?: string;
  [key: string]: any;
}

函数类型

支持函数式定义，也支持接口式定义

function add(x: number, y: number): number {
  return x + y;
}
const mult: (x: number, y: number) => number = (x, y) => x * y;
interface IMult {
  (x: number, y: number): number;
}
const multi: IMult = (x, y) => x * y;

关于函数重载

使用interface进行重载
使用不同的输入-输出组合实现不同的功能

数组类型

前三种实际上是简化写法，前两种比较常见

type IArr1 = number[];
type IArr2 = Array<string | number | Record<string, number>>;
type IArr3 = [number, number, string, string];
interface IArr4 {
  [key: number]: any;
}

补充类型

空类型void
任意类型any
枚举类型enum，可以建立映射
泛型

泛型

我们希望函数传入参数可以任意，但是返回值必须和传入参数类型相同
这个时候使用泛型：不预先指定类型，使用时再指定
可以控制返回值和参数类型相同
在函数前面使用尖括号表示泛型
泛型还可以使用在接口、类等情境下
在类型名称后使用尖括号表示泛型

泛型约束

需要限定泛型的类型的时候使用
extends关键字表明限制
如<T extends string>

泛型参数默认类型

使用=进行指定
如<T = string>

类型别名&类型断言

使用type为一种类型指定别名
使用as为类型断言，确定符合类型

高级数据类型

联合类型/交叉类型

原先写法：类型声明繁琐，有较多重复
联合类型IA | IB：表明是几种类型的其中之一
交叉类型IA & IB：表明是几种类型的叠加（合起来）

类型保护与类型守卫

使用联合类型的时候，出于安全，只能访问属性交集
写一个类型守卫函数解决

/* IA类型有属性a, IB类型有属性b */
function getIsIA(arg: IA | IB): arg is IA {
  return !!(arg as IA).a;
}

通过泛型实现子集类型

需要让一种类型是另一种类型的自己
但事先并不清楚两种类型的传入

interface IMerge {
  <T extends Record<string, any>>(sourceObj: Partial<T>, targetObj: T): T;
}

通过Partial实现，其功能为令T中所有属性变为可选

type Ipartial<T extends Record<string, any>> = {
  [P in keyof T]?: T[P];
}

这个类型的功能等同于Partial

函数返回值类型

定义一个类型，其参数是一个函数，返回类型是传入参数的返回类型

type IDelatCall = <T extends () => any>(func: T) => ReturnType<T>

ReturnType实现的是获取函数的返回类型

type IReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any

ReturnType的实现细节。extends跟随泛型出现时，表示类型推断；infer定义了类型变量，可用于指代类型

ts工程应用

浏览器Web

使用webpack构建
1. 配置webpack loader相关配置
2. 配置tsconfig.js文件
3. 运行webpack应用 / 启动打包
4. loader处理ts文件的时候，会进行编译和类型检查
推荐loader
- awesome-typescript-loader
- babel-loader

Nodejs

使用TSC编译（ts转js）
1. 安装Node和npm
2. 配置tsconfig.js
3. npm安装tsc
4. 用tsc编译得到js文件

个人总结

介绍了ts的一些简单入门知识

TypeScript入门｜ 青训营笔记