객체 타입을 선언하는 방식에는 interface(인터페이스)와 type alias(타입 별칭)가 있다. 두 방식은 비슷하게 작동하면서도 분명한 차이가 존재한다. 타입 선언 아래는 타입 별칭과 인터페이스로 객체 타입을 선언하는 구문이다. 선언한 타입에 맞지 않는 속성값을 할당하면 두 방식 모두 에러 메시지를 표시한다. 할당 가능성 오류가 거의 동일하게 작용한다는 것을 알 수 있다.

타입스크립트에 존재하는 두 가지 핵심 추론 개념인 union과 narrowing에 대해 알아보자. union(유니언) union은 허용된 타입 값을 두 개 이상의 타입으로 확장하는 것이다. 정확히 어떤 값인지는 모르지만, 여러 타입 중 하나인 것을 알고 있을 때 유용하다.

onChange, onClick과 같은 이벤트 핸들러에서 인자로 전달받는 event의 타입을 찾아보자. event 타입 추론 아래 form 요소의 onSubmit 이벤트에 전달할 핸들러 함수 예시가 있다. handlePreventSubmit 함수의 매개변수에 해당하는 e(= event)의 타입을 지정해 주어야 한다.

typescript를 사용하면서 @types가 없는 모듈이나 라이브러리를 사용할 때, 빨간 줄로 오류 메시지가 뜨는 것을 볼 수 있다. 해결 방법 @types/\* 설치 일단 처음 시도해볼 방법은 @types 뒤에 해당 모듈 이름을 붙여 설치해보는 것이다.

Typescript Error Property * does not exist on type 'EventTarget'. 'EventTarget' 형식에 * 속성이 없습니다. 'EventTarget' 형식에 * 속성이 없습니다. error code e.target에 접근하려 할 때 타입 에러가 발생했다. error 원인 EventTarget은 element와 해당 자식 요소, document, window가 일반적인 이벤트 대상이지만 다른 객체가 이벤트 대상이 아니라는 보장도 없다.

Typescript Error Property * does not exist on type 'Window & globalThis'. 'Window & typeof globalThis' 형식에 * 속성이 없습니다. error code window 객체에 속성을 추가하고 불러올 때 위와 같은 오류가 발생했다. error 원인 'Window' interface에 존재하지 않는 속성에 접근하려할 때 발생한다.