TypeScript中安全地动态访问导入模块的成员-js教程-PHP中文网

TypeScript中安全地动态访问导入模块的成员

本文深入探讨了在TypeScript中，当尝试使用字符串变量动态索引导入模块的成员时遇到的类型安全问题。文章解释了TypeScript中字面量类型与普通字符串类型的区别，并提供了多种解决方案，包括使用const声明、as const断言，以及针对运行时动态键值场景的keyof typeof和satisfies运算符，以确保在动态访问模块成员时的类型安全性。

理解问题：动态字符串索引的类型安全挑战

在typescript中，当我们从一个模块导入内容并尝试通过字符串键来访问其成员时，可能会遇到类型检查错误。例如，考虑以下模块 my_file.ts：

// my_file.ts
export interface CustomType {
    propertyOne: string;
    propertyTwo: number;
}

export const MyThing: CustomType = {
    propertyOne: "name",
    propertyTwo: 2
};

export const AnotherThing: CustomType = {
    propertyOne: "Another",
    propertyTwo: 3
};

登录后复制

然后，在另一个文件中导入此模块并尝试访问其成员：

// main.ts
import * as allthings from "./my_file";

function doStuff() {
   let currentThing = allthings['MyThing']; // 这可以正常工作
   let name = 'MyThing';
   let currentThing2 = allthings[name]; // 报错：Element implicitly has an 'any' type...
}

登录后复制

当使用字面量字符串 'MyThing' 进行索引时，TypeScript能够精确地知道您正在访问 allthings 模块中名为 MyThing 的导出成员。此时，allthings 的类型 typeof import("./my_file") 包含一个明确的 MyThing 属性。

然而，当使用 let name = 'MyThing' 声明的变量 name 进行索引时，TypeScript会将其类型推断为更宽泛的 string 类型。由于 string 类型可以代表任何可能的字符串值，TypeScript无法保证 allthings 对象上存在一个与此任意字符串匹配的属性。为了维护类型安全，TypeScript会阻止这种潜在的不安全操作，并抛出以下错误：

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof import("dir/folder/my_file")'. No index signature with a parameter of type 'string' was found on type 'typeof import("dir/folder/my_file")'.

这个错误明确指出，typeof import("./my_file") 类型上没有一个索引签名允许使用任意 string 类型作为键。

解决方案：确保键的字面量类型

解决上述问题的核心在于确保用于索引的字符串变量具有字面量类型（literal type），而不是宽泛的 string 类型。

1. 使用 const 声明变量

当使用 const 关键字声明一个变量并立即赋予一个字符串字面量值时，TypeScript会将其类型推断为该字面量本身，而不是 string。

import * as allthings from "./my_file";

function doStuffWithConst() {
   const name = 'MyThing'; // 'name' 的类型被推断为字面量类型 'MyThing'
   let currentThing = allthings[name]; // 正常工作，TypeScript知道 'name' 只能是 'MyThing'
   console.log(currentThing.propertyOne); // 输出: name
}

doStuffWithConst();

登录后复制

通过将 name 声明为 const，TypeScript能够保证 name 的值在程序执行期间不会改变，并且它始终是字面量 'MyThing'。因此，类型检查器可以安全地允许此索引操作。

2. 使用 as const 类型断言

如果出于某种原因，您需要使用 let 声明变量（例如，在更复杂的逻辑中变量可能被重新赋值，尽管这与当前问题场景不符），但仍希望其初始值被视为字面量类型，可以使用 as const 断言。

import * as allthings from "./my_file";

function doStuffWithAsConst() {
   let name = 'MyThing' as const; // 'name' 的类型被推断为字面量类型 'MyThing'
   let currentThing = allthings[name]; // 正常工作
   console.log(currentThing.propertyTwo); // 输出: 2
}

doStuffWithAsConst();

登录后复制

as const 断言告诉TypeScript，将表达式推断为最窄的字面量类型。

处理运行时动态键值（更通用的方法）

上述方法适用于键值在编译时已知的情况。然而，在实际应用中，键可能来自外部输入（如API响应、用户输入），在编译时是未知的。在这种情况下，我们需要一种更通用的、类型安全的方式来处理动态索引。

为了实现这一点，通常需要将模块中的导出项组织成一个单一的对象，然后利用TypeScript的类型工具来定义有效键的类型。

1. 将导出项聚合为对象并使用 keyof

一种常见的模式是将所有相关的导出项聚合到一个对象中。这使得对这些项进行类型操作变得更加容易。

燕雀Logo

为用户提供LOGO免费设计在线生成服务

101

查看详情

首先，修改 my_file.ts，将所有 CustomType 实例聚合到一个对象中并导出：

// my_file.ts
export interface CustomType {
    propertyOne: string;
    propertyTwo: number;
}

export const allThingsExported = {
    MyThing: {
        propertyOne: "name",
        propertyTwo: 2
    },
    AnotherThing: {
        propertyOne: "Another",
        propertyTwo: 3
    }
};

// 确保 allThingsExported 中的所有项都符合 CustomType
// 我们可以通过类型断言或更安全的 satisfies 运算符来实现
// 这里我们先假设它们是 CustomType，后面会用 satisfies 增强

登录后复制

然后，在 main.ts 中，我们可以使用 keyof typeof 来获取 allThingsExported 对象的所有键的字面量联合类型，并定义一个函数来安全地访问这些成员：

