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”。

這個是什么意思