什么是"PropTypes.oneOf"的打字稿等价物(将变量限制为值的子集)

Question

在反应中,我可以将变量限制为值的子集.喜欢

PropTypes.oneOf(['Home', 'About']),

我怎么做打字稿.

.

PS:我没有使用打字稿做出反应.

Answer 1

您可以通过定义联合类型来组合静态字符串(或任何常规类型):

type SomeType = 'Home' | 'About';

或者在界面内:

interface SomeType {
  prop : 'Home' | 'About';
}

当然,您也可以将其他类型组合在一起:

type SomeType = string | boolean;

Answer 2

您可以使用enum.

枚举允许我们定义一组命名常量。使用枚举可以更轻松地记录意图，或创建一组不同的案例。

枚举与联合类型

• 联合类型是一个编译时概念
• 枚举是运行时存在的真实对象
• 您可以遍历枚举
• ...看到这个问题

枚举示例：

enum PostStatus {
    DRAFT = "DRAFT",
    READY = "READY",
    PUBLISHED = "PUBLISHED",
}


class Post {
    constructor(private status: PostStatus) {
        this.status = status;
    }
}

const myPost = new Post(PostStatus.DRAFT);

console.log(myPost);

function doStuff(postStatus: PostStatus) {
    switch (postStatus) {
        case PostStatus.DRAFT: 
            console.log('Still working on it');
            break;
        case PostStatus.PUBLISHED:
            console.log('Done.');
        break;
        default:
            console.log('Other ...');
    }
}

联合类型示例：

type PostStatus = "DRAFT" | "READY" | "PUBLISHED";


class Post {
    constructor(private status: PostStatus) {
        this.status = status;
    }

}

const myPost = new Post("DRAFT");
console.log(myPost);

function doStuff(postStatus: PostStatus) {
    switch (postStatus) {
        case "DRAFT": 
            console.log('Still working on it');
            break;
        case "PUBLISHED": 
            console.log('Done.');
            break;
        default:
            console.log('Other ...');
    }
}

Answer 3

几种类型中只有一种类型是联合类型，在您的情况下是字符串文字的联合。

您可以将字符串文字数组转换为字符串文字的并集，如下所示：

如果你有一个 const 数组或字符串，你可以定义一个类型：

const menuList = ["Home", "About"] as const;
type menuName = typeof menuList[number] // "Home" | "About"

如果你已经有一个带有数组的类型，请执行以下操作：

type menuList = ["Home", "About"];
type menuItem = menuList[number] // "Home" | "About"