// main.ts
import { allThingsExported, CustomType } from "./my_file";

// 定义一个类型，表示 allThingsExported 对象中所有可能的键
type AllThingKeys = keyof typeof allThingsExported; // 类型为 'MyThing' | 'AnotherThing'

function getValue(key: AllThingKeys): CustomType {
    return allThingsExported[key];
}

// 示例用法
let dynamicKey: AllThingKeys = 'MyThing'; // 可以是 'MyThing' 或 'AnotherThing'
let retrievedThing = getValue(dynamicKey);
console.log(retrievedThing.propertyOne); // 输出: name

dynamicKey = 'AnotherThing';
retrievedThing = getValue(dynamicKey);
console.log(retrievedThing.propertyTwo); // 输出: 3

// 如果尝试使用无效的键，TypeScript会报错
// let invalidKey: AllThingKeys = 'NonExistentThing'; // 报错

登录后复制

这种方法允许我们定义一个类型安全的接口，用于通过动态字符串键访问预定义的对象成员。

2. 结合 satisfies 运算符增强类型检查

在TypeScript 4.9+中引入的 satisfies 运算符提供了一种更优雅的方式来确保对象符合特定类型，同时保留其属性的字面量类型。这对于 keyof 场景非常有用，因为它可以在不拓宽对象类型的情况下进行类型检查。

修改 my_file.ts，使用 satisfies 运算符：

// my_file.ts
export interface CustomType {
  propertyOne: string,
  propertyTwo: number
}

// 使用 satisfies 确保 allThingsExported 中的所有值都符合 CustomType
// 同时保留 MyThing 和 AnotherThing 作为字面量键
export const allThingsExported = {
  MyThing: {
    propertyOne: "name",
    propertyTwo: 2
  },
  AnotherThing: {
    propertyOne: "Another",
    propertyTwo: 3
  }
} satisfies Record<string, CustomType>; // 确保所有键的值都是 CustomType

登录后复制

现在，allThingsExported 的类型仍然精确地知道它包含 MyThing 和 AnotherThing 两个键，并且这两个键对应的值都是 CustomType。

在 main.ts 中使用时，与上一个方法类似，但类型安全性得到了进一步保证：

// main.ts
import { allThingsExported, CustomType } from "./my_file";

// allThingsExported 的类型现在既是 Record<string, CustomType>
// 又保留了 MyThing 和 AnotherThing 的字面量键
type AllThingKeys = keyof typeof allThingsExported; // 依然是 'MyThing' | 'AnotherThing'

function getValueFromAllThings(key: AllThingKeys): CustomType {
    return allThingsExported[key];
}

// 示例用法
const keyFromUserInput = "MyThing"; // 假设这是运行时获得的字符串
// 此时需要进行类型断言或运行时检查，因为 keyFromUserInput 初始类型是 string
// 如果能确保 keyFromUserInput 是 AllThingKeys 中的一个，则可以安全地使用
if (Object.keys(allThingsExported).includes(keyFromUserInput)) {
    const thing = getValueFromAllThings(keyFromUserInput as AllThingKeys);
    console.log(`Retrieved: ${thing.propertyOne}`); // 输出: Retrieved: name
} else {
    console.log(`Key "${keyFromUserInput}" not found.`);
}

// 如果键在编译时已知，直接使用 const 声明是最好的方式
const knownKey: AllThingKeys = 'AnotherThing';
const anotherThing = getValueFromAllThings(knownKey);
console.log(`Another thing: ${anotherThing.propertyOne}`); // 输出: Another thing: Another

登录后复制

satisfies 运算符的优点在于，它在编译时检查了 allThingsExported 的结构是否符合 Record<string, CustomType> 的要求，但同时保留了其更具体的字面量类型信息，使得 keyof typeof allThingsExported 能够生成精确的键类型联合。

总结与注意事项

在TypeScript中处理动态字符串索引导入模块成员时，理解类型推断的机制至关重要。

字面量类型 vs. string 类型： TypeScript对字面量字符串（如'MyThing'）和const声明的字符串变量会推断出字面量类型，从而允许安全地进行索引。而let声明的字符串变量会被推断为宽泛的string类型，导致索引不安全。
const 和 as const： 当键值在编译时已知且固定时，使用 const 声明变量或 as const 断言是解决问题的最直接和推荐方法。它们确保了键的字面量类型，从而通过了TypeScript的类型检查。
keyof typeof 和 satisfies： 当键值在编译时未知，需要在运行时动态确定时，应采取更结构化的方法。将所有相关成员聚合到一个对象中，并结合使用 keyof typeof 来创建有效的键类型，以及 satisfies Record<string, YourType> 来确保聚合对象的类型一致性，是实现类型安全动态访问的强大模式。
运行时检查： 即使使用了 keyof typeof 定义了有效键类型，如果动态键来自外部输入，在将 string 类型的值传递给期望 AllThingKeys 的函数之前，仍然需要进行运行时检查（例如，Object.keys().includes()）或类型断言 (as AllThingKeys) 来确保类型安全。

通过选择适合您场景的解决方案，您可以在TypeScript中安全、高效地处理动态模块成员访问。

以上就是TypeScript中安全地动态访问导入模块的成员的详细内容，更多请关注php中文网其它相关文章！