react-ts

安装 react-ts项目

npm create vite@latest react-ts-app -- --template react-ts

useState-自动推导

根据初始值自动推断类型    比较适合明确的初始值

useState-传递泛型参数 

 传递泛型参数 

import { useState } from 'react'

function App() {
  type User ={
    name?:string,
    age:number,
    six?:boolean
  }
  const [user, setUser] = useState<User>({
    age:10,
  })
  const changeUser = ()=>{
     setUser({name:'张三',age:20})
  }

  return (
    <>
      {user}
       
    </>
  )
}

export default App

useState-初始值为null

import { useState } from 'react'

function App() {
  type User ={
    name?:string,
    age:number,
    six?:boolean
  }
  const [user, setUser] = useState<User | null>(null) //值可以是Uesr类型或null
  const changeUser = ()=>{
     setUser({name:'张三',age:20})
  }

  return (
    <>
      {/*只有user不为null(不为空)时才进行点运算 */}
      {user?.name}
       
    </>
  )
}

export default App

 Props与ts

props与ts的基础使用

// type声明
//  type Props ={
//     name:string,
//     age:number,
//     six:boolean
//   }
//interface声明
 interface Props {
    name:string,
    age:number,
    six:boolean
  }

function children(props:Props) {
  return <div>姓名: {props.name}, 年龄: {props.age}, 其他: {props.six.toString()}</div>
}

export default  children

props与ts - 为children添加类型

//子组件

// type声明
//  type Props ={
//     name:string,
//     children:React.ReactNode
//   }
//interface声明
 interface Props {
    name:string,
    children:React.ReactNode
  }

function children(props:Props) {
  return <div>姓名: {props.name}, {props.children}</div>
}

export default  children



//父组件传递 children可以是多种类型直接文本，标签，按钮都可以
 <Children name="test">111</Children>
 <Children name="test"><div>2222</div></Children>

props与ts - 为事件prop添加类型

//子组件

// type声明
//  type Props ={
//     name:string,
//     children:React.ReactNode,
//     onMessage:(msg:string)=>void
//   }
//interface声明
 interface Props {
    name:string,
    children:React.ReactNode
    onMessage:(msg:string)=>void
  }

function children(props:Props) {
  const { onMessage } = props
  return (<div>
    姓名: {props.name}, {props.children}
  <button onClick={()=>onMessage('111')}>传递</button>
  </div>
    
  )
}

export default  children



//父组件
  {/* 内联自动推断 */}
  <Children name="test" onMessage={(mes)=>console.log(mes)}>111</Children>
  {/* 需要匹配参数类型 */}
  <Children name="test" onMessage={getMessage}><div>2222</div></Children>

  const getMessage = (mes:string)=>{
    console.log(mes);
  }

 useRef与ts

useRef与ts - 获取dom

import { useEffect, useRef, useState } from 'react'
//获取input dom元素
  const inputRef = useRef<HTMLInputElement>(null)
//获取div  dom元素
  const divRef = useRef<HTMLDivElement>(null)
  useEffect(()=>{
    inputRef.current?.value
    divRef.current?.title
  })
  return (
    <>
      <input type='text' ref={inputRef}/>
      <div ref={divRef}></div>


    </>
  )
}

export default App

 useRef与ts - 引用稳定的存储器

axios于ts的配合使用

案例接口类型 

根据上图写的接口类型

import request from "../http";
//定义泛型
type ResType<T> = {
  code: number,
  msg:string,
  data:T;
  exec_time:number,
  ip:string,
};

//定义具体的接口类型
type DataItem = {
  index: string;
  title: string;
  releaseInfo: string;
  sumBoxDesc: string;
};

type Data = {
  data: DataItem[];
};

const getHotList = () => {
  return request<ResType<Data>>({
    url: "/api/hot_rankings/get",
    method: "get",
    params: {
      key: "K0iaswl1321321",
    },
  });
};
export { getHotList };