首页 文章

React中的Typescript:道具类型检查不起作用

提问于
浏览
1

我在我的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;

服务道具应该包含数量(通过接口指定),但即使我从父组件传递字符串,它也可以工作,并且打字稿不会引发错误 .

函数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/**/*"]
}

请指教 .

1 回答

  • 2

    你的 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, {}> {
    ...
    

相关问题