Question

我正在使用TypeScript的每晚构建版本（版本1.9.0-dev.20160218），并尝试在我的功能反应组件中使用静态类型道具的任何方法。

当前代码似乎没有编译错误，并且工作得很好。但是因为我已将myvar设置为Number类型，但实际上将其指定为String，我预计会出现编译时错误。

TypeScript当前是否支持功能组件中的props的严格类型，或仅支持类？

interface Props extends React.Props {
    mynumber: Number
}

var MyComponent = (props: Props) => {
    return <p>My variable: {props.mynumber}</p>;
};

var MyContainer = () => {
    const mystring:String = '123';
    return <MyComponent myvar={mystring}/>
};

Answer 1

此代码按预期工作：

/// <reference path="../DefinitelyTyped/react/react.d.ts" />

import * as React from 'react';

interface Props extends React.Props<any> {
    mynumber: Number
}

var MyComponent = (props: Props) => {
    return <p>My variable: {props.mynumber}</p>;
};

var MyContainer = () => {
    const mystring:String = '123';
    return <MyComponent myvar={mystring}/>
};

test.tsx（15,12）：错误TS2324：属性＆＃39; mynumber＆＃39;缺少类型＆＃39; IntrinsicAttributes＆amp;道具＆＃39 ;. test.tsx（15,25）：错误TS2339：属性＆＃39; myvar＆＃39;类型＆＃39; IntrinsicAttributes＆amp;道具＆＃39;

看起来你有一个过时的react.d.ts，或其他错误，你的代码示例不具代表性。

另外，从不使用String或Number。这些不是您想要的类型 - 分别使用string和number

功能组件中的接口道具

1 个答案: