Question

我已经做了一个简单的示例，重点介绍了TypeScript遇到的一些问题/不足。我创建了一个简单的汽车列表，其中引用了caritem详细视图。代码在下面，也在此处进行闪电战：

https://stackblitz.com/edit/react-ts-ocjswh

我的问题：

如何在CarItem.tsx中进行类型检查？我试过汽车：汽车，但这是不正确的
导入react和react-dom的正确方法是什么？我尝试导入没有成功
我想在index.tsx和CarItem.tsx之间共享我的界面“ Car”，因此，如果我添加另一个属性，则不必将其添加到两个地方。一旦我的项目中包含大量接口，什么是最好的方法？

Index.tsx

import * as React from 'react';
import { render } from 'react-dom';
import CarItem from './CarItem';

interface Car
{
  id: number,
  model: string
}

interface Cars {
  cars: Car[];
}


const App : React.FunctionComponent<Cars>  = ({cars}) => {

  const myCars = [{
    id: 101, model: 'midget'
  },{
    id:102, model: 'spitfire'
  },{
    id: 103, model: 'tr6'
  }]

  return (
    <ul>
      {myCars.map(function(data){
          return (
          <CarItem car={data} />
          )
        }
      )}
    </ul>
  );
}

render(<App />, document.getElementById('root'));

CarItem.tsx

import * as React from 'react';

interface Car
{
  id: number,
  model: string
}

export default ({car}) => {
  return (
    <li key={car.id}>...{car.model}</li>
  )
}

Answer 1

此代码存在很多问题。我对其进行了重构，并尝试修复所有问题。您的问题的答案：

我修复了CarItem的类型
导入没有问题，它们可以正常工作。编辑器有一些语法突出显示问题。
您也可以导出和导入接口。

这是已更正的文件

index.tsx

import * as React from 'react';
import ReactDOM from 'react-dom';
import CarItem, {Car} from './CarItem';

const App : React.FunctionComponent  = () => {

  const myCars: Car[] = [{
    id: 101, model: 'midget'
  },{
    id:102, model: 'spitfire'
  },{
    id: 103, model: 'tr6'
  }]

  return (
    <ul>
      {myCars.map(function(data){
          return (
           <CarItem key={data.id} car={data} />
          )
        }
      )}
     </ul>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

CarItem.tsx

import * as React from 'react';

export interface Car
{
  id: number,
  model: string
}

interface Props {
  car: Car;
}

const CarItem: React.FunctionComponent<Props>  = ({car}) => {
  return (
    <li>...{car.model}</li>
  )
}

export default CarItem;

项目：https://stackblitz.com/edit/react-ts-uknhel?file=index.tsx

如何在类之间共享Car接口并向CarItem类添加类型检查？

1 个答案: