typescript - 如何使用TS根据传入的`property`得到对应的数据呢？

Question

如何使用TS根据传入的property得到对应的数据呢？比如JS中常常会根据动态的属性获取结果，如下：

const data = {    name: 'name',    age: 'age',};const type1 = data['name'];  // nameconst type2 = data['sex'];   // undefined

在TS中，可以这样做：

const data: Partial<Record<string, string>> = {    name: 'name',    age: 'age',};const type1 = data['name'];  // string | undefinedconst type2 = data['sex'];    // string | undefined

我需要明确根据提供的property获取类型，该怎么做呢？

const type1 = data['name'];  // stringconst type2 = data['sex'];    // undefined

Answer 1

在 TypeScript 中，你可以使用类型断言来明确指定你希望根据提供的 property 获取的类型。类型断言允许你为变量指定一个确切的类型，即使 TypeScript 的类型检查器不能自动推断出该类型。

下面是一个示例，展示了如何使用类型断言来实现你所描述的需求：

const data: Record<string, string> = {  name: 'name',  age: 'age',};// 使用类型断言明确指定 'name' 属性的类型为 stringconst type1 = data['name'] as string;  // string// 尝试获取 'sex' 属性，并使用类型断言明确指定其类型为 stringconst type2 = data['sex'] as string;  // undefined

在上面的示例中，我们定义了一个 data 对象，其属性类型为 Record<string, string>，这意味着每个属性都是一个字符串。然后，我们使用类型断言 as 关键字来明确指定我们希望 data['name'] 的类型为 string，同样也尝试明确指定 data['sex'] 的类型为 string。

需要注意的是，如果尝试访问的属性不存在于对象中，TypeScript 会将其视为 undefined 类型，而不是抛出错误。因此，在上述示例中，type2 的类型是 undefined，而不是 string。如果你希望在属性不存在时抛出错误，可以使用非空断言操作符 !，例如：

const type2 = data['sex']! as string;  // 错误：Property 'sex' does not exist on type 'Record<string, string>'.

上述代码会引发编译时错误，因为 data 对象中不存在名为 sex 的属性。