React使用typescript

使用ts

1. 类型断言
   语法： 值 as 类型
   如果在不确定类型的时候就想访问一个类型确定的属性和方法，就需要【断言】
   不能滥用as any，也不能完全否定它的作用，需要在类型的严格性和开发的便利性之间掌握平衡。
2. React.FC

React.FC是函数式组件，是在TypeScript使用的一个泛型，FC就是FunctionComponent的缩写，事实上React.FC可以写成React.FunctionComponent：

使用了React.FC就是函数式组件，语法一致
3. enum 枚举
当引入antd的组件并且组件定义了已有的属性值时，比如Button的size，就需要枚举，因为size定义了已知的常量。

enum size {
	large = "large",
	small = "small"
}
// 使用
<Button size={props: size}></Button>

4. 函数声明

//必传x,y并且类型都为number，返回值为布尔
function fun1(x:number,y:number):boolean{
	return x>y
}
fun1(1,3)

//不返回值，类型为void
function fun1(x:number,y:number):void{
	console.log(x,y)
}

//x必传，y为可传可不传 默认值为1; 返回值为数组类型，数组的每个值为number
function fun1(x:number,y:number=1):number[]{
	return [x,y]
}
fun1(2)

5. 泛型
   主要作用是在使用函数得时候，确定函数得传入参数和返回参数得类型。

可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据。 这样用户就可以以自己的数据类型来使用组件。

function fun1<T, W>(x: T,y:W): W {
    return y
}
fun1<string, boolean>('1',false)

interface Len{
	length: number
}
//T继承接口Len，代表实参必须有length这个属性才可以
funtion fun<T extends Len>(args:T):T{
	return args.length
}
fun("abc") // 3  字符串是有length属性的
fun({})//报错，因为对象本身没有length属性
fun({length:5}) //不报错
fun(4)//报错，number数据没有length属性
fun(null)//报错

6. 基础类型
   布尔值，数字，字符串，数组，对象，元组，枚举，Any,void,nerver, null, undefined, 类型断言
7. 函数式组件的声明方式

type AppProps = {
  message: string
}

const App: React.FC<AppProps> = ({ message, children }) => (
  <div>
    {message}
    {children}
  </div>
)

8. useState 一开始值为空时，需要显示的声明类型

type User = {
  name: string
  age: number
}
const [user, setUser] = React.useState<User | null>(null)

9. useRef
   当初始值为 null 时，有两种创建方式:

const ref1 = React.useRef<HTMLInputElement>(null)
const ref2 = React.useRef<HTMLInputElement | null>(null)

有几种引用方式：HTMLDivElement， HTMLInputElement， HTMLButtonElement
两种方式区别：
第一种方式的 ref1.current 只读的，并且可以传递给内置的 ref 属性，绑定 DOM 元素 ；
第二种方式的 ref2.current 是可变的（类似于声明类的成员变量）

10. props
    通常我们使用 type 来定义 Props，为了提高可维护性和代码可读性，在日常的开发过程中我们希望可以添加清晰的注释。
11. onchange

const App: React.FC = () => {
  const [state, setState] = React.useState('')
  const onChange: React.ChangeEventHandler<HTMLInputElement> = e => {
    setState(e.currentTarget.value)
  }
  return (
    <div>
      <input type="text" value={state} onChange={onChange} />
    </div>
  )
}

12. onsubmit
    const onSubmit = (e: React.SyntheticEvent) => {
    e.preventDefault()
    const target = e.target as typeof e.target & {
    password: { value: string }
    } // 类型扩展
    const password = target.password.value
    }
13. let [list, setList] = useState<string[]>([]) 字符串数组