函数组件和类组件使用TS
初始化react开发为ts环境
// 本地先安装好typescript编译器 npm i -g typescript
yarn create react-app myappts --template typescript
最终初始化的目录结构
注:在react ts工程中,如果是组件或方法有jsx语法,则文件扩展名一定要是.tsx扩展名,否则编译报错
- react js 项目中 组件 .js 也可以是 .jsx
- react ts 项目中 组件只能是 .tsx
- src目录下面的所有的 .ts或.tsx都会编译为 .js 然后再说编译为给浏览器运行的程序,所以如果你在reac ts项目中备份文件,则一定扩展名不能是 .js .jsx .ts .tsx
类组件中使用ts
interface Istate {
num:number
}
第一种
class App extends Component<{},Istate> {
state={
num:111
}
第二种
class App extends Component {
state={
num:111
} as Istate
Home组件
<Home num={this.state.num} count={this.count}>HOME</Home>
先给类型才能用
- 给props添加自定义属性的类型
- 通过泛型给当前属性添加自定义属性的props类型 相当于在react js中的prop-types定义
- 今后在react ts项目中,如果有自定义属性的存在, 请一定要提前在定义组件时把属性的类型指定好
通过这样的方式来规范这组件需要传入的值。
interface Iprops{
num:number,
count:(n:number) =>void,
//children:any ,
children: ReactNode
}
import React, { Component,PropsWithChildren } from 'react'
import {ReactNode} from 'react'
interface Iprops{
num:number,
count:(n:number) =>void,
children:ReactNode
}
class Home extends Component<PropsWithChildren<Iprops>>
在函数组件中使用ts
useState它会自动映射出对应的初始类型,无须指定
第一种方法:
接口的各个声明方法:
interface Iprops {
num: number,
addNum:(n:number)=>void,
children:any
}
export default function index(props: Iprops) {
let { num,addNum,children } = props
return (
<>
<h2>Home</h2>
<h3>home_{num}</h3>
<button onClick={e => {addNum(3) }}>HOME </button>
<h2>CHildren的数据{children}</h2>
</>
)
}
第二种方法:
import React, { FC,PropsWithChildren } from 'react'
interface Iprops {
num: number,
addNum:(n:number)=>void,
}
type IHome = PropsWithChildren<Iprops>
const Home:FC<IHome> = (props)=> {
let { num,addNum,children } = props
return (
<>
<h2>Home</h2>
<h3>home_{num}</h3>
<button onClick={e => {addNum(3) }}>HOME </button>
<h2>CHildren的数据{children}</h2>
</>
)
}
export default Home
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfgjef
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13