타입스크립트 doest not exist on type 'Readonly'.. 에러 (TypeScript error) [해결 Solved]

자바스크립트를 타입스크립트로 마이그레이션 중 만난 에러,

타입스크립트에서는 사용할 변수의 타입을 지정해줘야한다.

기존 자바스크립트에서는 porpsType 등 플러그인을 사용해 Props의 타입을 지정해주기도 했지만 선택사항이었다.

 

타입스크립트에서는 받을 Props와 사용할 State에 대한 인터페이스 제너릭을 사용해 명시해 줄 것을 요구한다.

Property '' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>'

 

> 위 링크를 참고하여 에러를 해결하였다.

 

에러 메세지가 난 화면

타입스크립트는 런타임에서 날 에러를 컴파일타임에서 미리 잡아준다.

빨간 줄이 난 부분에 마우스를 올려보면 저러한 에러가 뜬다.

 

해결방안

Props와 State의 타입을 인터페이스로 선언하여 클래스 extends Components를 해주는 부분에 같이 명시해준다.

 

파일 = 에러가 난 해당 파일

interface Props {
    ido: {
        name: string,
        //...rest of your code
    },
}

interface State {
    contractType: string,
    //...rest of your code
}

class AAA extends React.Component<Props, State>{
    //....rest of your code
    .
    .
    .
}

 

그럼 에러 해결! 👍