React集成
构建React-TS项目
create-react-app demo --template typescript
声明文档
当在ts项目中使用依赖包时需要声明文档
部分依赖包的声明文档在依赖包的根目录下 因此不需要额外下载
当需要声明文档时需要另外安装
npm i @types/jquery # @types 是npm的一个分支,用来存放 *.d.ts文件声明文档
在React中使用TS
接口
类中的状态及属性接口
import { Component } from 'react'
// 定义状态接口
interface Istate {
name:string,
age:number
}
// 定义属性接口
interface Iprops{
flag:boolean
}
// 继承React组件时定义泛型 第一个参数为属性props的接口 第二个参数为状态state的接口 不需要时定义为any
class Test extends Component<Iprops,Istate> {
state = {
name: 'zs',
age: 18
}
fn = () => {
// 定义状态接口后 对状态的修改会进行检查
this.setState({ name: 'ww' },() => {
console.log(this.state.name.substring(0,1))
})
}
render() {
return (
<div>test
<button onClick={this.fn}>change</button>
</div>
)
}
}
// 父组件
export default class Test2 extends Component<any,any>{
render(){
// 定义属性接口后 对属性的传递进行检查
return <Test flag={true}></Test>
}
}
函数中的状态及属性接口
import { useState } from "react"
// 定义属性接口
interface Iprops {
name:string
}
//----------------------命名函数组件中--------------------------------
// 在函数组件的props传参中对props定义接口
export default function Test(props:Iprops) {
// 定义属性接口只需在useState时定义泛型即可
const [show, setShow] = useState<boolean>(true)
return (
<div>test-{props.name}</div>
)
}
//----------------------匿名函数组件中--------------------------------
// 通过React.FC定义泛型实现props接口
const Test:React.FC<Iprops> = (props) => {
return <div>test-{props.name}</div>
}
ref
类组件中创建引用对象
export default class test extends Component<any, any> {
// ts中创建input引用对象需要规定泛型HTMLInputElement div则为HTMLDivElement...
myref = React.createRef<HTMLInputElement>()
componentDidMount() {
// 需要使用引用input的值时因为TS不确认是否为空 因此需要类型断言
console.log((this.myref.current as HTMLInputElement).value)
}
render() {
return (
<div>
<input type="text" ref={this.myref} />
</div>
)
}
}
函数组件中创建引用对象
import { useEffect, useRef } from 'react'
export default function Test() {
// ts函数组件中创建input引用对象需要规定泛型HTMLInputElement 且必须为null
const myref = useRef<HTMLInputElement>(null)
useEffect(() => {
console.log((myref.current as HTMLInputElement).value)
},[])
return (
<div>
<input type="text" ref={myref} />
</div>
)
}
route
TS中路由的使用
//--------------------------------静态路由跳转----------------------------
import { Component } from 'react'
import { BrowserRouter, Route, RouteComponentProps} from 'react-router-dom'
// 子组件中要使用路由对象上的属性需要实现属性接口 属性接口为react-router-dom中的RouteComponentProps
class Test1 extends Component<RouteComponentProps,any> {
componentDidMount() {
// 实现接口后才能使用路由参数
console.log(this.props.history)
}
render() {
return (
<div>test</div>
)
}
}
// 路由父组件
export default class Test extends Component<any,any> {
render() {
return (
<BrowserRouter>
<Route path='/test' component={Test1}></Route>
</BrowserRouter>
)
}
}
//-------------------------动态路由参数-----------------------------
import { Component } from 'react'
import { BrowserRouter, Route, RouteComponentProps} from 'react-router-dom'
// 动态路由的参数接口
interface IParam {
myid:string
}
// 需要在实现路由属性的泛型上定义泛型接口
class Test1 extends Component<RouteComponentProps<IParam>,any> {
componentDidMount() {
// 实现路由属性泛型接口后才能检查动态路由参数
console.log(this.props.match.params.myid))
}
render() {
return (
<div>test</div>
)
}
}
// 路由父组件
export default class Test extends Component<any,any> {
render() {
return (
<BrowserRouter>
// 动态路由参数
<Route path='/test:myid' component={Test1}></Route>
</BrowserRouter>
)
}
}
redux
import { createStore } from 'redux'
// 定义action接口
interface Iaction {
type:string,
payload?:any
}
// 定义state接口
interface Istate {
show:boolean
}
// 实现状态接口以及action接口
const reducer = (prevState:Istate = {
show:true
}, actions:Iaction) => {
return prevState
}
const store = createStore(reducer)
export default store