TypeScript: 静态

2025年1月24日星期五 · simons · 本文共 644 个字，预计需要阅读 2 分钟

TypeScript: 静态

你遇到过这些问题吗?

// 调用一个不存在的方法
obj.nonexistMethod()

// 传错参数类型
calculateArea("5", "10")

// 对象属性拼写错误
user.namee = "Bob"

玩过JavaScript的同学一定很熟悉这些坑。这就是为什么我们需要 TypeScript。

TypeScript是个啥?

简单说:TypeScript = JavaScript + 类型系统

// 变量类型
let name: string = "老陈"

// 函数类型
function add(x: number, y: number): number {
    return x + y
}

// 接口
interface User {
    id: number
    name: string
    age?: number  // 可选属性
}

为什么要用TypeScript?

不用写单元测试了?
- 别想多了,该写还得写
- 但80%的低级错误在编译时就能抓出来
代码更好维护
- 重构代码不再靠猜
- IDE提示准确,不用查文档
- 新人上手更快,代码即文档
面向对象特性
- 类、接口、泛型一应俱全
- JavaScript原型继承太难懂?用Class

跟其他方案比?

Flow: Facebook的玩具,社区都快凉了
JSDoc: 注释太冗长,IDE支持有限
纯JS: 想调试到头秃么?

实战例子

需求:写个用户管理系统

// 定义接口
interface IUser {
    id: number;
    name: string;
    email: string;
}

// 用户管理类
class UserManager {
    private users: Map<number, IUser> = new Map();

    addUser(user: IUser): void {
        this.users.set(user.id, user);
    }

    getUser(id: number): IUser | undefined {
        return this.users.get(id);
    }
}

// 使用
const manager = new UserManager();
manager.addUser({id: 1, name: "老陈", email: "laoc@cool.com"});