【TS|第2期】 TypeScript 类型声明：基础与进阶

日期：2024年6月8日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

一、前言

TypeScript 是一种强类型语言，是 JavaScript 的一个超集。它为 JavaScript 添加了类型系统，通过类型声明，我们能够为变量、函数参数和返回值定义类型约束，从而提高代码的可读性、维护性和健壮性。本文将探讨为什么需要类型声明，如何在 TypeScript 中进行类型声明，以及介绍基础类型和复合类型。

二、为什么要声明类型

在 JavaScript 中，变量的类型是动态的，这在一定程度上增加了代码的灵活性，但同时也带来了潜在的错误和维护难题。TypeScript 的类型声明机制可以提前发现类型错误，提高代码的可读性和可维护性。

1. 类型安全：通过类型声明，可以确保变量、函数参数和返回值的类型正确性，避免运行时错误。
2. 代码提示：在开发环境中，TypeScript 能够提供丰富的代码提示，帮助开发者快速了解可用的属性和方法。
3. 重构支持：类型系统使得重构变得更加安全，因为编译器可以检测到类型不匹配的问题。
4. 文档自动生成：类型声明可以作为代码的文档，帮助其他开发者理解代码结构和使用方法。

三、如何声明类型

在 TypeScript 中，类型声明非常简单。你可以通过以下方式为变量、函数参数和返回值声名类型：

// 变量类型声明
let myNumber: number = 10;

// 函数参数类型声明
function add(a: number, b: number): number {
  return a + b;
}

// 函数返回值类型声明
function getUserName(): string {
  return "Alice";
}

// 对象类型声明
const user: { name: string; age: number } = { name: "Alice", age: 25 };

// 数组类型声明
const numbers: number[] = [1, 2, 3];

// 元组类型声明
const userTuple: [string, number] = ["Alice", 25];

另外，也可以采用类型推断进行类型声明，TypeScript 编译器能够根据上下文自动推断出变量的类型，无需显式声明。

// 推断为 字符串 类型
let name = "Commas"

// 推断为 数值 类型
let age = 18

// 推断为 number[] 类型
let arr = [1, 2, 3]; 

四、基础类型

TypeScript 支持 JavaScript 中的所有原始类型，并且添加了一些额外的类型：

五、复合类型

除了基础类型，TypeScript 还支持多种复合类型，用于构建更复杂的数据结构：

• 数组类型：T[] 或 Array<T> 表示元素类型为 T 的数组。

let numbers: number[];
let strings: Array<string>;

• 元组类型：[T1, T2, ...] 表示固定长度和类型的数组。

let point: [number, number];

• 枚举类型：enum 用于定义一组命名的常量。

enum Color {
  Red,
  Green,
  Blue
}

• 接口类型：interface 用于定义对象的形状。

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

const person: Person = {
  name: 'Commas',
  age: 18
};

• 类类型：class 用于定义对象的蓝图。

class Student {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

• 泛型类型：T、U 等表示可以被多种类型使用的类型参数。

// 定义一个泛型函数，它接受一个类型T，并返回一个T类型的数组
function getArray<T>(items: T[]): T[] {
  return items;
}

// 使用number类型调用getArray函数
const numbers = getArray<number>([1, 2, 3, 4, 5]);
console.log(numbers); // 输出：[1, 2, 3, 4, 5]

// 使用string类型调用getArray函数
const strings = getArray<string>(["hello", "world"]);
console.log(strings); // 输出：["hello", "world"]

// 使用混合类型调用getArray函数
const mixed = getArray<number | string>([1, "two", 3, "four"]);
console.log(mixed); // 输出：[1, "two", 3, "four"]

六、结语

TypeScript 的类型声明可以帮助我们更好地管理代码，提高代码质量和开发效率。掌握基础类型和复合类型的使用方法，有助于我们更好地利用 TypeScript 的类型系统。

参考文章：
1、TypeScript 手册
2、TypeScript 入门教程

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/139538898