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接收的數據類型進行定義

以上。