Typescript|react类组件及函数组件中使用typescript V17.0.2|React|react.js|typescript|ja

本文目录

一、ts在类组件中的应用
- 1.1 普通应用
- 1.2 类型断言
- 1.3 父子组件
二、ts在函数组件应用
- 2.1 普通应用
- 2.2 ref引用
- 2.3 父子组件

一、ts在类组件中的应用 1.1 普通应用创建TsClass.tsx类组件，写入代码：

import React, { Component } from 'react'interface JObj { name: string }// Component<约定属性, 约定状态> export default class TsClass extends Component {state = { name: 'react' }render() { return ( TsClass - {this.state.name} ) } }

可以看到我们这约定了name为string型，将来设置不为string型奖会报错。
1.2 类型断言类型断言：

import React, { Component } from 'react'interface JState { name: string, list: string[] }// Component<约定属性, 约定状态> export default class TsClass extends Component {state = { name: 'react', list: [] }myref = React.createRef()render() { return ( { this.state.list.map(item => {item} ) } ) } }

可以看到我们这里用as来进行类型断言，做了一个简单的todolist，效果：

文章图片

1.3 父子组件

import React, { Component } from 'react'export default class TsClass extends Component { render() { return ( ) } }interface IProps { name: string }class Child extends Component { render() { return ( Child - {this.props.name} ) } }

可以看到父子组件这里就是约定属性，在父组件中使用子组件约定好的状态与名称及类型。
二、ts在函数组件应用 2.1 普通应用

import React, { useState } from 'react'export default function TsFunction() { const [name, setName] = useState('tsFunction')return ( app-{name.substring(0,1).toUpperCase() + name.substring(1)} ) }

文章图片

我们可以看到在函数组件中已经隐式的提醒了类型出错了，显型去写的话可以看到我们在useState的时候去规定类型：

const [name, setName] = useState>('tsFunction')

2.2 ref引用

import { useRef, useState } from 'react'export default function TsFunction() { const mytext = useRef(null) const [list, setlist] = useState[]>([])return ( { list.map(item => {item} ) } ) }

效果：

文章图片

2.3 父子组件

import React from 'react'export default function TsFunction() { return ( TsFunction ) } interface JProps { name: string }// 写法一 function Child(props: JProps) { return child-{props.name} }// 写法二 // const Child:React.FC = (props) => { //return child-{props.name} // }