如何在打字稿中使用带有字符串类型的联合[重复]答案

【问题标题】：How to use union with string type in typescript [duplicate]如何在打字稿中使用带有字符串类型的联合[重复]
【发布时间】：2021-10-18 19:07:25
【问题描述】：

我想像这样在打字稿中创建自定义类型：

color?: 'textPrimary' | 'textSecondary' | string;

所以我们有一些默认值和其他字符串。

但打字稿将其转换为string | undefined

我怎样才能做到这一点？

【问题讨论】：

也许您正在寻找接口？
我不明白为什么一个类型会是两个特定的字符串和通用的string。编译器将始终允许其中包含任何字符串。你打算如何使用它？它被转换为字符串，因为字符串包含这两种特定的字符串类型。它也可能是未定义的，因为您没有在必须检查空值/未定义的严格模式下编译。
@MrJami 为什么是接口？请务必为您的 cmets 添加推理。
我想你正在寻找这个：stackoverflow.com/questions/68064202/how-to-type-a-color-prop
请参阅the answer 到这个重复的问题。

标签： typescript

【解决方案1】：

正如 Ben 所评论的，没有必要为您想要回退的那些额外值定义类型，因为它们也是 string 类型。

无论如何，您可能对使用enums 感兴趣，这样您就可以存储您尝试保存的那些“默认值”。这对您的代码的未来很有帮助，因此如果需要将这些值更改为另一个默认字符串，您只能更改 enum 而不是转到每个硬编码的字符串并一一更改。

做这样的事情：


enum defaultClasses {
    primary = 'textPrimary',
    secondary = 'textSecondary'
}

class baseProp {
    color?: defaultClasses | string
}

const prop = new baseProp()
prop.color = defaultClasses.primary
console.log(prop.color) # 'textPrimary'

【讨论】：

开箱即用的好想法！
我想用作 React 组件道具。我不确定创建类的实例是否好。
class 只是一个示例，在任何地方创建新类型时都可以使用它们。请注意，虽然有两种不同的方式无法对 React 属性进行类型检查，一种是使用 Typescript，它只会在编译时验证它们，另一种是使用 prop-types，它在运行时验证，this question may help。

【解决方案2】：

这没有意义。 “类型”只是变量、参数或对象属性可以采用的所有可能值的描述。

'textPrimary' | 'textSecondary' 类型的意思是'这个变量只能取值'textPrimary'或'textSecondary'。

string 类型表示“JavaScript 中字符串的所有合法值”——包括“textPrimary”和“textSecondary”，因此这些更具体的类型是多余的。因此，为什么 TypeScript 做了正确的事情并消除了它们。

【讨论】：