未检查 React 类型（脚本）道具答案

【问题标题】：React typed(script) props are not checked未检查 React 类型（脚本）道具
【发布时间】：2018-07-28 10:59:36
【问题描述】：

我正在使用 React 开始一个全新的应用程序，我第一次尝试使用 TypeScript。我有一个 React 组件，例如：

import React, { SFC } from 'react';

type Props = {
    username: string
};

export const Navbar: SFC<Props> = ({ username }: Props) => (
    <div>Hello {username}!</div>
);

它编译正确。但是，Visual Code 不会警告我有关我的组件的无效使用：

{/* no required username */}
<Navbar />

{/* number instead of string */}
<Navbar username={12} />

这是我的tsconfig.json 配置：

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "commonjs",
    "target": "es5",
    "lib": ["es6", "dom"],
    "esModuleInterop": true,
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "./",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  },
  "exclude": ["node_modules", "build"],
  "types": ["typePatches"]
}

我希望我的 IDE 和编译器会警告我这种误用。但这种情况并非如此。我错过了什么？这是预期的行为吗？还是只是配置错误？

【问题讨论】：

应该可以了，你是如何导入导航栏的？
带有import Navbar from './Navbar。所以这可能是一个 IDE 问题？
编译器未能抱怨您对<Navbar /> 的错误使用 - 这些是在 .jsx 文件还是 .tsx 文件中？
确实，这是一个.js 文件。我的错！非常感谢！ :)

标签： reactjs typescript

【解决方案1】：

如果您的所有代码都位于扩展名为 .tsx 的文件中，那么您应该会得到您期望的行为。

如果您在 .jsx 文件中使用 <Navbar />，则可以通过在 tsconfig 中添加 "checkJS": true 来让编译器抱怨。

奇怪的是，我在tsconfig docs 中没有看到任何提及checkJS，尽管它记录在compiler options docs 中。

tsconfig 文档中的这一遗漏最初让我相信只需要 allowJS 标志就可以让编译器抱怨 js 或 jsx 文件中的错误。

编译器选项文档确实正确地指出checkJS 标志需要与allowJS 标志一起使用。

【讨论】：