TypeScript基础

让我们谈谈在将Laravel应用前端转换为TypeScript时经常会遇到的基本原始类型。我希望先阐明这些基础，以便你在深入学习组件转换之前，理解TypeScript在底层是如何工作的。

像PHP这样的语言与TypeScript的一个主要区别在于，在TypeScript中，你可以强制规定变量的类型。

这意味着你可以声明一个变量必须是字符串（string）、数字（number）或布尔值（boolean），如果你尝试分配其他类型，编译器就会报错。如果你来自PHP背景，这需要稍微转变一下思维方式，但它能带来编辑器智能提示和更早的反馈，回报丰厚。

原始类型

你并不需要在TypeScript中为所有内容都添加类型标注——它的类型推断相当出色——但以下是原始类型，以及当你明确标注它们时的样子：

1
2
3

const firstName: string = 'Bob';
const age: number = 40;
const retired: boolean = false;

如果你尝试给firstName分配一个数字，TypeScript会立即提醒你。在实际代码中，我不会像这样标注每一个琐碎的局部变量——推断能处理大多数情况——但当你想要建立一个契约（接口）或者推断无法正确处理时，显式类型就很有用了。

数组

1

const friends: string[] = ['Linda', 'Jean', 'Louise', 'Tina'];

TypeScript会阻止你意外地向friends添加一个数字。你也可以使用泛型形式Array<string>来写，但我更喜欢方括号语法——在实践中读起来更顺畅。

对象与Record

当你知道对象的形状（结构）时，请显式地为其添加类型，这样你就能获得键（key）的自动补全：

1
2
3
4

const job: { title: string; description: string } = {
  title: 'Burger Chef',
  description: 'Cooks burgers',
};

如果你知道键和值的类型，但事先并不知道确切有哪些键，可以使用Record：

1
2
3
4
5
6
7

const translations: Record<string, string> = {
  hello: 'Hola',
  goodbye: 'Adiós',
};

// 无效的写法：
// translations.count = 1; // 错误：数字不能分配给字符串

Record<K, V>表示“键的类型是K，值的类型是V”，这对于动态映射（对象）非常方便。 如果你有一个对象数组，只需要组合类型即可：

1
2

type Person = { name: string; age: number };
const people: Person[] = [{ name: 'Joe', age: 30 }, { name: 'Ali', age: 25 }];

函数与泛型

函数可以显式地添加类型，但泛型才是TypeScript在可重用工具函数中大放异彩的地方。这里有一个返回数组第一项的小例子。

非泛型（特定）版本：

1
2
3
4
5

function firstItemOfNumbers(items: number[]) {
  return items[0];
}

const n = firstItemOfNumbers([1, 2, 3]); // n 被推断为 number 类型

泛型（灵活）版本：

1
2
3
4
5
6
7

function firstItem<T>(items: T[]): T | undefined {
  return items[0];
}

const a = firstItem([1, 2, 3]);        // a: number | undefined
const b = firstItem(['x', 'y']);      // b: string | undefined
const c = firstItem([true, false]);   // c: boolean | undefined

这里的T是一个占位符，代表调用者提供的任何类型。TypeScript会根据你传入的数组推断出T，这使得函数既灵活又类型安全。 如果你想要求更严格的行为，也可以在调用函数时强制指定具体的T：

1

const forced = firstItem<boolean>([true, false]); // forced 是 boolean | undefined 类型

如果你断言了一个与参数不兼容的特定泛型类型，编译器会报错——这正是泛型的意义所在。

实用建议

我通常从类型推断开始，只有在需要建立契约或者推断无法清晰表达结构时，才添加类型。在以下情况下使用显式类型：

• 你希望编辑器强制模块之间遵守特定的契约。
• 某个值可能初始为null，之后才会变成具体的类型。
• 你在编写可重用的工具函数（在那里使用泛型）。 反之，对于局部变量和简单的返回值，就让TypeScript去推断——这样可以在保持代码简洁的同时，依然获得大量的安全性和IDE（集成开发环境）的好处。

TypeScript的原始类型、数组、对象类型标注、Record和泛型涵盖了日常开发中的大部分需求。一旦你熟悉了这些，转换组件、连接props、hooks或Vue refs就会变得容易得多。