想写 TS 的类型体操?先来学学它的基本类型吧😵😵😵1. 基础类型 基础类型就没啥好讲的, TypeScript
1. 基础类型
基础类型就没啥好讲的, TypeScript 最基本的类型,包括 string、number、boolean、null、undefined、void、symbol 等。跟 JavaScript 差不多。
2. 数组类型
数组类型用来表示元素类型一致的数组。可以通过两种方式定义数组类型:
const list: number[] = [1, 2, 3];
const list: Array<number> = [1, 2, 3];
3. 元组类型
元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。
let x: [string, number];
x = ["hello", 10]; // 合法
x = [10, "hello"]; // 不合法
4. 枚举类型
枚举类型用于定义一组命名常量,可以是数字或字符串。
enum Color {
Red,
Green,
Blue,
}
const c: Color = Color.Green;
5. Any 类型
any 类型表示任意类型的值,使用 any 类型可以跳过类型检查。
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;
6. Unknown 类型
unknown 类型表示未知类型的值,类似于 any,但更安全,因为对 unknown 类型的值进行操作之前需要进行类型检查。
let notSure: unknown = 4;
notSure = "maybe a string instead";
notSure = false;
if (typeof notSure === "string") {
console.log(notSure.toUpperCase());
}
7. Never 类型
never 类型表示那些永不存在的值类型,例如总是会抛出错误或无限循环的函数的返回值
function error(message: string): never {
throw new Error(message);
}
8. 函数类型
函数类型用于定义函数的参数类型和返回值类型。
const moment: (x: number, y: number) => number = function (
x: number,
y: number
): number {
return x + y;
};
9. 交叉类型
交叉类型用来组合多个类型成一个类型,表示对象可以同时具有多个类型的成员。
interface Person {
name: string;
}
interface Contact {
phone: string;
}
type PersonContact = Person & Contact;
const contact: PersonContact = {
name: "moment",
phone: "1234567890",
};
10. 索引类型
索引类型允许使用动态属性名来访问类型中的属性。
interface Person {
name: string;
age: number;
}
type PersonKeys = keyof Person; // "name" | "age"
type NameType = Person["name"]; // string
当然,下面是关于 TypeScript 中条件类型、联合类型、递归类型和映射类型的详细讲解。
11. 条件类型
条件类型是一种基于类型的条件判断语法,可以根据条件返回不同的类型。语法如下:
T extends U ? X : Y
这表示如果类型 T
能够赋值给类型 U
,那么返回类型 X
,否则返回类型 Y
。
示例:
type IsString<T> = T extends string ? true : false;
type A = IsString<string>; // true
type B = IsString<number>; // false
12. 联合类型
联合类型允许一个变量可以是几种类型之一。用竖线 |
分隔不同的类型。
示例:
type MyUnion = string | number | boolean;
let value: MyUnion;
value = "Hello"; // 合法
value = 123; // 合法
value = true; // 合法
value = {}; // 不合法
13. 递归类型
递归类型是指类型引用自身的一部分,用于定义复杂的嵌套结构,如树结构、链表等。
示例:
interface TreeNode {
value: string;
children?: TreeNode[];
}
const tree: TreeNode = {
value: "root",
children: [
{ value: "child1" },
{
value: "child2",
children: [{ value: "grandchild1" }],
},
],
};
14. 映射类型
映射类型是一种根据已存在的类型生成新类型的方法。它通过在类型中遍历已有的键来创建新的类型。
示例:
type MyReadonly<T> = {
readonly [P in keyof T]: T[P];
};
type Person = {
name: string;
age: number;
};
type ReadonlyPerson = MyReadonly<Person>;
const person: ReadonlyPerson = {
name: "Alice",
age: 30,
};
person.name = "Bob"; // 报错,name 是只读属性
如下图所示:
总结
通过学习这些基本的类型可以方便我们学习后面更复杂的 ts 类型,例如一些比较复杂的类型体操。
转载自:https://juejin.cn/post/7384992816906977289