0Pricing
Frontend Academy · 课时

原始类型、联合类型与类型别名

为变量标注 string、number、boolean 和数组类型。使用 | 创建联合类型，并通过类型别名为它们赋予易读的名称。

原始类型、联合类型与类型别名 是 CoddyKit 上的免费 Frontend Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

为变量添加类型注解

在变量名后加冒号即可添加类型注解。TypeScript 会在可能时推断类型——请在推断不明确或需要提供文档说明的地方添加显式注解。

let score: number = 0;
const greeting: string = 'Hello';
let active: boolean = true;
let data: null = null;
let placeholder: undefined;

// Inferred (no annotation needed):
const pi = 3.14;  // TypeScript knows this is number

原始类型

TypeScript 的原始类型对应 JavaScript 的原始值：string、number（不区分整数和浮点数）、boolean、null、undefined、symbol、bigint。

function greet(name: string): string {
  return `Hello, ${name}`;
}

function double(n: number): number {
  return n * 2;
}

function toggle(active: boolean): boolean {
  return !active;
}

数组

可以使用 Type[] 或泛型 Array<Type> 为数组指定类型。两者完全等价。

const names: string[] = ['Alice', 'Bob'];
const scores: number[] = [98, 87, 72];
const flags: boolean[] = [true, false, true];

// Generic syntax:
const items: Array<string> = ['a', 'b'];

联合类型：|

联合类型允许变量持有多种类型中的一种。请使用管道运算符 |。TypeScript 会在条件语句中缩小类型范围。

function formatId(id: number | string): string {
  if (typeof id === 'number') {
    return `#${id.toString().padStart(6, '0')}`; // id is narrowed to number
  }
  return id.toUpperCase(); // id is narrowed to string
}

字面量类型

您可以将字面量字符串、数字或布尔值用作类型。将它们与联合类型结合，可以创建一组固定的允许值，类似于枚举。

type Direction = 'north' | 'south' | 'east' | 'west';
type Status = 'pending' | 'active' | 'cancelled';
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

function move(dir: Direction) { /* ... */ }
move('north'); // OK
move('up');    // Error: Argument not assignable

类型别名：type

type 关键字会创建类型别名，即任何类型都可以使用的可复用名称。别名适用于原始类型、联合类型、对象、元组以及复杂的组合类型。

type UserId = string | number;
type RGB = [number, number, number]; // tuple
type Callback = (event: MouseEvent) => void;

const userId: UserId = 42;
const red: RGB = [255, 0, 0];
const handler: Callback = (e) => console.log(e.type);

使用 type 定义对象类型

请使用类型别名描述对象结构。使用 ? 将属性标记为可选，使用 readonly 将属性标记为只读。

type User = {
  id: number;
  name: string;
  email: string;
  role?: 'admin' | 'user'; // optional
  readonly createdAt: Date; // can't reassign
};

const user: User = {
  id: 1,
  name: 'Alice',
  email: 'alice@example.com',
  createdAt: new Date()
};

交叉类型：&

请使用 & 运算符组合多个类型。结果类型包含两者的全部属性。这对于扩展类型很有用。

type Timestamped = {
  createdAt: Date;
  updatedAt: Date;
};
type UserWithTimestamp = User & Timestamped;
// Has all User properties AND createdAt/updatedAt

any 类型——应急出口

any 会让某个值退出类型检查。它具有传染性——从 any 派生的值也会变成 any。迁移期间可以将其作为最后手段使用，但绝不要将其作为长期解决方案。

let data: any = fetch('/api/data'); // no type checking
data.foo.bar.baz; // no error — and no protection

// Better: use 'unknown' and narrow it:
let raw: unknown = getExternalData();
if (typeof raw === 'string') {
  console.log(raw.toUpperCase()); // narrowed
}

unknown 类型——any 的安全替代方案

unknown 是 any 的类型安全对应项。在先缩小类型范围之前，您不能使用 unknown 值。它会强制您验证外部数据。

元组——固定长度数组

元组是一种固定长度的数组，其中每个位置都有已知类型。

type Point = [number, number];
const origin: Point = [0, 0];
const p: Point = [3, 4];

// React useState returns a tuple:
const [count, setCount] = useState<number>(0);

快速检查

TypeScript 的哪项功能可以让函数接受字符串或数字？

回顾：原始类型、联合类型和别名

原始类型：字符串、数字、布尔值、空值、未定义值。数组：Type[]。联合类型：A | B。字面量类型用于固定值集合。type 别名用于可复用的类型名称。使用 ? 表示可选属性。使用 readonly 表示不可变属性。对于外部数据，优先使用 unknown，而不是 any。

常见问题解答

「原始类型、联合类型与类型别名」课时是免费的吗？

是的 — 「原始类型、联合类型与类型别名」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「原始类型、联合类型与类型别名」这节课中我会学到什么？

为变量标注 string、number、boolean 和数组类型。使用 | 创建联合类型，并通过类型别名为它们赋予易读的名称。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「原始类型、联合类型与类型别名」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 为什么使用 TypeScript：在编译时捕获错误
  2. 原始类型、联合类型与类型别名
  3. 接口与对象类型
  4. 编译 TS 与 tsconfig.json
← 返回 Frontend Academy