러닝 타입스크립트 | ch 2. 타입시스템

doodoo·2023년 2월 25일

러닝 타입스크립트

목록 보기

1/9

타입의 종류

타입스크립트의 가장 기본적인 타입은 자바스크립트의 7가지 원시 타입과 동일하다.

null
undefined
boolean
string
number
bigint
symbol

타입 시스템

타입 시스템은 타입을 이해하는 방법에 대한 규칙의 집합

타입스크립트의 타입 시스템 작동 순서

코드를 읽고 존재하는 모든 타입과 값을 이해함
각 값이 초기 선언에서 가질 수 있는 타입을 확인함
각 값이 추후 코드에서 어떻게 사용될 수 있는지 모든 방법을 확인함
값의 사용법이 타입과 일치하지 않으면 사용자에게 오류를 표시함

오류의 종류

타입스크립트를 작성하는 동안 자주 접하게 되는 오류는 구문 오류와 타입 오류

구문 오류: 타입스크립트가 자바스크립트로 변환되는 것을 차단한 경우
타입 오류: 타입 검사기에 따라 일치하지 않는 것이 감지된 경우

구문 오류

잘못된 구문을 감지할 때 발생
구문 오류가 발생한 상태에서 컴파일을 하면 예상하지 못한 결과가 나올 수 있다.

타입 오류

프로그램의 타입에서 오류를 감지했을 때 발생
구문상 유효하지만 코드가 실행되면 충돌하거나 예기치 않게 작동할 수 있음을 나타낸다.

할당 가능성

할당 가능성(assignable): 예상된 타입으로 할당 가능한지 여부를 확인하는 것

할당 가능성 오류 이해하기

Type ... is not assignable to type ... 형태의 오류는 타입스크립트로 코드를 작성할 때 만나게 되는 가장 일반적인 오류 중 하나

let lastName = "King";
lastName = true; // Error: Type 'boolean' is not assignable to type 'string'.

첫번째 type: 변수에 할당하려고 시도하는 값의 타입
두번째 type: 값이 할당되는 변수의 타입

타입 애너테이션

타입 애너테이션(type annotation): 타입을 선언할 수 있는 구문
타입 애너테이션을 사용해서 명시적으로 타입을 지정할 수 있고, 정의한 타입 외의 값을 할당하면 타입 오류가 발생한다.
타입스크립트에만 존재하는 문법이며, 자바스크립트로 컴파일하면 사라진다. 또한 런타임 코드에 영향을 주지도 않는다.

문법

타입 애너테이션은 변수 이름 뒤에 배치된다.
콜론(:)과 타입 이름을 차례대로 적는다.

value: type

예시

타입 애너테이션은 color 변수가 string 타입임을 나타낸다.

let color: string;
color = "red";

불필요한 타입 애너테이션

타입스크립트가 타입을 유추할 수 있다면 타입 애너테이션을 추가하지 않아도 된다.

let firstName: string = "Tina"; // string 타입 애너테이션은 중복이다.

타입 형태

타입스크립트는 할당 가능성뿐만 아니라 객체 사용과 관련된 문제도 알려준다.

예시

변수에 할당된 값과 원래 타입이 일치하는지 확인

let color = "red";
color = 123; // Error: Type 'number' is not assignable to type 'string'

접근하려는 속성이 변수의 타입에 존재하는지 확인

let rapper = "Queen Latifah";
rapper.push('!'); // Error: Property 'push' does not exist on type 'string'.

객체에 키가 존재하는지 확인

const palette = {
    red: "red",
    blue: "blue",
}

palette.pink // Error: Property 'pink' does not exist on type '{ red: string; blue: string; }'

모듈

모듈: export 또는 import가 있는 파일
스크립트: 모듈이 아닌 모든 파일

파일이 스크립트면 타입스크립트는 해당 파일을 전역 스코프로 간주하므로 모든 스크립트가 파일의 내용에 접근할 수 있다. 파일을 모듈로 만들면 모듈 내에서만 사용할 수 있다.

doodoo

다음 포스트

러닝 타입스크립트 | ch 2. 타입시스템