인터페이스 에러 - 사용할 곳에만 들어가도록 조심하자

공통 컴포넌트의 인터페이스를 함부로 수정하면 에러가 날 수 있다.

실수한 부분 : interface IButtonProps에 { disabled: boolean } 추가 

IButtonProps에 추가한 disable props를 적었다. but IButtonProps를 가지도록 확장된 ITabbuttonProps와 IMenuButtonProps 에서는 disable이 적용되지 않는다. disable? 을 사용했지만, boolean | undefined 로 undefined를 가질 수 없다는 에러가 떴다. 사용하지 않는 곳에서 불필요한 에러가 뜨지 않도록 props 선언을 최대한 적게 하는 것이 중요하단 것을 깨달았다.  

 

해결 방법 : interface ICustomButtonProps extends IButtonProps { disabled: boolean } 추가 

쓰이는 부분인 Custom Button에만 disabled를 작성해야 다른 컴포넌트에서 필수 props로 disabled를 입력하란 에러가 뜨지 않는다.

개념 정리   - typescript 공식 홈페이지를 읽고, 정리한 내용

Introduce

타입 스크립트의 핵심 원칙 : 값의 형태에 초점을 맞춘 타입 검사 = 이를 '덕 타이핑'( duck typing ) 혹은 '구조적 서브 타이핑'( structural subtyping ) 이라고 한다. 타입 스크립트에서, 인터페이스는 이런 타입들의 이름을 짓고, 코드 안의 계약을 정의할 뿐만 아니라 프로젝트 외부에서 사용하는 코드의 계약을 정의하는 강력한 방법이다. 컴파일러는 최소한 필요한 프로퍼티가 있는지와 타입이 맞는지만 검사한다.  타입 검사는 프로퍼티들의 순서를 요구하지 않고, 단지 인터페이스가 요구하는 프로퍼티들이 존재하는지와 프로퍼티들이 요구하는 타입을 가졌는지만을 확인한다.

Optional Properties( 선택적 프로퍼티 )

인터페이스의 모든 프로퍼티가 필요한 것은 아니다. 어떤 조건에서만 존재하거나 아예 없을 수도 있다. 선택적 프로퍼티들은 객체 안의 몇 개의 프로퍼티만 채워 함수에 전달하는 "option bags" 같은 패턴을 만들 때 유용하다. 선언에서 프로퍼티 이름 끝에 ? 를 붙여 표시하며, 이점으로 인터페이스에 속하지 않는 프로퍼티의 사용은 방지하면서 사용 가능한 속성을 기술하는 것이다. 

Readonly Properites( 읽기전용 프로퍼티 )

일부 프로퍼티들은 객체가 처음 생성될 때만 수정 가능해야한다. 프로퍼티 이름 앞에 readonly 를 넣어서 지정할 수 있다. 객체 리터럴에 할당한 경우 값을 수정할 수 없다. 

 

참고링크 https://typescript-kr.github.io/pages/interfaces.html