React+TypeScript+antd

类组件：

import * as React from 'react';
// antd 
import {
    
     ... } from 'antd';
class MessageDetail extends React.Component<any, any>{
    
    
	  	constructor(props: any) {
    
    
    		super(props);
		}
		// 全局变量，无必要不需将变量定义在这里 
		public state = {
    
    
				list:[] 
		}
		public async componentWillMount() {
    
    
			// 可以去请求接口去做一些对页面的初始化渲染
		}
		// 声明函数 函数一旦声明，必须有调用
		private fn=(num:number) =>{
    
     // 传参需要定义其参数的类型 number：数字类型 
			console.log(num)
		}
		public render() {
    
    
			// 这里用来解构或定义一些参数或函数 用于渲染
			const title:string = "这里是标题"

			return (
				// jsx语法
				<div> 
						{
    
    title}
						// 声明函数的时候定义了参数，那么使用的时候必须传递参数
						// 若内部没有标签或内容，则不允许出现双标签，必须使用单标签
						<div onClick={
    
    this.fn(3)} style={
    
    {
    
    width:"300px",height:"200px"}} />
				</div>
			)
		}
}
export default MessageDetail;

函数组件：

import * as React from 'react';
import Api from '@api';
import {
    
     ... } from '@util';
import "./index.less"; // css
// 接口 相当于自己的定义的类型，一般用来规范api的入参，函数的入参等等
interface type {
    
    
  str: string;
  // 方法
  onSubmit: (params: any) => {
    
    };
}
const MessageForm = ({
    
    
  str,
  onSubmit,
}: type) => {
    
    
	// 定义变量和函数
	// loading 定义的变量名 setLoading 修改变量需要调用的方法 
	// useState<boolean>(false); loading的初始值为false 定义了loading是boolean类型
	const [loading, setLoading] = useState<boolean>(false);
	return (
		// jsx语法
		<div>
			{
    
    
				loading?"加载中":"加载完成"
			}
			<button onClick={
    
    setLoading(loading=!loading)}>变化状态</button>
		</div>
	)
}
)
export default MessageForm;