TypeScript类型入门：让JavaScript更可靠的开发选择

发布时间：2025-12-15 00:43:52 阅读：688 次

写ref="/tag/137/" style="color:#C468A7;font-weight:bold;">JavaScript时，你有没有遇到过这样的情况：调用一个函数，传了个字符串，结果它其实要的是数字，运行时突然报错？或者别人写的代码，你根本猜不到参数该传什么？这些问题在项目变大后尤其头疼。TypeScript 就是为了解决这些麻烦而生的。

什么是TypeScript

TypeScript 是 JavaScript 的超集，也就是说，所有合法的 JavaScript 代码也是合法的 TypeScript 代码。但它多了一个重要能力——类型系统。你可以给变量、函数参数、返回值加上类型标注，让错误在写代码的时候就被发现，而不是等到运行才暴露。

比如，你想写一个计算价格的函数，只接受数字：

function calculatePrice(count: number, price: number): number {
    return count * price;
}

这时候如果你不小心传了个字符串进去，编辑器马上就会提醒你：“这里需要数字，不能传字符串”。这种提示在团队协作或维护老项目时特别有用。

常见的基础类型

TypeScript 提供了一些基础类型，可以直接使用：

number：所有数字，比如 1、3.14
string：字符串，比如 "hello"、'world'
boolean：布尔值，true 或 false
array：数组，可以用 number[] 表示数字数组，或者 Array<string> 表示字符串数组
any：任意类型，不推荐滥用，会失去类型检查的意义

举个例子：

let username: string = "john";
let scores: number[] = [85, 90, 78];
let isActive: boolean = true;

接口（Interface）让对象结构更清晰

实际开发中，我们经常处理对象。比如用户信息：

interface User {
    id: number;
    name: string;
    email?: string; // 可选属性
}

function printUserInfo(user: User) {
    console.log(`Hello, ${user.name}!`);
}

这样，只要传给 printUserInfo 的对象有 id 和 name，类型就匹配。如果少了 name，编辑器立刻标红提醒。

类型推断：不用每处都写类型

TypeScript 能自动推断很多类型。比如你写：

let age = 25;

虽然没写 : number，但 TypeScript 知道 age 是数字类型。这让你在享受类型安全的同时，不至于写太多冗余代码。

联合类型：一个值可能是多种类型之一

有时候，参数可能接受字符串或数字，比如用户输入：

function formatInput(value: string | number) {
    return `Received: ${value}`;
}

这里的 string | number 就是联合类型，表示可以是字符串或数字。调用时传 123 或 "abc" 都没问题。

实践建议

刚开始用 TypeScript，不必追求100%覆盖所有类型。可以从关键函数和组件开始，逐步加上类型标注。配合 VS Code 这类编辑器，你能实时看到类型是否匹配，就像有个助手在旁边提醒你哪里可能出错。

现在很多前端框架，比如 React、Vue，都原生支持 TypeScript。学会基础类型后，你会发现代码更健壮，重构也更有底气。