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的文件中，那么您应该只获得预期的行为。

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

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

tsconfig文档中的这一遗漏最初使我相信，仅需要allowJS标志就可以使编译器投诉js或jsx文件中的错误。

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

未检查React类型的（script）道具

1 个答案: