正文

掌握 TypeScript 类型系统，轻松编写健壮代码

/0 浏览量
1104

TypeScript 是 JavaScript 的一个超集，它添加了静态类型检查，使得代码更易于维护和理解。掌握 TypeScript 的类型系统对于编写健壮的代码至关重要。以下是一些关键概念和技巧，帮助你轻松掌握 TypeScript 类型系统。

一、基础类型

TypeScript 提供了丰富的内置类型，包括：

  • 基本类型：number、string、boolean、null、undefined
  • 对象类型：{}、{ name: string; age: number; }
  • 数组类型：[]、[number]、[string]
  • 联合类型：string | number
  • 元组类型：[string, number]
  • 枚举类型：enum
  • 任意类型：any
  • 未知类型：unknown

示例：

let age: number = 25;
let name: string = "张三";
let isStudent: boolean = false;
let address: { city: string; zipCode: number } = { city: "北京", zipCode: 100000 };
let hobbies: string[] = ["阅读", "编程"];
let gender: "male" | "female" = "male";
enum Color { Red, Green, Blue };
let mixed: any = 100;
let union: string | number = 100;
let tuple: [string, number] = ["张三", 25];
let enumValue: Color = Color.Red;
let unknownValue: unknown = "这是一个未知类型";

二、接口（Interface）

接口用于定义对象的形状，它描述了对象必须具有哪些属性和方法。

示例：

interface Person {
  name: string;
  age: number;
  sayHello(): void;
}

function greet(person: Person) {
  console.log(`Hello, ${person.name}`);
}

const person: Person = {
  name: "李四",
  age: 30,
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

三、类型别名（Type Alias）

类型别名是给一个类型起一个新名字，它和接口类似，但更灵活。

示例：

type User = {
  name: string;
  age: number;
};

function getUserInfo(user: User) {
  console.log(`Name: ${user.name}, Age: ${user.age}`);
}

四、泛型（Generic）

泛型允许你在定义函数、接口和类时使用类型变量，从而实现类型参数化。

示例：

function identity<T>(arg: T): T {
  return arg;
}

const result = identity<string>("Hello, TypeScript!");

五、高级类型

TypeScript 还提供了高级类型，如键选类型、映射类型、条件类型等。

示例：

type Partial<T> = {
  [P in keyof T]?: T[P];
};

interface Person {
  name: string;
  age: number;
}

const person: Partial<Person> = {
  name: "张三"
};

六、类型守卫

类型守卫用于判断一个变量属于某个特定的类型。

示例：

function isString(value: any): value is string {
  return typeof value === "string";
}

const message = "Hello, TypeScript!";
if (isString(message)) {
  console.log(message.toUpperCase());
}

七、模块（Module）

TypeScript 支持模块化开发，可以方便地组织代码。

示例：

// person.ts
export interface Person {
  name: string;
  age: number;
}

// index.ts
import { Person } from "./person";

const person: Person = {
  name: "李四",
  age: 30
};

通过以上介绍，相信你已经对 TypeScript 类型系统有了初步的了解。掌握 TypeScript 类型系统，可以帮助你编写更健壮、更易于维护的代码。祝你学习愉快！

-- 展开阅读全文 --