什么是 TypeScript 等同於“PropTypes.oneOf”（將變量限制為值的子集）

Question

在 React 中，我可以將變量限制為值的子集，例如

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

我如何在 TypeScript 中執行此操作？

PS：我沒有在 React 中使用 TypeScript。

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"

Answer 4

這是一個使用枚舉類型、反應道具類型和 typescript 道具的解決方案

export enum AppPage {
  Home = 'Home',
  About = 'About',
}
export MyComponentProps = {
  page: AppPage
}
export MyComponentPropTypes = {
  page: PropTypes.oneOf<AppPage>(Object.values(AppPage)).isRequired
}

export MyComponent = (props:MyComponentProps) => {
  return <div></div>
}

MyComponent.propTypes = MyComponentPropTypes