在TypeScript中将字符串转换为字符串文字的更好方法

Question

我正在使用已定义的第三方

editorStylingMode?: 'outlined' | 'underlined' | 'filled';

现在我在environment.ts（以Angular为单位）中设置值，如下所示

export const environment = {
    production: true,
    editorStylingMode: 'filled'
};

然后从环境分配值时，我的代码出现错误

config({
    editorStylingMode: environment.editorStylingMode,
});

  

类型'string'不能分配给类型'“ filled” | “概述” | “带下划线”'

我尝试了以下这些解决方案，它们起作用了

解决方案1 ​​

    config({
        editorStylingMode: environment.editorStylingMode as 'filled' | 'outlined' | 'underlined',
    });

解决方案2

export const environment: {
    production: boolean,
    editorStylingMode: 'filled' | 'outlined' | 'underlined',
} = {
    production: false,
    editorStylingMode: 'filled'
};

只是想知道是否有更清洁的方法？

Answer 1

如果您的environment是只读的（即使const不能保证深度不变，const也是出于意图），您可以使用{ as const上的{1}}断言

environment

这将使对象类型为export const environment = { production: true, editorStylingMode: 'filled' } as const; ，但也将保留所有文字类型。您也可以只在字段上使用readonly来保留文字类型

as const

如果打字稿由于特定的值而无法确定分支，则这两个选项都可能导致问题。避免重复的另一种方法是使用类型查询到达所需的并集。

export const environment = {
    production: true,
    editorStylingMode: 'filled' as const
};

或者如果不能引用该类型，则可以使用function参数：

export const environment = {
    production: true,
    editorStylingMode: 'filled' as Exclude<TypeFromLibThatCOntainsTheField['editorStylingMode'], null | undefined>
};

这些都不一定要短一些，但它们可以避免重复

Answer 2

我将从创建type EditorStylingMode = "outlined" | "underlined" | "filled"开始，使您的类型断言更加容易。它还集中化了对EditorStylingMode存在哪些有效值的定义（例如，如果您向EditorStylingMode添加新选项，则无需在整个应用程序中更新"outlined" | "underlined" | "filled"的每个实例）

然后，您可以将environment导出为：

export const environment = {
    production: true,
    editorStylingMode: 'filled' as EditorStylingMode,
};

配置将是：

config({
    editorStylingMode: environment.editorStylingMode,
})

甚至更好的是，您可以将environment的类型定义为：

// environment.js
export interface Environment {
    production: bool;
    editorStylingMode: EditorStylingMode,
}

export const environment: Environment = {
    production: true,
    editorStylingMode: 'filled',
};

在这两种解决方案中，您都可以按照期望的方式正确键入environment。但是，使用第二个选项，您还可以单独导入Environment类型并在其他地方使用它。例如，这使得可以将config声明为：

// config.js
import { Environment } from "./environment";

export function config(env: Environment) { ... }

...

// main.js
import { environment } from "./environment";
import { config } from "./config";

config(environment);

Answer 3

更简洁的方法如下：

Environment.interface.ts ：

  export interface Environment {
      production: boolean;
      editorStylingMode: 'filled' | 'outlined' | 'underlined',
    }

Environment.ts ：

import { Environment } from './environment.interface';

export const environment: Environment = {
  production: false,
  editorStylingMode: 'filled'
};

这是因为我们创建了一个接口，该接口显式列出了环境对象中所需的属性。