'string' 类型的参数不可分配给 '"A" 类型的参数 | "B"' 尝试将可能的值分配给字符串时

Question

我有两个来自 select 选项的值。为了更好的可读性，我定义了用户可以选择的仅有的两个可能值，但是我在使用这种方法时遇到类型错误：

HTML:

<div>
    SERVER
    <mat-select (selectionChange)="onChange($event)">
        <mat-option value="A">Server A</mat-option>
        <mat-option value="B">Server B</mat-option>
    </mat-select>
</div>

TS:

const SERVERS = {
  SERVER_A: "A",
  SERVER_B: "B",
}

private origin: typeof SERVERS.SERVER_A | typeof SERVERS.SERVER_B = SERVERS.SERVER_A;

onChange(e) {
    this.server = e.value;
    this.setServer(this.server); // Argument of type 'string' is not assignable to parameter of type '"A" | "B"'.
}

setServer(server: "A" | "B"): void { }

我是不是做错了，或者这是不可能的？

Answer 1

或许，您可以创建一个 type，它是 valueof SERVERS.

const SERVERS = {
  SERVER_A: 'A',
  SERVER_B: 'B',
} as const;

type SERVERS_VALUE = typeof SERVERS[keyof typeof SERVERS];

并用 SERVERS_VALUE 类型声明 server。

server: SERVERS_VALUE;

这个方法可以修改为

setServer(server: SERVERS_VALUE) { }

而不是：

setServer(server: 'A' | 'B') { }

Sample Demo on StackBlitz

参考

Objects vs Enums

'string' 类型的参数不可分配给 '"A" 类型的参数 | "B"' 尝试将可能的值分配给字符串时

Argument of type 'string' is not assignable to parameter of type '"A" | "B"' when trying to assign possible values to a string

html

types

event-handling

typescript

angular

参考