TypeScript基础类型详解 – 小白友好版

TypeScript 基础类型详解

编程小白也能看懂的TypeScript类型知识点汇总

TypeScript 类型系统简介

TypeScript 是 JavaScript 的超集，主要增加了类型系统。类型系统就像给代码添加标签，告诉计算机每个数据是什么”种类”。

举个例子：就像超市里给商品分类（水果区、零食区），类型系统帮我们把代码中的数字、文本等分门别类，让计算机更容易理解和检查。

好处：提高代码可读性、减少错误、提供智能提示、便于团队协作。

基础类型详解

string

文本类型

表示文本数据，比如人名、地址、句子等。

• 用单引号(‘)或双引号(“)包裹的内容

• 也可以用反引号(`)创建多行文本

• 适用于所有文字内容

                    let userName: string = “张三”;

                    let greeting: string = `你好，${userName}！`;

                    // 多行字符串示例

                    let multiLine: string = `第一行
    第二行`;

number

数字类型

表示所有数字，包括整数、小数等。

• 整数：1, 42, -7

• 小数：3.14, -0.5

• 二进制、八进制、十六进制数

• JavaScript 没有单独的整数/浮点数类型

                    let age: number = 28;

                    let price: number = 9.99;

                    let hexNumber: number = 0xff00; // 十六进制

                    let binaryNumber: number = 0b1010; // 二进制

boolean

真假类型

表示真(true)或假(false)的值。

• 用于逻辑判断

• 只有两个值：true 和 false

• 适用于开关、条件判断等场景

                    let isLoggedIn: boolean = true;

                    let hasPermission: boolean = false;

                    // 用于条件判断

                    if (isLoggedIn) {

                      console.log(“欢迎回来！”);

                    }

Array

列表类型

表示一组相同类型的数据集合。

• 两种声明方式：

类型[] 或 Array<类型>

• 数组元素类型必须一致

• 有序集合，可通过索引访问

                    // 字符串数组

                    let colors: string[] = [“红”, “绿”, “蓝”];

                    // 数字数组

                    let scores: Array<number> = [90, 85, 95];

                    // 访问数组元素

                    let firstColor = colors[0]; // “红”

Tuple

固定类型数组

表示一个已知元素数量和类型的数组。

• 各元素类型不必相同

• 长度固定

• 适用于类似键值对的场景

注意： 元组类型在定义时就要确定每个位置是什么类型。

                    // 定义一个元组类型

                    let person: [string, number];

                    // 正确赋值

                    person = [“张三”, 28];

                    // 错误示例（类型不符）

                    // person = [28, “张三”]; // 报错！

                    // 访问元素

                    let name = person[0]; // string类型

                    let age = person[1]; // number类型

Enum

枚举类型

为一组数值赋予友好的名字。

• 提高代码可读性

• 默认从0开始编号

• 可手动设置值

• 适用于状态码、选项等场景

                    // 定义一个表示方向的枚举

                    enum Direction {

                      Up,    // 0

                      Down,  // 1

                      Left,  // 2

                      Right, // 3

                    }

                    let move: Direction = Direction.Left;

                    console.log(move); // 输出: 2

                    // 手动赋值

                    enum StatusCode {

                      Success = 200,

                      NotFound = 404,

                      Error = 500

                    }

Any

任意类型

关闭类型检查，变量可以是任意类型。

• 相当于普通JavaScript变量

• 使用会失去TypeScript的优势

• 仅建议在特殊情况下使用

注意： 尽量避免使用any类型，否则就失去了使用TypeScript的意义！

                    let anything: any = “可以是字符串”;

                    anything = 42; // 可以变更类型

                    anything = true; // 再次变更类型

                    // 可以调用任何方法（但可能运行时出错）

                    anything.toUpperCase(); // 不会提示错误，但运行时可能出错

Void

空类型

表示没有任何类型，常用在函数没有返回值时。

• 函数不返回任何值时使用

• 变量声明为void类型只能为undefined/null

• 主要用于函数返回值

                    // 函数没有返回值

                    function showWarning(): void {

                      console.log(“这是一条警告信息！”);

                      // 没有return语句

                    }

                    // 变量也可以声明为void，但用处不大

                    let unusable: void = undefined;

Null & Undefined

空值类型

表示值缺失或未定义。

• undefined: 变量声明但未赋值

• null: 表示有意缺少值

• 默认情况下，它们是所有类型的子类型

注意： 在严格模式下，undefined和null不能赋值给其他类型。

                    let u: undefined = undefined;

                    let n: null = null;

                    // 默认情况下，可以赋值给其他类型

                    let num: number = undefined; // 非严格模式可行

                    // 在严格模式下，这会产生错误

                    // let num: number = undefined; // 报错！

Never

永不存在的值

表示永远不会返回值的类型。

• 函数永远不会返回（抛出错误或死循环）

• 永远不会发生的类型

• 常用在错误处理函数

                    // 抛出错误的函数

                    function error(message: string): never {

                      throw new Error(message);

                    }

                    // 死循环函数

                    function infiniteLoop(): never {

                      while (true) { }

                    }

                    // 类型推断为never

                    function fail() {

                      return error(“发生错误！”);

                    }

Object

对象类型

表示非原始类型的类型（非string, number, boolean等）。

• 用于表示对象

• 也可以表示数组、函数等

• 通常我们会使用更具体的对象定义

提示： 在实际开发中，我们更多使用接口(interface)定义对象结构。

                    // 简单对象声明

                    let user: object = {

                      name: “李四”,

                      age: 30

                    };

                    // 也可以表示数组

                    let numbers: object = [1, 2, 3];

                    // 更好的方式是用接口定义

                    interface User {

                      name: string;

                      age: number;

                    }

                    let betterUser: User = { name: “王五”, age: 25 };

类型系统总结

TypeScript 的类型系统就像给代码加上标签，让计算机知道每个数据是什么类型：

1. 基本类型：string, number, boolean —— 处理文本、数字和真假值

2. 特殊类型：null, undefined, void, never —— 处理空值或无返回值的情况

3. 集合类型：Array, Tuple —— 处理一组数据

4. 命名类型：Enum —— 给数值取有意义的名字

5. 任意类型：any —— 禁用类型检查（慎用）

6. 对象类型：object —— 表示非原始类型

合理使用类型系统可以大大减少代码错误，提高开发效率！

TypeScript 类型系统简介

基础类型详解

类型系统总结

发表评论 取消回复

发表评论取消回复