TypeScript 基础语法入门指南

TypeScript 是 JavaScript 的超集，通过静态类型检查和丰富的语法特性，帮助开发者编写更健壮、可维护的代码。本文将从零开始介绍 TypeScript 的基本语法，帮助你快速掌握核心概念。

1. 类型注解（Type Annotations）

TypeScript 的核心功能是静态类型检查，通过在变量、函数参数和返回值上添加类型注解，明确数据的类型。

typescript Copy Code // 基本类型 let name: string = "Alice"; let age: number = 30; let isActive: boolean = true; let data: any = "可以赋任何类型的值";

// 数组 let numbers: number[] = [1, 2, 3]; let names: Array = ["Alice", "Bob"]; // 泛型语法

// 元组（固定长度和类型） let user: [string, number] = ["Alice", 30];

1. 联合类型与类型别名

联合类型允许变量支持多种类型，类型别名则能简化复杂类型的定义。

typescript Copy Code // 联合类型 let id: string | number = "ABC123"; id = 123; // 允许赋值字符串或数字

// 类型别名 type UserID = string | number; let userId: UserID = "user_001";

1. 接口（Interfaces）

接口定义对象的形状，强制结构的一致性。

typescript Copy Code interface User { name: string; age: number; isAdmin?: boolean; // 可选属性 }

const user: User = { name: "Alice", age: 30, // isAdmin 可省略 };

// 只读属性 interface Point { readonly x: number; readonly y: number; }

1. 函数类型

为函数的参数和返回值定义类型，支持可选参数和默认值。

typescript Copy Code // 定义函数类型 function add(a: number, b: number): number { return a + b; }

// 箭头函数 const multiply = (x: number, y: number): number => x * y;

// 可选参数与默认值 function greet(name: string, greeting: string = "Hello"): string { return

1. 类与面向对象

TypeScript 支持 ES6 类的语法，并扩展了访问修饰符（public、private、protected）。

typescript Copy Code class Animal { // 成员属性需明确类型 name: string; private age: number;

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

// 方法 speak(): void { console.log("Animal sound"); } }

// 继承 class Dog extends Animal { breed: string;

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

// 重写方法 speak(): void { console.log("Woof!"); } }

1. 泛型（Generics）

泛型允许创建可复用的组件，支持多种类型而不牺牲类型安全。

typescript Copy Code // 泛型函数 function identity(arg: T): T { return arg; }

identity(42); // 显式指定类型 identity("Hello"); // 类型推断

// 泛型接口 interface Response { data: T; status: number; }

const userResponse: Response = { data: { name: "Alice", age: 30 }, status: 200, };

1. 类型推断与类型断言

TypeScript 能自动推断变量类型，开发者也可通过类型断言手动指定类型。

typescript Copy Code // 类型推断 let message = "Hello"; // 推断为 string

// 类型断言（两种语法） let value: any = "123"; let strLength: number = (value as string).length; // 推荐语法 // 或者 let strLength2: number = (value).length;

1. 枚举（Enums）

枚举用于定义一组具名常量，增强代码可读性。

typescript Copy Code enum Direction { Up = "UP", Down = "DOWN", Left = "LEFT", Right = "RIGHT", }

const move = (direction: Direction) => { console.log(Moving ${direction}); };

move(Direction.Up); // 输出 "Moving UP"

1. 高级类型（Advanced Types）

TypeScript 提供了交叉类型、类型守卫等高级特性。

typescript Copy Code // 交叉类型（合并多个类型） type Admin = User & { permissions: string[] };

// 类型守卫（缩小类型范围） function isString(value: any): value is string { return typeof value === "string"; }

const logValue = (value: string | number) => { if (isString(value)) { console.log(value.toUpperCase()); } else { console.log(value.toFixed(2)); } };