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

news2024/11/25 12:59:56

日期：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 的类型声明机制可以提前发现类型错误，提高代码的可读性和可维护性。

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

三、如何声明类型

在 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 中的所有原始类型，并且添加了一些额外的类型：

类型	说明
`string`	表示字符串类型。
`number`	表示数值类型，如整数、浮点数等。
`boolean`	表示布尔类型，只有 `true` 和 `false` 两个值。
`void`	表示没有返回值的类型，通常用于函数返回值。
`null`	表示一个空值，只有一个值 `null`。
`undefined`	表示未定义的值，只有一个值 `undefined`。
`any`	表示任意类型，用于当类型无法确定时，绕过类型检查。
`never`	表示永远不会出现的值，通常用于表示一个始终抛出异常的函数。

五、复合类型

除了基础类型，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"]