TS — 在React中使用TS（基础使用）

在 React 中使用 TypeScript（TS）是一种很常见的做法，因为 TypeScript 提供了静态类型检查和其他一些有用的功能，可以帮助您更好地开发和维护 React 应用。

1.原始组件：

// SimpleComponent.js
import React from 'react';

const SimpleComponent = ({ name }) => {
  return <div>Hello, {name}!</div>;
};

export default SimpleComponent;

2.转为TS语言：

// SimpleComponent.tsx
import React from 'react';

interface SimpleComponentProps {
  name: string;
}

const SimpleComponent: React.FC<SimpleComponentProps> = ({ name }) => {
  return <div>Hello, {name}!</div>;
};

export default SimpleComponent;

我们定义了一个名为 SimpleComponentProps 的接口，用于指定 name 属性的类型。然后，我们将这个接口传递给 React.FC（函数组件）类型，并使用泛型来指定组件属性的类型。

3.使用组件：

import React from 'react';
import SimpleComponent from './SimpleComponent';

const App: React.FC = () => {
  return <SimpleComponent name="John" />;
};

export default App;