代码之家 › 专栏 › 技术社区 › AnArrayOfFunctions

Typescript react/redux指南-如何从js翻译?

react-redux visual-studio-code typescript javascript

2

AnArrayOfFunctions · 技术社区 · 7 年前

我在翻译这个 guide . 以下是我迄今为止翻译的代码(在Todo.tsx中):

import * as React from 'react'
import * as PropTypes from 'react';

interface ITodo
{
  onClick : ()=>void,
  completed : boolean,
  text : string
}
â
const Todo = ({ onClick, completed, text } : ITodo) => (
  <li
    onClick={onClick}
    style={ {
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)

Todo.propTypes = {
  onClick: PropTypes.func.isRequired,
  completed: PropTypes.bool.isRequired,
  text: PropTypes.string.isRequired
}

自 PropTypes bool func string 成员。

3 回复 | 直到 7 年前

1

Sam A. Horvath-Hunt 7 年前

allowSyntheticDefaultImports 或者是最近的一个名字,我不知道你的名字 tsconfig.json import * as .

第三,你应该把你的证监会定义为 React.SFC

const Todo: React.SFC<ITodo> = (props) => ();

2

1

Matt McCutchen 7 年前

替换 import * as PropTypes from 'react'; import * as PropTypes from 'prop-types';

3

0

Kevin Amiranoff 7 年前

import * as React from 'react'
import * as PropTypes from 'react';

这两条线很奇怪,我不确定它们是否起作用。 React 和 PropTypes v15.5 在上面应该是:

import React from 'react';
import PropTypes from 'prop-types';

如果您使用的是较低版本的React,则还可以执行以下操作:

import React, { PropTypes } from 'react';

在你的 TypeScript 问题:

您可以删除 propTypes 声明,因为您已经用 打字稿 使用 interface 你宣布了。因此 道具类型 变得无用。

你还可以用 defaultProps 如果你的道具是可选的