小编Kul*_*ora的帖子

我正在学习 TypeScript，有些东西让我感到困惑。一位如下：

interface Props {
  name: string;
}

const PrintName: React.FC<Props> = (props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>
        {props.name}
      </p>
    </div>
  )
}

const PrintName2 = (props: Props) => {
  return (
    <div>
      <p style={{ fontWeight: props.priority ? "bold" : "normal" }}>
        {props.name}
      </p>
    </div>
  )
}

对于上面的两个功能组件，我看到 TypeScript 生成了相同的 JS 代码。PrintName2就可读性而言，该组件对我来说似乎更加精简。我想知道这两个定义之间有什么区别，是否有人在使用第二种类型的 React 组件？

我使用 create-react-app 创建了一个 react-typescript 项目。我看到 package.json 如下所示：

"dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^24.9.1",
    "@types/node": "^12.12.26",
    "@types/react": "^16.9.19",
    "@types/react-dom": "^16.9.5",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.1",
    "typescript": "^3.7.5"
  },

*

没有 dev-dependencies 部分，为什么它将 typescript（和 @types）放在 dependencies 部分？不仅如此，官方的 create-react-app 页面也会安装没有 -D/save-dev 标志的类型/打字稿。如果消费者在使用我的包时可能会依赖某些类型作为重复问题的建议，为什么这种行为不是每个地方都默认？我在这里缺少什么？官方文档中没有提到这一点。甚至打字稿文档将其安装为 save-dev。 https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

* 官方链接https://create-react-app.dev/docs/adding-typescript/