📚 TypeScript基本数据类型学习实践

TypeScript是JavaScript的超集，添加了静态类型系统。掌握基本数据类型是学习TypeScript的第一步。本指南将详细介绍所有基础数据类型，并提供丰富的示例和最佳实践。

🔧 变量声明基础

基本语法

// 变量声明语法
// 关键字 变量名: 数据类型 = 初始值;

// 基本语法
let message: string = "Hello TypeScript!";
let count: number = 42;
let isActive: boolean = true;

📊 基本数据类型详解

步骤1：布尔类型（boolean）

🔸 boolean

表示逻辑值，只有两个可能的值：true 和 false。

// 基本使用
let isDone: boolean = false;
let hasPermission: boolean = true;

// 函数返回值
function isAdmin(): boolean {
    return true;
}

步骤2：数字类型（number）

🔸 number

TypeScript中的number类型包括所有数字：整数、浮点数、十进制、十六进制、二进制和八进制。

// 十进制
let decimal: number = 6;

// 十六进制
let hex: number = 0xf00d;

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

// 八进制
let octal: number = 0o744;

// 浮点数
let float: number = 3.14;
let negative: number = -100;

// 科学计数法
let scientific: number = 1.23e10;

步骤3：字符串类型（string）

🔸 string

表示文本数据，可以使用单引号、双引号或模板字符串。

// 基本字符串
let color: string = "blue";
let message: string = 'Hello';

// 模板字符串（支持多行和插值）
let fullName: string = "John Doe";
let age: number = 30;
let info: string = `My name is ${fullName} and I am ${age} years old.`;

// 多行字符串
let multiLine: string = `This is a
multi-line string
in TypeScript.`;

步骤4：null和undefined类型

🔸 null 和 undefined

null表示"空值"，undefined表示"未定义"。在TypeScript中，它们都是有效的类型。

let emptyValue: null = null;
let notDefined: undefined = undefined;

// 联合类型 - 可以为空
let nullableNumber: number | null = 10;
nullableNumber = null;

let maybeUndefined: string | undefined;
maybeUndefined = undefined;

步骤5：数组类型（Array）

🔸 Array

TypeScript提供了多种方式来声明数组类型。

// 方式1: 类型后跟[]
let numbers: number[] = [1, 2, 3, 4, 5];
let strings: string[] = ["Hello", "World"];

// 方式2: 泛型语法
let list: Array = [1, 2, 3];

// 联合类型数组
let mixedArray: (number | string)[] = [1, "Two", 3, "Four"];

// 只读数组
let readonlyArray: readonly number[] = [1, 2, 3];
// readonlyArray.push(4); // 错误！不能修改只读数组

// 多维数组
let matrix: number[][] = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

步骤6：元组类型（Tuple）

🔸 Tuple

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

// 基本元组
let x: [string, number];
x = ["hello", 10]; // 正确
// x = [10, "hello"]; // 错误！类型不匹配

// 固定长度的元组
let user: [string, number, boolean];
user = ["Alice", 25, true];

// 可选元素（从TypeScript 4.0开始）
let optionalTuple: [string, number?];
optionalTuple = ["Hello"];
optionalTuple = ["Hello", 123];

// 只读元组
const readonlyTuple: readonly [string, number] = ["Hello", 123];

步骤7：枚举类型（Enum）

🔸 Enum

枚举是对JavaScript标准数据类型的一个补充，可以为一组数值赋予友好的名字。

步骤8：任意类型（any）

🔸 any

允许赋值为任何类型，编译时不会进行类型检查。

步骤9：unknown类型

🔸 unknown

unknown类型和any类似，但不允许随意使用，必须先进行类型检查。

步骤10：void类型

🔸 void

表示没有返回值的函数，或者根本不返回值的函数。

步骤11：never类型

🔸 never

never类型表示永不存在的值的类型。例如，抛出异常的函数或无限循环的函数。

步骤12：object类型

🔸 object

表示非原始类型，即除了number、string、boolean、symbol、bigint或null/undefined之外的类型。

🔗 特殊类型

步骤1：字面量类型

🔸 字面量类型

可以使用字符串、数字或布尔值作为类型。

步骤2：类型断言

🔸 Type Assertion

有两种语法进行类型断言：尖括号语法和as语法。

someValue).length;

// as语法（推荐）
let strLength2: number = (someValue as string).length;

// 类型断言的实际应用
let canvas = document.getElementById("main_canvas") as HTMLCanvasElement;

// 双重断言
let value: unknown = "hello";
let strLength3: number = (value as string).length;
// 或者
let strLength4: number = (value as unknown as string).length;

步骤3：类型收窄

🔸 Type Narrowing

TypeScript使用类型收窄来在特定的代码块中知道变量的确切类型。

📝 最佳实践

类型选择建议

优先使用基本类型：number、string、boolean等
避免使用any：尽量使用unknown或具体的类型
使用联合类型：当一个变量可以有多种类型时
使用字面量类型：当变量只能取特定几个值时
使用类型收窄：比类型断言更安全
使用接口：为对象定义类型结构

常见陷阱

⚠️ 不要滥用any类型，失去类型检查的好处
⚠️ 注意null和undefined在--strictNullChecks下的行为
⚠️ 类型断言可能会掩盖真正的错误
⚠️ 数组的length属性是number类型，不是类型安全的

🚀 进阶示例

复杂类型示例

 = {
    data: T;
    status: number;
    message?: string;
};

// 使用泛型
function createApiResponse(data: T, status: number): ApiResponse {
    return {
        data,
        status,
        message: "Success"
    };
}

// 实际应用
type User = {
    id: number;
    name: string;
    email: string;
};

const userResponse: ApiResponse = createApiResponse(
    { id: 1, name: "John", email: "john@example.com" },
    200
);

// 类型守卫函数
function isUser(obj: any): obj is User {
    return obj && 
           typeof obj.id === "number" && 
           typeof obj.name === "string" && 
           typeof obj.email === "string";
}

// 使用类型守卫
function processUser(user: unknown) {
    if (isUser(user)) {
        console.log(`Processing user: ${user.name}`);
    } else {
        console.log("Invalid user data");
    }
}

📊 总结

类型	用途	示例	推荐使用场景
boolean	逻辑值	true/false	开关状态、标志位
number	数值	42, 3.14, 0xf00d	数学计算、大小、数量
string	文本	"Hello"	消息、名称、描述
Array	数组	[1, 2, 3]	列表、集合、批量数据
Tuple	元组	[string, number]	固定结构的元组
Enum	枚举	enum Color {Red, Green}	预定义的常量集合
any	任意	any	动态数据、第三方库
unknown	未知	unknown	安全处理外来数据
void	无返回	(): void	没有返回值的函数
never	永不返回	throw new Error()	永不执行的函数

学习建议

掌握TypeScript基本数据类型是迈向高级编程的第一步。建议：

从基本类型开始，逐步学习复杂类型
在项目中实践，养成良好的类型注解习惯
使用TypeScript的类型工具（如类型收窄）提高代码质量
阅读TypeScript官方文档，深入了解类型系统

下一步

学习完基本类型后，可以继续学习接口（Interface）、泛型（Generics）、装饰器（Decorators）等高级特性。

TypeScript基本数据类型学习实践