Property 'counter' does not exist on type 'Readonly<{}>'
타입스크립트로 리액트 클래스형 컴포넌트를 작성해보는 중에 위와 같은 에러를 발견했다.
App 클래스는 Component에서 상속받는 방식으로 되어 있어서 얘가 가지고 있는 인터페이스에 따라 타입을 인식한다. < P = {}, S = {} > 이므로 state (and props)에 매칭된다.
S 위치에 state로 선언하고자 하는 counter에 대해 타입을 알려준다.
<{}, { counter: number }> 는 없었던 부분이다. 타입스크립트로 짤 때 필요해진다.
class App extends Component<{}, { counter: number }> {
constructor(props: any) {
super(props); // super() is required to call the constructor of the parent class
this.state = {
counter: 0,
};
this.onIncrement = this.onIncrement.bind(this);
this.onDecrement = this.onDecrement.bind(this);
}
TypeScript
복사
interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }
TypeScript
복사
Meaning that the default type for the state (and props) is: {}.If you want your component to have value in the state then you need to define it like this:
class App extends React.Component<{}, { value: string }> {
...
}
TypeScript
복사
Or:
type MyProps = { ... };
type MyState = { value: string };
class App extends React.Component<MyProps, MyState> {
...
}
TypeScript
복사
