Что нового в TypeScript, что делает этот кусок кода?

Question

interface CountryMap {
  ISO_A3?: string
  NAME?: string
  color?: string
}

export const GlobalStats = ({
  tooltipContent,
}: {
  tooltipContent: CountryMap
}) => {...}

<GlobalStats tooltipContent={tooltipContent} />

Привет, ребята, я пытаюсь разобраться с открытым исходным кодом и мне нужна помощь с этой строкой c:

({tooltipContent ,}: {tooltipContent: CountryMap})

Похоже, что он берет объект javascript и "приводит" в интерфейс, но синтаксис выглядит очень отличающимся от того, что Я гуглил.

1. Почему после всплывающей подсказки Content в первых фигурных скобках присутствует запятая?
2. Это сокращение?
3. Может кто-нибудь деструктировать / eil5?

Answer 1

Он делает две вещи: он принимает в качестве аргумента объект со свойством tooltipContent, значение которого имеет тип CountryMap. Вот что делает двоеточие:

: { tooltipContent: CountryMap }

(как и в любом списке аргументов, вы увидите что-то вроде argName: string, указывающее, что аргумент является строкой)

Это может Проясните синтаксис, если вы заранее сделали его именованным типом:

type Arg = {
  tooltipContent: CountryMap;
};

export const GlobalStats = ({
  tooltipContent,
}: Arg) => {...}

Кроме того, уничтожает свойство tooltipContent аргумента и переводит его в автономный. имя переменной для использования в теле функции.

В обычном Javascript без типов функция будет выглядеть следующим образом:

export const GlobalStats = ({ tooltipContent }) => {
  // reference tooltipContent here
};

, что эквивалентно

export const GlobalStats = (obj) => {
  const tooltipContent = obj.tooltipContent;
  // reference tooltipContent here
};

, что также эквивалентно

export const GlobalStats = (obj) => {
  const { tooltipContent } = obj;
  // reference tooltipContent here
};

(деструктурирование самого аргумента , как в исходном коде Typescript, является наиболее лаконичным, поэтому его часто предпочитают)