likes
comments
collection
share

想写 TS 的类型体操?先来学学它的基本类型吧😵😵😵1. 基础类型 基础类型就没啥好讲的, TypeScript

作者站长头像
站长
· 阅读数 15

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 的类型体操?先来学学它的基本类型吧😵😵😵1. 基础类型 基础类型就没啥好讲的, TypeScript

总结

通过学习这些基本的类型可以方便我们学习后面更复杂的 ts 类型,例如一些比较复杂的类型体操。

转载自:https://juejin.cn/post/7384992816906977289
评论
请登录