不检查React类型（脚本）道具

Question

我正在使用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和编译器警告我这个误用。 但这种情况并非如此。 我错过了什么？ 这是预期的行为吗？ 或者只是一个配置错误？

Answer 1

如果所有代码都存在于扩展名为.tsx文件中，那么您应该只获得预期的行为。

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

---

奇怪的是，我没有在tsconfig文档中看到任何提及checkJS的内容 ，尽管它在编译器选项文档中有记录 。

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

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