TypeScript现在的普及度已经很高了，虽然它是一种静态类型定义，但它的庞大已足够我们要向对待一门语言一样对待它了，去深入学习，以便更好的利用它的能力。
当然了，我们首先要明确为什么需要它，而不是把它当作一种负担：
- 编译时类型检查，避免了运行时才检查的数据类型错误，导致系统奔溃。
- 提升开发效率，IDE基于类型系统提供了精准的代码补全、接口提示。减少了查询文档、查询API的成本。
- 增强了代码可读性，通过类型注解帮助成员快速理解函数输入、输出，降低了协作成本。
类型系统基石
像一门语言有基本的语法一样，TypeScript也有基本的类型定义，这些基本类型对应JavaScript中的基本数据类型，包括number、string、boolean、null、undefined、symbol、bigint、object。
const name: string = "hboot";
const age: number = 18;
const message: string = `hello, ${name}`
const uniqueKey: symbol = Symbol("key");
空类型、任意类型、未知类型
void表示空类型，any表示任意类型，unknown表示未知类型。
-
void 常用于函数无返回值时的返回类型声明；
-
any 表示任意类型，失去了类型检查的能力，非必要不要用；
-
unknown 表示未知类型，可以用来代替any，但是它不能直接用，必须通过类型断言或类型守卫明确具体类型才能操作。
-
never 表示没有任何类型，变量和函数返回不会存在任何实际值。它是所有类型的字类型，可以赋值给任意类型。
function noReturn(msg: string): void {
console.log(msg);
}
let name: any = "admin";
// 可以任意赋值
name = 123;
// 甚至是当作函数调用,这导致开发不易发现，运行时才报错
name():
let age: unknown = 18;
// 类型为未知，无法直接操作
age += 10;
// 通过类型守卫，明确类型为 number
if(typeof age === 'number') {
age += 10;
}
复合类型
复合类型就是基础类型的组合，包括数组、对象、元组、枚举、类。
数组
数组的类型定义T[]或Array<T>
// 数组
let names: string[] = ['admin', 'user'];
let names: Array<string> = ['admin', 'user'];
对象
对象类型定义对象的属性名、属性类型。属性支持可选、只读、索引签名。
// 对象
let user: { name: string; age: number } = {
name: 'hboot',
age: 18
}
元组
元组是明确了数组长度以及元素类型的。
// 元组
let userInfo: [string, number] = ['hboot', 18];
枚举
枚举用于定义一组有特殊含义的常量，比如状态码、类型标识等。
// 枚举
const enum Status {
Success = 200,
Fail = 500
}
未赋值时，枚举值从 0 开始递增。如果自定义了开始值，则后面的值递增。
const enum Status {
Success, // 0
Fail // 1
}
const enum Status {
Success = 1, // 1
Fail // 2
}
可以通过const enum修饰枚举定义，在编译时仅保留常量值，减少代码体积。
类Class
类class是面向对象编程的核心。es6中已经增强了对类的支持，可以通过类定义对象，明确属性、方法。类不仅可以用来创建实例，也可以作为类型注解描述实例类型。
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
}
类的定义包括实例属性、实例方法、静态属性、静态方法，同时还支持通过访问修饰符控制成员可见。
子类可以通过extends继承父类的非private成员，重写父类方法。仅能继承一个父类。
class Dog extends Animal {
WangWang() {
return "WangWang";
}
}
类可以通过implements实现接口，用于约束类的实现，包括属性、方法，仅约束结构，不提供实现。可实现多个接口
interface Animal {
name: string;
speak(): void;
}
class Dog implements Animal {
name: string;
speak(): void {
console.log("WangWang");
}
constructor(name: string) {
this.name = name;
}
}
通过abstract关键字可以声明抽象类，抽象类不能被实例化。它只定义了字段、方法结构，未实现具体逻辑，它仅可被子类继承，并需要实现它定义的所有抽象成员。
高级类型
基础类型可以满足绝大多数业务，但面对复杂业务需要类型复用、条件判断、属性筛选则需要高级类型。
复用类型
为了复用类型，可以通过type \ interface定义类型。type可以定义任意类型，包括基础类型、复合类型、联合类型等，比较灵活；interface 只能定义对象类型,但是可以继承和同名合并。
// type
type Age = number;
type User = {
name: string;
age: Age;
}
type Status = 'success' | 200;
// interface
interface User {
name: string;
age: number;
}
interface SuperUser extends User {
role: string;
}
interface 不同于类class,它可以继承多个接口。
联合/交叉类型
联合类型通过|表示变量可以是任意其中一种类型；交叉类型通过&表示变量必须同时满足多个类型。
联合类型使用时需要类型守卫明确类型后才能操作,如果变量已经赋值，则会自动推导出类型；
type Age = number | string;
let age: Age = 18;
age+=2;
function agePlus(age: Age){
if(typeof age === 'number'){
age+=2;
}
return age;
}
交叉类型常用合并对象类型，需要满足所有类型条件。如果无法满足所有类型条件，则该类型为never
type User = {
name: string;
}
type Address = {
address: string;
}
type UserAddress = User & Address;
泛型
泛型是将类型参数化，可以不指定具体类型来定义函数、类、接口。在使用时在传入具体类型，它可以高度抽象定义类型，保障类型复用和类型安全。
// 函数泛型
function getData<T>(data: T): T {
return data;
}
// 接口泛型
interface IData<T> {
data: T;
}
// 类泛型
class Data<T> {
data: T[] = [];
}
因为不知道具体类型，就无法获知这个类型有什么属性，可以调用什么方法。为了使用某个属性或者某个方法，我们使用泛型约束来指定这个类型必须有哪些属性或者方法。
function getData<T extends { name: string }>(data: T): string {
return data.name;
}
在调用具有泛型的类型时，需要传递具体类型，有时候这个泛型我们知道在很多情况下就是某一个类型，避免重复传入，我们可以指定泛型的默认类型，从而在使用时不再需要传入。
type User = {
name: string;
}
function getData<T extends User = User>(data: T): string {
return data.name;
}
泛型约束和默认类型不需要同时出现，也可以定义其一，根据需求使用。
类型运算
除了定义具体类型，还可以通过类型运算从一个类型得到一个新的类型。也可以称之为推导，从一个类型推导为另一个类型。类型运算也是导致一些复杂类型产生的因素。
类型守卫
类型守卫是在运行时判断数据类型，它可以精准到具体类型，用于类型收窄，包括unknown、联合类型、类继承。关键字包括typeof instanceof in is
typeof 用于判断基础类型。但是无法判断 null，typeof null 返回 'object'，可通过value!==null 进行判断。
function agePlus(age: string | number) {
if (typeof age === "number") {
age += 2;
}
return age;
}
instanceof 判断是否为某个类实例。
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
}
class Dog extends Animal {
WangWang() {
return "WangWang";
}
}
class Cat extends Animal {
MiaoMiao() {
return "MiaoMiao";
}
}
function speak(animal: Animal) {
if (animal instanceof Dog) {
return `${animal.name}:${animal.WangWang()}`;
}
if (animal instanceof Cat) {
return `${animal.name}:${animal.MiaoMiao()}`;
}
return `${animal.name}`;
}
in 适用于对象类型定义，用于判断是否包含某个属性
type Dog = {
a: string;
b: number;
};
type Cat = {
d: string;
c: number;
};
function getAttr(animal: Dog | Cat) {
if ("b" in animal) {
return animal.a;
}
if ("d" in animal) {
return animal.c;
}
return "unknown";
}
is 用于精准明确是什么类型，但是判断逻辑是我们自己写的，这就要求我们判断逻辑要精确，否则可能导致运行时错误。
type Dog = {
a: string;
b: number;
};
type Cat = {
d: string;
c: number;
};
// 内部逻辑自定义判断是否为某个类型
function isDog(animal: Dog | Cat): animal is Dog {
return "b" in animal;
}
function getAttr(animal: Dog | Cat) {
// 调用时如果为true，则推导为Dog
if (isDog(animal)) {
return animal.a;
} else {
return animal.c;
}
}
类型断言
类型断言是将一个类型临时转为另一个类型，仅在编译阶段告诉TypeScript是什么类型，不能改变变量的实际类型。
类型断言需要开发者明确保证断言类型正确，否则可能会导致运行时异常。对于不确定的类型，因该优先使用类型守卫.
使用as断言类型，可以转unknown类型、父类型转子类型场景。
let age: unknown = 34;
// 可以断言类型为string，从而调用字符串的方法。
// 但是在运行时会报错
(age as string).toUpperCase();
还可以通过as const断言为只读常量，常用于固定值的类型约束。
// 类型为 string
const name = "hboot";
// 类型为字面量 "hboot" 类型
const name = "hboot" as const;
使用!断言非空，常用于访问某个可选属性时，断言非空
type Cat = {
d?: string;
c: number;
};
let cat: Cat = {
c: 20,
};
// 未断言时调用报错属性 d 可能未定义
// cat.d.toUpperCase();
// 断言非空后则不会再提时报错，但是运行时报错
cat.d!.toUpperCase();
所以，断言要谨慎使用、避免滥用，确保断言的类型是是实际数据类型的兼容类型。
还可以通过双层断言将一个明确的类型断言为另一个类型。
这个操作很危险，实例中将string类型断言为Cat对象类型去访问属性c,编译通过，运行时爆炸。
type Cat = {
d?: string;
c: number;
};
let name = "hboot";
(name as unknown as Cat).c;
运算符
运算符可以从一个类型的到另一个类型。类型安全，类型运算的操作有很多
keyof 得到对象类型的所有字段key类型构成的联合类型。
type Cat = {
d?: string;
c: number;
};
// 得到 Cat 的所有字段 key 类型 联合类型 "d" | "c"
type Keys = keyof Cat;
// 如果字段是索引签名，则返回索引签名的类型
type Cat = {
[x: string]: unknown;
};
// 得到的是索引签名类型 string
type Keys = keyof Cat;
typeof 之前再类型守卫里已经介绍过了，它可以返回变量的类型（基本类型）。
索引访问（IndexedAccessType）获取类型,比如我们要获取对象类型里某个字段的类型，就可以使用索引获取。
type Cat = {
d?: string;
c: number;
};
// 获取字段类型为 string，但由于字段是可选 ？，
// 所以返回的是 string | undefined
type D = Cat["d"];
也可以通过联合类型获取到多个字段的类型，结果为一个联合类型。
type D = Cat["d"|"c"]
// 如果想要获取所有字段类型,可以通过keyof 获取到所有key的联合类型
type D = Cat[keyof Cat]
索引最重要的一点是可以对数组、元组元素的类型索引获取.
type names = [string, number];
// 索引第一个元素的类型
type Name = names[0];
type Names = Array<string>;
// 索引数组元素的类型
type Name = Names[number];
还可以搭配typeof 对变量的类型进行索引获取。
条件类型（ConditionalType），通过输入的类型，决定输出类型，通过extends关键字和三元表达式来标识。
type Name<T> = T extends string ? string : number;
// 输入泛型参数返回类型，
// 输出类型为 string
type Admin = Name<string>;
// 输出类型为 number
type User = Name<unknown>;
也可以声明一个函数书写更复杂的判断逻辑。既然通过extends关键字以及泛型参数，那么也可以增加泛型约束、泛型默认值。
映射类型（MappedType）,从一个类型创建一个新类型,建立在索引签名语法之上,通过对对象的字段键值、字段类型进行转换操作。
type Cat = {
name?: string;
age: number;
};
type ToFunction<T> = {
[K in keyof T]: () => T[K];
};
// 从基本类型转换成函数类型
type CatFunction = ToFunction<Cat>;
/**
* type CatFunction = {
* name?: (() => string | undefined) | undefined;
* age: () => number;
* }
*/
文本类型（LiteralType），通过扩展字符串生成文本类型，表现同字符串字面值相同。
type Name = "hboot";
type GoodName = `Good, ${Name}`;
利用文本类型扩展，可以结合映射类型，改变键值，得到一个全新的类型。
type ToFunction<T> = {
[K in keyof T as `on_${string & K}`]: () => T[K];
};
// 就会得到不同键值、不同类型的新对象类型
type CatFunction = ToFunction<Cat>;
/**
* type CatFunction = {
* on_name?: (() => string | undefined) | undefined;
* on_age: () => number;
* }
*/
infer 类型推断，通常用于泛型参数推导；函数返回值类型推导
type Name<T> = T extends Array<infer U> ? U : T;
// 条件类型推导 得到数组元素类型 string
type str = Name<string[]>;
// 非数组类型，返回原类型 { name: string }
type info = Name<{ name: string }>;
内置工具函数
除了上述我们要手动去实现逻辑从而创建新的类型外，提供了内置函数可以直接使用，这些工具提供一些常用的类型转换逻辑。
Partial<T> 得到一个新类型，定义类型所有的字段都是可选的，与之相反的是Required<T>
type Cat = {
name?: string;
age: number;
};
type NewCat = Partial<Cat>;
/**
* type NewCat = {
* name?: string;
* age?: number;
* }
*/
type RequiredCat = Required<Cat>;
/**
* type RequiredCat = {
* name: string;
* age: number;
* }
*/
Pick<T,Keys> 从一个类型中选择某些字段得到一个新类型，Omit<T,Keys>从一个类型中删除某些字段得到一个新类型
type Cat = {
name?: string;
age: number;
};
type NewCat = Pick<Cat, 'name'>;
/**
* type NewCat = {
* name?: string;
* }
*/
type NewCat = Omit<Cat, 'age'>;
/**
* type NewCat = {
* name?: string;
* }
*/
Readonly<T> 得到一个新类型，定义类型所有的字段都是只读的,初始化后不可以修改
type Cat = {
name?: string;
age: number;
};
type ReadonlyCat = Readonly<Cat>;
let cat: ReadonlyCat = {
name: "hboot",
age: 18,
};
// 报错，不可以修改再赋值，属性是只读的
// cat.age = 20;
它没有与之相反定义的工具，怎么处理让所有只读属性都变为可编辑的呢？还记得上面讲过的映射类型吗？
在映射类型中通过使用-符号将所有字段的readonly修饰符都移除掉
type MutableType<T> = {
-readonly [K in keyof T]: T[K];
};
let cat: MutableType<ReadonlyCat> = {
name: "hboot",
age: 18,
};
// 通过映射类型 -readonly 移除掉属性的只读修饰符
cat.age = 20;
Record<Keys,T> 可以创建一个由Keys组成的属性对应类型为T的对象类型
type Animal = Record<
"dog" | "cat",
{
name: string;
age: number;
}
>;
/**
* type Animal = {
* dog: {
* name: string;
* age: number;
* };
* cat: {
* name: string;
* age: number;
* };
* }
*/
Exclude<U,T>从指定联合类型U排除某个满足 T类型的成员，得到新类型；与之相反的是Extract<U,T>
type Type = Exclude<"name" | "age" | 32, number | "name">;
/**
* type Type = "age"
*/
type Type = Extract<"name" | "age" | 32, number | "name">;
/**
* type Type = "name" | 32
*/
NonNullable<Type>排除null和undefined的成员，得到新类型
Parameters<Type> 从函数类型提取函数的参数类型，得到一个元组类型,非函数类型定义得到never类型。
type Fun = (name: string, age: number) => void;
type Params = Parameters<Fun>;
/**
* type Params = [name: string, age: number]
*/
ConstructorParameters<Type> 从构造函数类型提取构造函数的参数类型，得到一个元组类型或数组类型
type FunConstructorParams = ConstructorParameters<FunctionConstructor>;
/**
* type FunConstructorParams = string[]
*/
type ErrorConstructorParams = ConstructorParameters<ErrorConstructor>;
/**
* type ErrorConstructorParams = [message?: string, options?: ErrorOptions]
*/
ReturnType<Type> 从函数类型提取函数的返回值类型,对于非函数类型会得到any.
Awaited 用来获取异步函数的返回值类型
type Fun = () => Promise<{ data: string }>;
type FunType = Awaited<ReturnType<Fun>>;
/**
* type FunType = {
* data: string;
* }
*/
InstanceType<Type> 从构造函数类型提取构造函数的实例类型
type Fun = new () => { name: string };
type FunType = InstanceType<Fun>;
/**
* type FunType = {
* name: string;
* }
*/
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
}
type AnimalType = InstanceType<typeof Animal>;
/**
* type AnimalType = Animal
*/
NoInfer<T>阻止从该处推导泛型参数类型
function compare<T extends string>(a: T[], b?: NoInfer<T>) {
console.log(a, b);
}
// 锁定了泛型 T 类型是 "admin" | "test" , 所以传入参数 "hboot" 会提示报错
// 如果没有 NoInfer 则不会报错，推断类型 string
compare(["admin", "test"], "hboot");
ThisParameterType<T> 提取函数类型中的this参数的类型，如果没有this参数则返回unknown
OmitThisParameter<Type> 移除函数类型中的this参数，得到一个新的函数类型，如果没有this参数或不是函数类型则返回类型本身。
ThisType<Type> 用于指定方法上下文中的this类型，不会返回新类型,指定后在方法中就可以通过this访问到指定属性。但是需要开启noImplicitThis（tsconfig.json）标志才可以使用。
interface Animal {
name: string;
}
type Dog = {
speak(): void;
} & ThisType<Animal>;
const dog: Dog = {
speak() {
// 通过this 可以访问到 name 属性
console.log(this.name);
},
};
文本类型工具，用于处理文本，包括:
-
Uppercase<StringType> 将字符串转换为大写
-
Lowercase<StringType> 将字符串转换为小写
-
Capitalize<StringType> 将字符串的第一个字符转换为大写
-
Uncapitalize<StringType> 将字符串的开头字符转换为小写
命名空间
通过关键字namespace 定义空间名，用于分组相关的类型和值，避免命名冲突。并可通过export导出供外部使用
namespace Hboot {
//外部无法访问
const name = "hboot" as const;
// 外部可以访问
export function getName() {
return name;
}
}
Hboot.getName();
登录
