异常教程

TypeScript 基础类型（长文解析）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在编程的世界里，类型系统如同一座精心设计的桥梁，连接着代码的清晰性与运行的稳定性。TypeScript 作为 JavaScript 的超集，通过引入静态类型检查机制，帮助开发者在编码阶段就发现潜在错误，提升代码质量。而掌握 TypeScript 基础类型，则是理解这一类型系统的核心。本文将从最基础的类型开始，逐步展开联合类型、交叉类型、类型推断等进阶概念，并通过实际案例，帮助编程初学者和中级开发者构建扎实的 TypeScript 基础。

一、TypeScript 基础类型概述

在 TypeScript 中，基础类型是构建复杂类型系统的基石。它们包括 number、string、boolean、null、undefined、void、never 以及 object 等。这些类型如同乐高积木的最小单元，组合起来可以搭建出复杂的程序逻辑。

1.1 基础类型的核心作用

基础类型的明确性，能够帮助开发者：

  • 减少运行时错误：提前发现类型不匹配的问题（例如将字符串赋值给数字类型变量）。
  • 提升代码可读性：通过类型注解清晰表达变量用途，降低团队协作中的沟通成本。
  • 增强工具支持：IDE 和编辑器能提供更精准的代码补全和错误提示。

例如，以下代码通过类型注解明确 age 是数字类型：

let age: number = 25;  
age = "twenty-five"; // 报错：Type 'string' is not assignable to type 'number'.

二、基础类型详解

2.1 数值类型（number）

在 TypeScript 中，number 类型可以表示整数或浮点数。它与 JavaScript 的 number 类型完全兼容，但能通过静态检查避免类型错误。

案例：

let temperature: number = 26.5;  
temperature = 26; // 合法  
temperature = "26°C"; // 报错：类型 'string' 无法分配给类型 'number'。

2.2 字符串类型（string）

string 类型用于表示文本数据。通过类型注解，可以确保变量仅接受字符串值。

案例：

let username: string = "Alice";  
username = 12345; // 报错：类型 'number' 无法分配给类型 'string'。

2.3 布尔类型（boolean）

boolean 类型的值只能是 true 或 false，常用于条件判断。

案例：

let isOnline: boolean = true;  
isOnline = "online"; // 报错：类型 'string' 无法分配给类型 'boolean'。

2.4 特殊基础类型

  • null 和 undefined：这两个类型分别表示空值和未定义值。 
    let value: null = null;  
let result: undefined = undefined;
  • void：表示“没有类型”，通常用于函数无返回值的情况。 
    function logMessage(message: string): void {  
  console.log(message);  
}
  • never：表示“永不返回”的类型，例如抛出错误或无限循环的函数。 
    function throwError(message: string): never {  
  throw new Error(message);  
}

三、数组与元组类型

3.1 数组类型（Array）

数组类型使用 type[] 或 Array<type> 的语法定义。它确保数组中的每个元素都符合指定类型。

案例：

let scores: number[] = [85, 90, 78];  
scores.push("95"); // 报错：类型 'string' 无法分配给类型 'number'。

3.2 元组类型（Tuple）

元组允许数组元素具有不同类型，但需严格遵循定义的顺序和数量。

案例：

let user: [string, number] = ["Bob", 30]; // 合法  
user = ["Charlie", "31"]; // 报错：第二个元素类型错误。

四、联合类型与交叉类型

4.1 联合类型（Union Types）

联合类型用 | 符号连接多个类型，表示变量可以是其中一种类型。

案例：

let postId: string | number = "post-123";  
postId = 456; // 合法  
postId = true; // 报错：类型 'boolean' 不在联合类型中。

4.2 交叉类型（Intersection Types）

交叉类型用 & 符号合并多个类型，生成包含所有属性的新类型。

案例：

interface User {  
  name: string;  
  age: number;  
}  
interface Admin {  
  role: string;  
}  
type AdminUser = User & Admin;  
const user: AdminUser = {  
  name: "Eve",  
  age: 28,  
  role: "admin" // 必须包含所有属性  
};

五、类型推断与类型断言

5.1 类型推断（Type Inference）

TypeScript 能根据初始值自动推断变量类型，无需显式注解。

案例：

let count = 10; // 推断为 number 类型  
count = "ten"; // 报错：类型 'string' 无法分配给类型 'number'。

5.2 类型断言（Type Assertion）

当需要覆盖 TypeScript 的推断时，可以使用类型断言。

案例：

const input = document.querySelector("input");  
// 断言 input 为 HTMLInputElement 类型  
const value = (input as HTMLInputElement).value;

六、基础类型的实战应用

6.1 表单验证

通过基础类型和联合类型，可以构建健壮的表单验证逻辑：

type FormField = {  
  type: "text" | "email";  
  value: string;  
  required: boolean;  
};  
function validateForm(fields: FormField[]): boolean {  
  return fields.every(field =>  
    field.required ? field.value.trim() !== "" : true  
  );  
}

6.2 API 数据处理

定义 API 响应的类型，确保数据结构的正确性：

interface ApiResponse {  
  status: "success" | "error";  
  data: object | null;  
  message?: string;  
}  
const response: ApiResponse = {  
  status: "success",  
  data: { user: "John" },  
  message: "操作成功"  
};

结论

掌握 TypeScript 基础类型 是构建可靠代码的第一步。从简单的 number 和 string，到复杂的联合类型和交叉类型，每种类型都在为代码的健壮性和可维护性提供保障。通过实际案例的演练，开发者能够逐步将理论转化为实践，最终在项目中发挥 TypeScript 的最大价值。建议读者在后续学习中，进一步探索泛型、接口和高级类型，以全面掌握 TypeScript 的类型系统。

提示：TypeScript 的类型系统如同一把精密的尺子，只有理解其基础规则，才能精准“测量”代码的每个角落。从今天开始，让类型成为你代码质量的守护者吧！

最新发布

查看更多文章