最近接手開(kāi)發(fā)react PC端項(xiàng)目,TS使用筆記記錄
1.寫(xiě)TS像寫(xiě)go一樣要指定一個(gè)類(lèi)型 變量名:類(lèi)型名,或者函數(shù)參數(shù)綁定一個(gè)接口類(lèi)型聲明
2.當(dāng)給解構(gòu)函數(shù)參數(shù)指定類(lèi)型的時(shí)候,在函數(shù)外部聲明,在內(nèi)部相當(dāng)于起別名了
可能有多種類(lèi)型時(shí)，用或連接
3.引入.tsx文件
比如目錄為 father/index.tsx
要引入 應(yīng)寫(xiě)
import('../father/index')
而不能寫(xiě)
import('../father/index.tsx')
4.引入JS 文件,但JS文件定義的類(lèi)型不合理
一般是修改JS文件,如果不能修改JS可以用// @ts-ignore忽略
如果是在render里的報(bào)錯(cuò) ,可以在文件頭加// @ts-nocheck
5.不能將類(lèi)型XXX分配給never[]
一般是修改useState為空數(shù)組的時(shí)候會(huì)報(bào)錯(cuò),
需要注釋或斷言數(shù)組類(lèi)型,比如聲明為any或者具體類(lèi)型
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文件結(jié)尾
webpack.config.js配置如下
增加默認(rèn)導(dǎo)入文件類(lèi)型
7.類(lèi)型斷言
在上下文中當(dāng)類(lèi)型檢查器無(wú)法斷定類(lèi)型時(shí)，一個(gè)新的后綴表達(dá)式操作符 ! 可以用于斷言操作對(duì)象是非 null 和非undefined 類(lèi)型。
比如 變量 A string ;被函數(shù) FA調(diào)用
let a string
function FA(url:string){...}
FA(a)
新的需求 變量A需要用一個(gè)函數(shù)FB處理下再被FA函數(shù)調(diào)用,但是FB函數(shù)的入?yún)⑹莝tring/undefined
直接處理后會(huì)報(bào)類(lèi)型錯(cuò)誤,需要加個(gè)!進(jìn)行類(lèi)型斷言非空,或者用as直接指定類(lèi)型
let a string
FB(url?:string){...}
let b = FB(a)
或者 let b = FB(a) as string
function FA(url:string){...}
FA(b!)
