TypeScript) Optional Properties

어떤 함수에서 인자 3개를 받겠다 설정하여도, 2개를 받아 return 할 수 있다.
2개에 해당하는 값만 함수에 대입하여 결과를 출력 할 수 있기 때문이다.

만약 이 함수에 TypeScript를 적용하여, 각 인자에 해당하는 Type을 설정해준다면,
TypeScript의 특성으로 인해, 인자 3개를 전부 받지 않으면 오류가 있음을 표시한다.

예를 들어 어떤 인자는 필수로 받아야 하지만, 다른 인자는 선택적으로 받아도 되는 상황에서 Type을 지정해줄 때, Optional Properties 를 적용한다.

Optional Properties 적용

적용하는 방법은 매우 간단하다.
viewMoreText?: boolean 과 같이 ? 를 같이 써주면 된다.

코드 설명

• interface를 선언하여 각 state의 Type을 관리해주고 있다.

• 만약 위의 코드에서 optional Properties를 적용하지 않는다면, IProps를 참조시킬 때, 위의 모든 State 값이 있어야만 오류가 발생하지 않는다.

• changeBtn 과 selectBtn 은 필수 값이지만, 나머지는 Option(선택사항) 이기 때문에 ?를 넣으주면서 필수 State 값이 있다면 오류가 발생하지 않도록 해준다.

Option Properties의 핵심

Option 사항은 없어도 되지만, 만약 존재한다면!!! 반드시 정의해둔 Type과 일치해야 한다!

• 예를 들어 toLink는 사용되지 않아도 되지만, 만약에 사용된다면 반드시 String 값의 data가 들어가야 한다