Как проверить тип значения перед присвоением?

Question

Мне нужно передать строку в опору name компонента React.

Например:

<Column name="address" />

Опора name принимает любую строку, но я бы хотел бы ограничить его конкретным типом c, например:

type ColumnNames = "address" | "phone"

Итак, я хотел бы, чтобы Typescript проверял, что строка, которую я передаю в опору name, является либо «адресом», либо phone ".

Мой текущий способ сделать это - определить фиктивную функцию только для проверки типов аргументов:

const typecheckColumnNames = (value: ColumnNames) => value

Затем, чтобы передать строку в свойство name, я будет делать что-то вроде этого:

<Column name={typecheckColumnNames("address")} /> // OK

<Column name={typecheckColumnNames("hello")} /> // type error: "hello" is not "address" nor "phone"

Но у этого подхода есть недостаток в виде накладных расходов времени выполнения функции и визуального шума.

Итак, у Typescript есть любая встроенная функция для выполнения это?

Answer 1

для изменения типов свойств компонента библиотеки, вы можете повторно экспортировать его с измененными свойствами:

import {Column as _Column} from "YOUR_LIBRARY";

interface FixedProps extends React.ComponentProps<typeof _Column> {
    name: "phone" | "address"
}
export const Column: React.ComponentType<FixedProps> = _Column as any;