React中的打字稿：道具类型检查不起作用

Question

我在我的React应用程序中使用Typescript。 我想严格检查传递给组件的道具类型，如果不匹配则抛出错误。

import React from "react";
import styles from "./ServiceDetailCard.css";

type Service = {
    amount: string;
    comments: string;
};

interface IProps {
    service: Service;
    myFunc: (count: number) => void; // The function passed from parent has different return type(boolean) and defaul param as string type. But typescript doesnt throw error. 
}

class ServiceDetailCard extends React.Component<IProps, any> {

    render() {
        console.log(typeof this.props.service.amount); // This prints number. Typscirpt should have thrown an error since interface specified is string. But it doesnt.
        return (
            <div className={styles.serviceDetailCard}>
                <div className={styles.amount}>
                    <span className={styles.figure}>{this.props.service.amount}</span>
                </div>
            </div>
        );
    }
}

export default ServiceDetailCard;

import React from "react";
import styles from "./ServiceDetails.css";
import ServiceDetailsCard from "./ServiceDetailCard";

class ServiceDetails extends React.Component {
    render() {
        return (
            <div className={styles["service-details"]}>
                {this.props.data.map((service, index) => {
                    service.amount = 10; // To test, manually setting amount as number so that Typescript should throw error. But it doesnt.
                    return <ServiceDetailsCard key={index} service={service} myFunc={test} />;
                })}
            </div>
        );
    }
}

function test(number = 10) { // To test, manually setting the default param as string so that Typescript should throw error. But it doesnt.
    return true; // To test, manually setting return as boolean so that Typescript should throw error. But it doesnt.
}

export default ServiceDetails;

服务道具应该包含金额（以数字形式指定）（通过Interface指定），但是即使我从父组件传递了字符串，它也可以正常工作并且Typescript不会引发错误。

与函数prop myFunc相同，该函数期望数字参数并且返回类型为void。 但是我传递了不同类型的默认参数，并且返回类型为布尔值。

为什么打字稿不抛出错误？

这是我的.tsconfig：

{
    "compilerOptions": {
        "outDir": "./www/",
        "sourceMap": true,
        "noImplicitAny": true,
        "strict": true,
        "strictNullChecks": true,
        "module": "es6", // specify module code generation
        "moduleResolution": "node",
        "jsx": "react", // use typescript to transpile jsx to js
        "target": "es5", // specify ECMAScript target version
        "allowJs": true, // allow a partial TypeScript and JavaScript codebase
        "allowSyntheticDefaultImports": true
    },
    "include": ["./src/**/*"]
}

请指教。

Answer 1

您的ServiceDetails未指定道具类型，因此this.props.data值为any 。 TypeScript不会从设置值推断任何类型。

let services: any;
services.ammount = 42;
// services is still any, and services.ammount also is any.

要解决此问题，请显式声明ServiceDetails道具。

 interface Service {
     ammount: number;
 }

interface ServiceDetailsProps {
    services: Service[];
}

class ServiceDetails extends React.Component<ServiceDetailsProps, {}> {
...