Как вы динамически устанавливаете значение для свойства размера сетки MaterialUI в TypeScript?

Question

При использовании свойств размера сетки, таких как XL, как вы можете динамически передать ему значение в TypeScript?

Например, * Обновите, например, пояснение

import Grid, { GridSize } from "@material-ui/core/Grid";
let value: GridSize = 12/4;
xl={value}

Тип 'number' не может быть назначен типу 'GridSize'

Если я установил такой тип, как,

type gridSize = boolean | "auto" | 1 | 2 | 12 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | undefined

Тип 'number' не может быть назначен набрать логическое значение | "авто" | 1 | 2 | 12 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | undefined'.ts (2769)

Это та же проблема, как мне преобразовать число в этот тип?

** Ответ, помеченный ниже, который помог, в конце концов, я бросил это как GridSize и добавил несколько модульных тестов вокруг него для пограничных случаев.

let value = 12/4 как GridSize

Answer 1

Уже определен тип GridSize , который вы можете использовать в коде

export type GridSize = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;

Пример

import Grid, { GridSize } from "@material-ui/core/Grid";

const App = () => {
  let size: GridSize = 1;

  return <Grid xl={size}>
  </Grid>
}

render(<App />, document.getElementById("root"));

- Редактировать

Я вижу, что xl prop также принимает boolean и undefined

Вы также можете расширить тип GridSize, чтобы включить эти два.

type NewGridSize = GridSize | boolean | undefined;

let size: NewGridSize  = undefined;

- -Edit

В Typescript нет такого расширенного анализа управления потоком, чтобы предположить, что это 3

В таком случае вам нужно сделать грязный трюк, чтобы преобразовать его в любой.

let value: GridSize = 12/4 as any;

Или вы можете сделать typeguard (хотя это было бы излишним)

function compute(value: any): value is 3 {
  return value;
}