export
default
class
TsClass
extends
Component
<
any
,
JState
>
{
state
=
{
name
:
'react'
,
list
:
[
]
myref
=
React
.
createRef
<
HTMLInputElement
>
(
)
render
(
)
{
return
(
<
input ref
=
{
this
.
myref
}
/
>
<
button onClick
=
{
(
)
=>
{
this
.
setState
(
{
list
:
[
...
this
.
state
.
list
,
(
this
.
myref
.
current
as
HTMLInputElement
)
.
value
]
,
}
)
;
(
this
.
myref
.
current
as
HTMLInputElement
)
.
value
=
''
}
}
>
click
<
/
button
>
this
.
state
.
list
.
map
(
item
=>
<
li key
=
{
item
}
>
{
item
}
<
/
li
>
<
/
div
>
可以看到我们这里用
as
来进行类型断言，做了一个简单的
todolist
，效果：
import React, { Component } from 'react'
export default class TsClass extends Component {
render() {
return (
<Child name="'asdf'"></Child>
</div>
interface IProps {
name: string
class Child extends Component<IProps,any> {
render() {
return (
<div>Child - {this.props.name}</div>
可以看到父子组件这里就是约定属性，在父组件中使用子组件约定好的状态与名称及类型。
import React, { useState } from 'react'
export default function TsFunction() {
const [name, setName] = useState('tsFunction')
return (
app-{name.substring(0,1).toUpperCase() + name.substring(1)}
<button onClick={() => {
setName(100)
}}>click</button>
</div>
我们可以看到在函数组件中已经隐式的提醒了类型出错了，显型去写的话可以看到我们在useState的时候去规定类型：
const [name, setName] = useState<string>('tsFunction')
import { useRef, useState } from 'react'
export default function TsFunction() {
const mytext = useRef<HTMLInputElement>(null)
const [list, setlist] = useState<string[]>([])
return (
<input ref={mytext} />
<button onClick={() => {
setlist([...list, (mytext.current as HTMLInputElement).value]);
(mytext.current as HTMLInputElement).value = '';
}}>click</button>
list.map(item =>
<li key={item}>{item}</li>
</div>
import React from 'react'
export default function TsFunction() {
return (
<div>TsFunction
<Child name="aaa"/>
</div>
interface JProps {
name: string
function Child(props: JProps) {
return <div>child-{props.name}</div>
在学习React + Typescript的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。
原文：https://medium.com/js-dojo/vue-js-functional-components-what-why-and-when-439cfaa08713要义：如...
在 TypeScript 中不再需要导入 Props 类来限制 props 的类型，而是使用 type 来限制。自定义函数组件 Info 的类型是一个带有泛型的函数，我们需要把 Props 传入到泛型中。并将放进参数列表中，对从父组件接收到的 props 解构赋值。可以利用 TypeScript 的类型推断进一步简化。可以用对 props 设置默认值。设置默认值的方式也可以通过 js 的语法进一步简化。当解构赋值没有从父组件传递过来的 props 上得到age的值时，对其赋默认值。
在我学习typescript时，想在react中使用typescript写代码，从头开始的时候是懵逼的，因为官方文档并没有使用typescript的教程，多是自己在网上查，自己看定义摸索
所以今天把我用过的，总结归纳一下，希望能帮助到同样在摸索的同学
以下代码react版本为16.13.1，在create-react-app官方typescript模版中无报错
类型简述
一些React的内置类型
React.ReactElement —— 使用React.createElement创建的，
typescript1、typescript介绍2、特点3、
说起typescript你是不想到了javascript呢，没错，它们确实是有关系的，具体是什么，往下看！
1、typescript介绍
学了这么久的javascript，相信你已经知道了javascript是一门弱类型语言。
强类型语言就是声明变量的同时限制数据类型，而弱类型语言则相反，对于数据类型的限制并不那么严格。
比如你定义了一个变量，但是赋值的时候可以赋任何类型的数据，而强类型就比较严格了，是什么类型就必须严格匹配。
typescrip
函数式组件是React 16.8的新功能，可以让你不写class就使用React的特性。函数式组件的优势在于是无状态组件，根据接收的参数进行渲染，之前我们使用mobx也是为了让class component变得纯净。同时，函数式组件就没有类组件生命周期的概念了，因此在渲染过程中可以减少一些子组件的渲染。这篇文章简单讲了一下两者的区别。
我这篇文章主要会讲怎么样将class component改写成functional component。涉及的内容还是React、mobx。
当然一些重复的东西我这边就
import React, { Component } from "react";
export default class Clock extends Component {
constructor(props) {
super(props);
this.state = {
类型缩小的英文是 Type Narrowing；
我们可以通过类似于 typeof padding === "number" 的判断语句，来改变TypeScript的执行路径；
在给定的执行路径中，我们可以缩小比声明时更小的类型，这个过程称之为 缩小;
而我们编写的 typeof padding === "number 可以称之为 类型保护（type guards）；
常见的类型保护有如下几种：
ptypeof 平等缩小（比如===、!==） ...
