react hook 里使用TS笔记

最近接手开发react PC端项目,TS使用笔记记录

1.写TS像写go一样要指定一个类型 变量名:类型名,或者函数参数绑定一个接口类型声明

2.当给解构函数参数指定类型的时候,在函数外部声明,在内部相当于起别名了

image.png image.png

可能有多种类型时，用或连接

image.png

3.引入.tsx文件
比如目录为 father/index.tsx
要引入 应写

import('../father/index')

而不能写

import('../father/index.tsx')

4.引入JS 文件,但JS文件定义的类型不合理

image.png

一般是修改JS文件,如果不能修改JS可以用// @ts-ignore忽略
如果是在render里的报错 ,可以在文件头加// @ts-nocheck

5.不能将类型XXX分配给never[]
一般是修改useState为空数组的时候会报错,
需要注释或断言数组类型,比如声明为any或者具体类型

useState<any[]>([])

interface LOL {
    name: string
}

export function useTestLOL() {
    const [lol, setLoL] = useState<LOL[]>([])
    function change() {
        setLoL([...lol, { name: 'hello world' }])
    }
    return change
}

6.不能以.tsx文件结尾
webpack.config.js配置如下

image.png

增加默认导入文件类型

7.类型断言
在上下文中当类型检查器无法断定类型时，一个新的后缀表达式操作符 ! 可以用于断言操作对象是非 null 和非undefined 类型。
比如 变量 A string ;被函数 FA调用
let a string
function FA(url:string){...}
FA(a)
新的需求 变量A需要用一个函数FB处理下再被FA函数调用,但是FB函数的入参是string/undefined
直接处理后会报类型错误,需要加个!进行类型断言非空,或者用as直接指定类型
let a string
FB(url?:string){...}
let b = FB(a)
或者 let b = FB(a) as string
function FA(url:string){...}
FA(b!)