Использование Typescript для создания react компонента «Простой фабрики»

Понятно, не знал.

Кстати, я поигрался с flow, там есть синтаксис для exact object types {| ... |}, поэтому можно заставить компилятор ругаться на лишние поля.

Exact object types benefits in Flow

Правда, мое мнение это балоство. В реальности ниразу я не сталкивался с ошибками вида "ой лишние поля".

Использование Typescript для создания react компонента «Простой фабрики»

Согласен, тут кому что нравится!

Кстати, сначала я не понял зачем вы используете литеральный тип "type", но проигравшись понял что иначе typescript не понимает что речь идёт про окружность например. Хотя казалось бы если указан radius, то ни width ни height уже быть не может.

Простейший пример:

interface Circle { radius: number}
interface Rect { width: number, height: number}

function test (fig: Circle | Rect) {
  if ("radius" in fig) {
    console.log(fig.radius) // code completion gives only radius
  } else {
    console.log(fig.width) // gives only width and height, nice!
    console.log(fig.radius) // compilation error, super!
  }
}

test({radius: 1, width: 2}) // no errors, wtf?

Это странно!

Использование Typescript для создания react компонента «Простой фабрики»

Спасибо за интересную статью.

Сам я пишу на JavaScript + Vue и никогда не писал ни на TS ни на React. Вы заставили меня с ними поковыряться, потому что привели реальный интересный пример.

Честно говоря я бы предпочел сделать через merge типов (&), для меня это выглядит более лаконичным. Уверен что все подсказки и бенефиты из ваших примеров работают и здесь.

type CircleProps = { radius: number }
const Circle = ({ radius }: CircleProps) => ...

type RectProps = { width: number; height: number }
const Rect = ({ width, height }: RectProps) => ...

type FigureCircle = { type: 'circle' } & CircleProps
type FigureRect = { type: 'rect' } & RectProps

const Figure = (props: FigureRect | FigureCircle) => {
  switch (props.type) {
    case 'circle':
      return <Circle {...props} />

    case 'rect':
      return <Rect {...props} />

    default:
      return null
  }
}

Но вообще мне кажется вы недооцениваете JavaScript. Все тоже самое, со всеми подсказки и плюшками возможно сделать и на JS.

function getFigure() {
  return {
    circle({ radius = 0 }) {
      return <div>I'm a circle {radius}</div>
    },

    rect({ width = 0, height = 0 }) {
      return <div>I'm a rect {width}, {height}</div>
    }
  }
}

export default function App() {
  const type = 'rect'

  return (
    <>
      {getFigure()[type]({ width: 123, height: 321 })}
      {getFigure().circle({ radius: 42 })}
    </>
  )
}

И сюрприз-сюрприз, получать хинты можно прямо в IDE, включая тип number для аргументов. Ниже результат.

А при правильно настроенном ESLint и юнит тестах, разницы с TS вы не заметите, кроме более простого и понятного кода.