时间戳

首页 > 解决方案 > TypeScript 新手，这段代码有什么作用？

reactjs - TypeScript 新手，这段代码有什么作用？

问题描述

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

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

<GlobalStats tooltipContent={tooltipContent} />

大家好，我正在尝试理解开源代码，并且需要有关此特定行的帮助：

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

看起来它正在使用一个 javascript 对象并将其“投射”到一个界面中，但语法看起来与我在谷歌上搜索到的非常不同。

  1. 为什么第一个花括号中的 tooltipContent 后面还有一个逗号？
  2. 这是简写​​吗？
  3. 有人可以解构/eil5吗？

标签： reactjstypescriptinterface

解决方案

它做了两件事：它将具有tooltipContent属性的对象作为参数，其值为 type 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 代码中那样解构参数本身是最简洁的，因此通常是首选）

推荐阅读