这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天
简介
发展历史
- 2012-10 正式发布（0.8）
- 2014-10 Angular 支持 TypeScript（2.0版本）
- 2015-04 微软 发布 Visual Studio Code
- 2016-05 React 支持 TypeScript（发布
@types/react） - 2020-09 Vue 支持 TypeScript（3.0版本）
特性
-
静态类型
- 可读性增强
- 可维护性增强
-
弱类型语言
- 兼容所有 JS 特性，支持共存
- 支持渐进式引入和升级
-
JS 超集
编辑器 IDE
- Visual Studio Code
基本语法
基础数据类型
const str: string = 'string';
const num: number = 1;
const bool: boolean = true;
const nu: null = null;
const udf: undefined = undefined;
对象类型
interface Person {
// 只读属性
readonly id: string;
name: string;
// 联合类型
sex: 'male' | 'female' | 'unknown';
age: number;
// 可选属性
hobby?: string;
// 任意属性
[key: string]: any;
}
const p: Person = {
id: '1nahqgeusdhjqjjhqiaeeeee',
name: 'csy',
sex: 'male',
age: 25,
};
函数类型
function add(x: number, y: number): number {
return x + y;
}
const mul: (x: number, y: number) => number = (x, y) => x * y;
// 缺省参数
function foo(x: number, y?: number) {
return x + y ?? 0;
}
数组类型
// 数组类型方括号表示
const arr1: number[] = [12, 34];
// 数组泛型表示
const arr2: Array<number | string> = [1, '2'];
// 元组
const arr3: [number, string, boolean] = [12, '3', true];
// 接口表示
const arr4: {
[key: number]: any;
} = ['1', 5, null, {}, []];
枚举类型
enum Color {
RED,
BLUE,
GREEN,
}
泛型
function print <T> (x: T) {}
interface Print <T> {
do: (t: T) => void;
}
class PrintClass <T> {
value: T;
}
// 泛型约束
function print <T extends number> (x: T): void {}
// 泛型参数默认值
function print <T = number> (x: T): void {}
类型别名&类型断言
// 类型别名 type 关键字
type numberArray = Array<number>;
// 类型断言 as 关键字
const c: number = [].findIndex(v => v === 10) as number;
字面量类型
type tag = 'html' | 'head' | 'body';
高级类型
联合类型&交叉类型
type book = string | object;
type Book = { name: string; type: string } & { type: string; author: string };
类型保护&类型守卫
访问联合类型时，出于安全考虑，仅能访问联合类型的交集部分
interface A {
a: number
b: number
}
interface B {
b: number
c: number
}
// 类型谓词 is 关键字
function getIsA(arg: A | B): arg is A {
return !!(arg as A).a;
}
function log(arg: A | B) {
console.log(getIsA(arg) ? arg.a : arg.c);
}
// 类型保护
// 使用 instanceof 关键字 或 typeof 关键字
高级类型
// 关键字 keyof 取出对象所有 key 构成的字符串字面量联合类型
// 关键字 in 取出字符串字面量的一种可能
// 关键字 ? 自动推导子集类型
// 关键字 extends 表示类型推断
// 关键字 infer 定义类型变量，用于指代类型
type Partial <T> = {
[P in keyof T]?: T[P];
}
type Required <T> = {
[P in keyof T]-?: T[P];
}
type Readonly <T> = {
readonly [P in keyof T]: T[P];
}
type Pick<T, K extends keyof T> = {
[P in K]: T[P];
}
type Record<K extends keyof any, T> = {
[P in K]: T;
}
type Exclude<T, U> = T extends U ? never : T;
type Extract<T, U> = T extends U ? T : never;
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
type NonNullable<T> = T & {};
type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any> ? P : never;
type ConstructorParameters<T extends abstract new (...args: any) => any> = T extends abstract new (...args: infer P) => any ? P : never;
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : never;
type InstanceType<T extends abstract new (...args: any) => any> = T extends abstract new (...args: any) => infer R ? R : never;
工程应用
-
webpack
- 配置 loader
ts-loaderbabel-loader - 配置 tsconfig.json
- 运行 webpack 启动&打包
- loader 处理 ts 文件时，会进行编译和类型检查
- 配置 loader
-
tsc
- typescript 官方编译器
npm i typescript -g- 全局安装
