如何使用預定義的 object 鍵入 typescript 接口屬性？

Question

• 我有一個名為 Customer 的 typescript 接口。
• 我希望該接口的一個屬性 orderAuthorizationStatus 只是三個字符串之一：'unauthorized'、'waitingForAuthorization' 或 'authorized'
• 同時我想將這三個字符串存儲在某個地方，這樣我就可以將它們用於比較、翻譯等，而不是在我決定更改措辭時更改它們 10 次不同的時間。
• 我想使用存儲的字符串來輸入我的界面屬性，我目前有這個解決方案：

export const OrderAuthorizationStates = {
  unauthorized: "unauthorized",
  waitingForAuthorization: "waitingForAuthorization",
  authorized: "authorized"
}

export interface Customer {
  id: number;
  name: string;
  orderAuthorizationStatus: "unauthorized" | "waitingForAuthorization" | "authorized"
}

這有效並給了我我想要的錯誤：

let customer: Customer;

if (customer.orderAuthorizationStatus === 'asdf') {
 somecode
}

錯誤：“此條件將始終返回‘false’，因為類型‘‘unauthorized’ |‘waitingForAuthorization’ |‘authorized’’和‘‘asdf’’沒有重疊”
我也可以這樣使用它：

let customer: Customer;

if (customer.orderAuthorizationStatus === OrderAuthorizationStates.authorized) {
 somecode
}

我無法解決的是，如何使用我的 OrderAuthorizationStates object 的對象屬性來鍵入我的客戶界面的接口屬性：

export interface Customer {
  id: number;
  name: string;
  orderAuthorizationStatus: OrderAuthorizationStates.unauthorized | OrderAuthorizationStates.waitingforAuthorization | OrderAuthorizationStates.authorized
}

錯誤：找不到命名空間“OrderAuthorizationStates”

幫助將不勝感激！

Answer 1

字符串枚舉幾乎完全符合您的要求：

enum OrderAuthorizationStates {
    Unauthorized = "Unauthorized",
    WaitingForAuthorization = "WaitingForAuthorization",
    Authorized = "Authorized"
}

interface Customer {
    id: number;
    name: string;
    orderAuthorizationStatus: OrderAuthorizationStates;
}

let customer: Customer = { id: 1, name: "RichN", orderAuthorizationStatus: OrderAuthorizationStates.Unauthorized};
if (customer.orderAuthorizationStatus === "Unauthorized") {
    console.log("Customer is unauthorized");
}

// Authorize it!
customer.orderAuthorizationStatus = OrderAuthorizationStates.Authorized;

if (customer.orderAuthorizationStatus === OrderAuthorizationStates.Authorized) {
    console.log("Customer is now authorized");
}

// Output:
// Customer is unauthorized
// Customer is now authorized

此外，如果你這樣做if (customer.orderAuthorizationStatus === 'asdf')你會得到錯誤'This condition will always return 'false' since the types 'OrderAuthorizationStates' and '"asdf"' have no overlap.'，其中是你想要的。

Answer 2

找到了一種不使用枚舉的方法。

創建一個從 object 推斷出的類型：

export const OrderAuthorizationStatuses = {
    unauthorized: 'unauthorized',
    waitingForAuthorization: 'waitingForAuthorization',
    authorized: 'authorized'
}

type OrderAuthorizationStatus = typeof OrderAuthorizationStatuses[keyof typeof OrderAuthorizationStatuses]

現在，您可以在整個應用程序中使用 object 鍵作為變量，而不會對 enum.member 有任何類型誤解，您可以在其上使用所有 object 方法，此外，您還可以使用它來鍵入接口屬性或任何其他內容：

export interface Customer {
  id: number;
  name: string;
  orderAuthorizationStatus: OrderAuthorizationStatus
}

來源