首页 > 进阶教程 > TypeScript 基础

TypeScript 基础

什么是 TypeScript?

TypeScript 是 JavaScript 的超集，添加了静态类型检查。它由 Microsoft 开发，是 JavaScript 生态系统中的主流语言。

基本类型

// 基本类型
const name: string = "张三";
const age: number = 25;
const isActive: boolean = true;
const data: null = null;
const nothing: undefined = undefined;

// 数组类型
const numbers: number[] = [1, 2, 3];
const names: Array = ["张三", "李四"];

// 对象类型
interface Person {
    name: string;
    age: number;
    city?: string; // 可选属性
}

const person: Person = {
    name: "张三",
    age: 25,
    city: "北京"
};

函数类型

// 函数声明
function greet(name: string): string {
    return `你好,${name}`;
}

// 箭头函数
const add = (a: number, b: number): number => a + b;

// 可选参数
const greetUser = (name: string, greeting?: string) => {
    const message = greeting || "你好";
    return `${message},${name}`;
};

// 默认参数
const createUser = (name: string, age: number = 18) => ({
    name,
    age
});

// 剩余参数
const sum = (...numbers: number[]): number =>
    numbers.reduce((a, b) => a + b, 0);

高级类型

// 联合类型
type ID = string | number;
const userId: ID = 123;
const orderId: ID = "order-123";

// 字面量类型
type Theme = "light" | "dark" | "auto";
const currentTheme: Theme = "dark";

// 数组元组
type Coordinate = [number, number];
const point: Coordinate = [10, 20];

// 枚举
enum Status {
    Pending = "pending",
    Success = "success",
    Failed = "failed"
}

// 类型断言
const value: unknown = "hello";
const length: number = (value as string).length;

泛型

// 泛型函数
function identity(value: T): T {
    return value;
}

const num = identity(42);
const str = identity("hello");

// 泛型接口
interface Box {
    value: T;
}

const box1: Box = { value: 123 };
const box2: Box = { value: "hello" };

// 泛型约束
interface HasLength {
    length: number;
}

function getLength(value: T): number {
    return value.length;
}

类型推断

// TypeScript 可以自动推断类型
const name = "张三"; // 自动推断为 string
const age = 25; // 自动推断为 number

// 函数返回类型推断
const add = (a: number, b: number) => a + b; // 自动推断返回 number

// 对象类型推断
const user = {
    name: "张三",
    age: 25
}; // 自动推断为 {name: string, age: number}

实用类型工具

// Partial - 所有属性变为可选
interface User {
    name: string;
    age: number;
}
type PartialUser = Partial;
// { name?: string; age?: number }

// Required - 所有属性变为必需
type RequiredUser = Required;
// { name: string; age: number }

// Pick - 选择部分属性
type UserName = Pick;
// { name: string }

// Omit - 排除部分属性
type UserWithoutAge = Omit;
// { name: string }

// Record - 创建对象类型
type UserRecord = Record;

// Exclude - 排除联合类型
type ExcludeString = Exclude;
// number

在浏览器中使用 TypeScript

虽然有 JSDoc 等替代方案，但 TypeScript 编译器（tsc）仍然是最完整的类型检查工具。

// 使用 JSDoc 提供类型提示 (推荐用于小型项目)
/**
 * @param {string} name - 用户名
 * @param {number} age - 年龄
 * @returns {Object} 用户对象
 */
function createUser(name, age) {
    return { name, age };
}

// 使用 TypeScript 配置
// tsconfig.json
{
    "compilerOptions": {
        "target": "ES2022",
        "module": "ESNext",
        "strict": true,
        "moduleResolution": "node"
    }
}

TypeScript vs JavaScript

什么时候使用 TypeScript?