Typescript入门-掌握核心类型概念

最新推荐文章于 2024-08-27 16:58:03 发布

妍思码匠

最新推荐文章于 2024-08-27 16:58:03 发布

阅读量749

点赞数 18

分类专栏：妍思码匠的前端乐园文章标签： typescript 前端开发 TypeScript核心概念静态类型类型安全

本文链接：https://blog.csdn.net/wjs0406/article/details/140975495

版权

妍思码匠的前端乐园专栏收录该内容

22 篇文章 0 订阅

订阅专栏

1. 类型声明：给变量穿上标签

在 TypeScript 中，你可以给变量指定类型，这就像给变量贴上标签，告诉 TypeScript 这个变量应该装什么类型的数据。

想象你去超市购物，每个商品都有一个标签，上面写着商品的名称和价格。这个标签就相当于 TypeScript 中的类型声明，它告诉 TypeScript 这个变量应该装什么类型的数据。

代码示例

let age: number = 25; // 声明 age 是 number 类型
let name: string = "张三"; // 声明 name 是 string 类型
let isStudent: boolean = true; // 声明 isStudent 是 boolean 类型

在这个例子中，age、name 和 isStudent 都被赋予了特定的类型标签。

2. 类型推断：让 TypeScript 来猜猜看

当你声明变量时，如果不指定类型，TypeScript 会根据你赋的初始值来推断类型，这叫做类型推断。

假设你去餐厅点餐，服务员会根据你的点单来猜测你可能喜欢的口味，然后推荐相应的菜品。这就像 TypeScript 会根据变量的初始值来猜测它的类型。

代码示例

let age = 25; // TypeScript 推断 age 是 number 类型
let name = "张三"; // TypeScript 推断 name 是 string 类型
let isStudent = true; // TypeScript 推断 isStudent 是 boolean 类型

在这些示例中，TypeScript 会自动推断出变量的类型。

3. 接口：设计蓝图的魔法

接口是 TypeScript 的一大特色，它允许你定义对象的形状，即对象应该具有哪些属性和方法。

想象一下，你是一名建筑师，正在设计一栋房子。房子的设计蓝图会详细说明每个房间的大小、位置和功能。在 TypeScript 中，接口就像这个设计蓝图，它定义了对象应该长什么样子。

代码示例

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

let zhangSan: Person = {
  name: "张三",
  age: 25,
  greet: function() {
    return "你好，我是" + this.name;
  }
};

在这个例子中，Person 接口定义了一个对象应该有 name 和 age 属性，以及一个 greet 方法。zhangSan 变量遵循了这个接口的设计，确保了代码的一致性和可读性。

4. 泛型：让类型变得灵活

泛型是 TypeScript 的另一个强大工具，它允许你创建可以处理任何类型的函数或类。

想象你有一把万能钥匙，它可以打开任何类型的锁。在 TypeScript 中，泛型就像这把万能钥匙，它让函数或类能够处理任何类型的参数。

代码示例

// 定义一个泛型函数，T 是类型参数
function getFirstElement<T>(array: T[]): T {
  return array;
}

// 使用泛型函数
let numbers = [1, 2, 3];
let letters = ['a', 'b', 'c'];

console.log(getFirstElement(numbers)); // 输出 1
console.log(getFirstElement(letters)); // 输出 'a'

在这个示例中，<T> 表示这是一个泛型函数，T 是类型参数。当我们在 getFirstElement 函数中使用 T 时，TypeScript 会根据调用函数时传递的数组类型来推断 T 的类型。这意味着我们可以使用同一段代码处理不同类型的数据，而不需要为每个数据类型编写一个函数。

5. 枚举类型：定义一组命名的常量

枚举类型允许你定义一组命名的常量，这在处理一组固定的选项时特别有用，例如状态、颜色等。

想象你正在设计一个交通信号灯，它有三种状态：红、黄、绿。在 TypeScript 中，你可以使用枚举来定义这些状态，使它们在代码中更具可读性。

代码示例

enum TrafficLight {
  Red,
  Yellow,
  Green
}

let currentLight: TrafficLight = TrafficLight.Green;

console.log(currentLight); // 输出 2

在这个例子中，TrafficLight 枚举定义了三种状态。默认情况下，枚举成员的值会从 0 开始自动递增，但你也可以显式地为它们赋值。

6. 联合类型：多种类型的集合

联合类型表示一个值可以是多种类型中的一种。这在处理可能为不同类型的变量时非常有用。

想象你正在设计一个可以存储不同种类信息的表单，它可能是一个字符串、一个数字或一个布尔值。在 TypeScript 中，你可以使用联合类型来表示这种多态性。

代码示例

let value: string | number | boolean = "Hello";

value = 42; // 合法，因为 number 是联合类型的一部分
value = true; // 合法，因为 boolean 也是联合类型的一部分

7. 类型别名：为复杂类型起个好名字

类型别名允许你给一个类型起个新名字，这在处理复杂的类型时非常有帮助，可以提高代码的可读性和可维护性。

想象你正在设计一个复杂的菜单系统，其中的菜单项可能包含标题、描述、价格等信息。在 TypeScript 中，你可以使用类型别名来定义这个复杂的类型，使其在其他地方使用时更加清晰。

代码示例

type MenuItem = {
  title: string;
  description: string;
  price: number;
};

let menuItem: MenuItem = {
  title: "Spaghetti Bolognese",
  description: "Classic Italian pasta dish",
  price: 12.99
};