鍍金池/ 問答/HTML/ typescript與react基礎(chǔ)問題

typescript與react基礎(chǔ)問題

import * as React from 'react'
import * as Reactdom from 'react-dom'

interface Person {
  firstName: string;
  middleName?: string;
  lastName: string;
}

class Greeter extends React.Component<Person> {
  fullName: string
  constructor (props) {
    super(props)
    this.setFullName(props.person)
  }
  setFullName = function<Person>(person) {
    this.fullName = `${person.firstName}·${person.lastName}`
  }
  sayName = ():string => this.fullName
  render () {
    return (
      <div>{this.sayName}</div>
    )
  }
}

const jor:Person = {
  firstName: 'michale',
  lastName: 'jordan',
}

Reactdom.render(<Greeter person={jor} />, document.getElementById('#app') as HTMLElement)

為什么會提示下面這個？

[ts]
不能將類型“{ person: Person; }”分配給類型“IntrinsicAttributes & IntrinsicClassAttributes<Greeter> & Readonly<{ children?: ReactNode; }> & R...”。
不能將類型“{ person: Person; }”分配給類型“Readonly<Person>”。
類型“{ person: Person; }”中缺少屬性“firstName”。

這個是什么意思

回答
編輯回答
喵小咪

先把react學(xué)明白，再來用typescript寫react

import * as React from 'react'
import * as Reactdom from 'react-dom'

interface Person {
  firstName: string;
  middleName?: string;
  lastName: string;
}

class Greeter extends React.Component<{person:Person}> {
  fullName: string
  constructor (props) {
    super(props)
    this.setFullName(props.person)
  }
  setFullName(person:Person) {
    this.fullName = `${person.firstName}·${person.lastName}`
  }
  sayName = ():string => this.fullName
  render () {
    return (
      <div>{this.sayName()}</div>
    )
  }
}

const jor:Person = {
  firstName: 'michale',
  lastName: 'jordan',
}

Reactdom.render(<Greeter person={jor} />, document.getElementById('#app') as HTMLElement)
2017年1月3日 19:45
編輯回答
話寡

這樣寫

constructor (props: Person) {
    super(props)
    this.setFullName(props)
}
setFullName = (person: Person) => {
    this.fullName = `${person.firstName}·${person.lastName}`
}
2017年2月21日 19:54