Typescript의 타입 - 러닝 타입스크립트
* 조시 골드버그의 러닝 타입스크립트라는 책을 읽고 정리하면서 코드를 작성해본 내용입니다.
Type?
타입은 javascript에서 다루는 값의 형태에 대한 설명이다.
Typescript 에는 javascript 와 마찬가지로 7가지의 원시값이 존재한다.
Typescript에서 타입을 명시적으로 지정하지 않고 변수에 값을 할당해도 자체적으로 타입을 추론할 수 있다.
연산자를 넣어도 Typescript가 자체적으로 변수에 어떤값이 들어오는지 추론 가능하다.
Typescript의 타입시스템은 다음과 같이 동작한다.
⓵ 코드를 읽고 존재하는 모든 타입과 값을 이해한다.
⓶ 각 값이 초기선언에서 가질 수 있는 타입을 확인한다.
⓷ 각 값이 추후 코드에서 어떻게 사용될 수 있는지 모든 방법을 확인한다.
⓸ 값의 사용법이 타입과 일치하지 않으면 오류를 표시한다.
오류의 종류
타입스크립트에서 자주접하는 오류는 구문오류와 타입오류, 할당가능성 오류이다.
구문 오류는 코드를 문법적으로 잘못 작성할 때 나타나는 오류이다. 이러한 오류는 타입스크립트 파일을 자바스크립트 파일로 컴파일 할때 제대로 컴파일 되지 않고 예상치 못한 결과를 얻을 수 있다.
타입 오류는 타입스크립트에 타입 검사기가 프로그램의 타입에서 오류를 감지했을 때 발생한다. 타입 오류가 발생했다고 컴파일이 안되는 것은 아니지만 그대로 실행해버리면 코드가 충돌되거나 이상한 결과가 나올 수 있다. ( 타입오류를 무시하고 타입스크립트를 사용하는 것은 타입스크립트를 사용하는 의미가 퇴색될 수도 있다.)
타입스크립트는 변수의 초기값을 읽고 해당 변수가 허용되는 타입을 결정한다.
이후에 해당 변수에 다른 값이 할당 될 경우 타입스크립트는 그 값이 허용되는 타입인지 확인한 후 허용되지 않는 타입의 값이면 오류를 발생시킨다. 이를 할당 가능성 오류라고 한다.
Type annotation
변수에 초기값이 없는 경우 타입스크립트는 any라는 타입으로 간주한다. any 타입은 타입스크립트 내의 모든 타입이 될 수 있는 타입이다. 이후에 변수에 값을 할당하면 해당 값의 타입으로 변경된다.
그러나 위와 같이 처음 선언할 때 any라는 타입으로 유추를 했기 때문에 이후에 number 타입의 값을 할당하고 toUpperCase 메서드를 사용해도 오류메시지가 뜨지 않는 것을 볼 수 있다. 이것은 타입스크립트가 val라는 변수에 현재 어떤 타입의 값이 들어있는지 제대로 유추하지 못한다는 것을 의미한다.
이와 같이 any타입은 타입스크립트의 타입 검사 기능을 사용할 수 없게 만들기 때문에 사용을 최소화 해야한다.
항상 변수를 선언할 때 기본값을 할당해야하는것은 아니기 때문에 이럴때는 타입 애너테이션을 사용하여 변수에 어떤 타입을 담을 것인지 미리 지정해 줄 수 있다.
이전과는 다르게 number 타입의 값을 할당하면 오류가 뜨는것을 확인할 수 있다. 변수에 타입 애너테이션을 달아주면 타입스크립트의 타입 검사 기능의 보호를 받을 수 있다.
이러한 타입 애너테이션은 유효한 구문은 아니기 때문에 자바스크립트로 컴파일 될 때 삭제되고, 런타임에 영향을 주지도 않는다.
타입의 형태
타입스크립트의 타입 검사 기능은 원시값 뿐만 아니라 문자열, 객체등의 프로퍼티에서도 작동한다.
위의 예시에서 string 타입에는 length라는 프로퍼티가 존재하기 때문에 접근이 가능하고, push라는 메서드는 존재하지 않기 때문에 오류가 발생한다.
객체의 프로퍼티에 접근할 때도 마찬가지로 동작한다.
모듈
import 나 export가 있는 파일은 모듈파일로 지역 스코프를 가지기 때문에 변수의 이름이 중복되어도 상관없다.
그러나 모듈이 아닌 script파일의 경우 기본적으로 전역 스코프를 가지기 때문에 다른 파일에 있는 변수와 중복된 이름의 변수를 사용할 수 없다.
import문 없이 파일을 모듈로 만들려면 파일의 아무곳에나 export {}; 를 추가하면 된다.
Reference
- 조시 골드버그, 러닝 타입스크립트, 고승원 옮김, 2023