Typescript + Taro Ts怎么在类组件中,定义state,props,以及hook中ts的简单实用

ts在taro类组件中怎么使用定义使用state，使用方式跟在js类组件中一样，直接使用this.state.属性名，使用方式一样，

定义state稍微有点区别，在js中我们是这样定义的：

class Index extends Component {
constructor(props) {
super(props)
this.state = {
navList: [],
Tjsp_flag: false,
topbanner_data: [],
banner_data2: [],
collegead_ad: [],
}
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
但是在ts中需要先给参数进行类型约定，不能直接给想js中那样写，
写TS像写go一样要指定一个类型 变量名:类型名,或者函数参数绑定一个接口类型声明，（Ts）例如：

interface State {
topbanner_data: Array<any>
hotSearchArr: Array<any>
navList: Array<any>
inBanner_Data: Array<any>
midBannerCurrent: Number
yunying_data: Array<any>
videoad: Array<any>
gkNews: Array<any>
collegead_ad: Array<any>
}
interface Props{
place: Object
}

export default class Index extends Component<Props, State>{
readonly state : Readonly<State> = {
topbanner_data: [],
hotSearchArr: [],
navList: [],
inBanner_Data: [],
midBannerCurrent: 0,
yunying_data: [],
videoad: [],
gkNews: [],
collegead_ad: [],
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
这样就可以解决在类组件中怎么定义变量了，使用还是用this.state.属性名这样调用

hook中使用Ts
可以直接像js中那样定义变量，进行使用,系统会根据初始值自动进行类型绑定，
例如：

const [choice, setChoice] = useState(false)
setChoice(1) // 此时会报错，choice类型初始值类型为Boolean,赋值只能为true||false
const [str, setStr] = useState('微信') // 初始值 string
setStr(1) // 此时会报错 类型“number”的参数不能赋给类型“SetStateAction<string>”的参数
setStr("1") // 正确写法

// 也可以在初始化的时候先约定好类型
const [str, setStr] = useState<Number>('微信') // 此时会抛出错误 类型“string”的参数不能赋给类型“Number | (() => Number)”的参数。
// 正确写法，初始值类型与前面<>里面约定的类型保持一致
const [str, setStr] = useState<Number>(111)
1
2
3
4
5
6
7
8
9
10

前端攻城狮J
关注

————————————————
版权声明：本文为CSDN博主「前端攻城狮J」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_46662539/article/details/121270227