handleClick = (e: React.MouseEvent, msg: string) => { console.log('hello class component', e, msg) handleChangeName = (e: React.ChangeEvent) => { this.setState({ value: e.target.value render() { return (
this.handleClick(e, 'msg')}>hello
this.handleChangeName(e)} />

输入值为:{this.state.value},当前名称是:{this.props.name}, 年龄是{this.props.age}

function Test() { return ( export default Test()

子组件通过 props 接收父组件传过来的数据时,ts 报错,截图如下:

二、报错原因

ts 根据组件的 props 属性对组件进行类型检查。react.d.ts 文件定义了 React.Component<Props, State>,传参时应该使用自己所需的 Props 和 State 声明扩展它。

三、解决问题

定义 Props 属性所需的类型。

interface PropsType {
  name: string,
  age: number

具体代码如下:

import React from "react";
import './index.css'
interface PropsType {
  name: string,
  age: number
// 类组件
class Hello extends React.Component<PropsType> {
  state = {
    value: 'name'
  handleClick = (e: React.MouseEvent, msg: string) => {
    console.log('hello class component', e, msg)
  handleChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({
      value: e.target.value
  render() {
    return (
        <div onClick={e => this.handleClick(e, 'msg')}>hello</div>
        <input type="text" value={this.state.value} onChange={e => this.handleChangeName(e)} />
        <p>输入值为:{this.state.value},当前名称是:{this.props.name}, 年龄是{this.props.age}</p>
function Test() {
  return (
      <Hello name="hello" age={2}></Hello>
export default Test()

页面效果:

网上找了各种原因,有让添加jsconfig.json文件的,有让新建一个项目的,有的直接放弃ts的,哈哈哈,真的是千奇百怪都有,好吧,我这里就也出一种方法,不要用vscode了,使用WebStorm,哈哈哈,可能让你也想不到吧,但是真的有效啊:请看效果,就不报错了,撒花。 React TypeScript 报错类型"Readonly<{}>“上不存在属性"字段名” react项目中ts报错代码如下: onAddTabBar = () => { let _panes = this.state.panes.concat([{ title: `Tab ${this.state.panes.length + 1}`, content: 'Content of Tab 2', key: this.state.panes.length + 1 }]) 亲爱的小伙伴们,你们是否遇到过使用vscode打开vue3+ts项目时一片爆红,一直提示类型"{}"上不存在属性 "",以及ts.config.app.json和tsconfig.node.json中报“在没有"node"模块解析策略的情况下,无法指定选项"-resolveJsonModule”的问题,不要担心,不要着急,看了很多篇的博客,我终于是彻底解决了这些恶心的报错,然后就迫不及待地想要分享给大家,希望对各位有所帮助哦! 方式三(建议使用这一种) 在src目录下新增xxx.d.ts文件 (全局声明简捷 如下) import VueRouter, { Route } from 'vue-router'; declare module 'vue/types/vue TS 在遇到以下这些条件语句时,会在语句的块级作用域内「收紧」变量的类型,这种类型推断的行为称作类型守卫 (Type Guard)。=、!==(这里列举常用的 4 种)类型守卫可以帮助我们在块级作用域中获得更为精确的变量类型这里就可以通过判断 animal 中是否存在 meow 属性,来确定变量是否为 Cat 类型的对象let call;// 鼠标放到 animal 上,可以看到类型被限定为 Cat } else {