react+tsx实例

想要开始react+tsx开发，可以根据实例来做

安装：

基于react-app脚手架使用：
yarn create react-app myapp --template typescript

尝试新建一个子组件

新建Hello.tsx

/*
 * @Descripttion:
 * @version:
 * @Author: jack
 * @Date: 2021-09-04 10:36:16
 * @LastEditors: jack
 * @LastEditTime: 2021-09-04 10:48:15
 */
import React from "react";
interface Ihello {
  message?: string;
}
// React.FunctionComponent : 用于描述函数式组件 FC是其别名，因而也可以使用React.FC来替代
const Hello: React.FunctionComponent<Ihello> = (props) => {
  return <div>hello,{props.message}</div>;
};
Hello.defaultProps = {
  message: "一杯阿萨姆",
};
export default Hello;

解读

这个组件接收一个message值，默认为一杯阿萨姆,可以使用interface对props接收的数据类型进行定义

以上。