타입 스크립트(TypeScript)

Hyunjun Kim
akiakma
Published in
4 min readNov 6, 2020

자바스크립트는 동적 언어이다. 따라서 변수의 타입은 런타임에 의해 결정된다. 이는 작은 규모의 프로젝트에서는 생산성이 좋지만 큰 규모의 프로젝트에서는 오히려 생산성이 떨어질 수 있다.

동적타입언어

  • 타입에 대한 고민을 하지 않아도 되므로 배우기 쉽다.
  • 코드의 양이 적을 때 생산성이 높다.
  • 타입 오류가 런타임 시 발견된다.

정적 타입 언어

  • 변수를 선언할 때마다 타입을 고민해야 하므로 진입 장벽이 높다.
  • 코드의 양이 많을 떄 동적 타입 언어에 비해 생산성이 높다.
  • 타입 오류가 컴파일 시 발견된다.

타입 스크립트의 다양한 타입

배열 타입은 두가지 방법으로 정의가 가능하다.
숫자 배열에 문자열을 입력하면 타입 에러가 발생한다.
두 번째 아이템의 타입은 숫자인데 문자열의 메서드를 호출하면 타입 에러가 발생한다.

null과 undefined 타입

null과 undefined는 타입스크립트에서 각각 타입으로 존재한다.

문자열 리터럴과 숫자 리터럴 타입

타입 스크립트에서는 문자열리터럴과 숫자 리터럴을 타입으로 정의 할 수 있다.

any타입

any타입은 모든 종류의 값을 허용하는 타입이다. any타입은 기존의 자바스크립트 코드로 작성된 프로젝트를 타입스크립트로 포팅하는 경유 유용하게 사용 될 수 있다. 기존 프로젝트의 모든 코드에 타입을 한번에 정의하는 것은 부담이 되기 때문이다. any타입은 실제로 타입을 알 수 없는 경우나 타입 정의가 안된 외부 패키지를 사용하는 경우에 사용하기 좋다.

voide와 never타입

아무 값도 반환하지 않고 종료되는 함수의 반환 타입은 void타입으로 정의 할 수 있다. 그리고 항상 예외가 발생해서 비정상적으로 종료되거나 무한 루프 때문에 종료되지 않는 함수의 반환 타입은 never 타입으로 정의 할 수 있다.

object 타입

객체의 속성에 대한 정보가 없기 때문에 특정 속성값에 접근하면 타입에러가 발생한다. 속성 정보를 포함해서 타입을 정의하기 위해서는 인터페이스(interface)를 사용해야 한다.

교차 타입과 유니온 타입

변수 v1타입은 3 | 5와 같다. 변수 v1에는 3또는 5가 아닌 값을 할당 할 수 없다.

type 키워드로 타입에 별칭 주기

type 키워드를 사용해서 타입에 별칭을 줄 수 있다.

열거형 타입

열거형 타입
명시적으로 원소의 값 입력하기

열거형 타입의 첫 번째 원소에 값을 할당하지 않으면 자동적으로 0이 할당됨.
열거형 타입의 각 원소에 숫자 또는 문자열 입력가능, 명시적으로 값을 입력하지 않으면 이전 원소에서 1만큼 증가한 값이 할당. 다른 타입과 달리 열거형 타입은 컴파일 후에도 관련된 코드가 남는다. 객체로 존재한다.

함수 타입

함수의 타입에는 매개변수 타입과 반환 타입이 존재한다.

변수를 함수 타입으로 정의할때, 함수를 구현하는 코드에서는 매개변수 타입과 반환 타입을 작성하지 않아도 된다 타입스크립트는 오른쪽 코드에서 name과age가 각각 문자열과 숫자라는 것을 안다.

선택 매개변수

선택 매개변수는 반드시 입력하지 않아도 되는 매개변수이다.

주의 할 점은 선택 매개변수 오른쪽에 필수 매개변수가 오면 컴파일 에러가 발생한다.

매개변수의 기본값 정의하기

(1) 타입 오른쪽에 = 를 사용해서 기본 값을 정의할 수 있다.
(2) 타입을 입력하지 않아도 매개변수의 기본값을 정의 할 수있다. 기본값이 문자열이기 때문에 매개변수 laguage의 타입도 문자열이 된다.

나머지 매개변수

나머지 매개변수는 배열로 정의할 수 있다.

this타입

함수의 this 타입은 다음과 같이 첫 번째 매개변수 위치에서 정의 할 수 있다.

매개변수 index는 두 번째 자리에 정의되어 있다. 하지만 this 타입은 매개변수가 아니므로 index가 첫 번째 매개변수가 된다.

함수 오버로드: 여러 개의 타입 정의하기

모든 매개변수와 반환값의 타입은 문자열이거나 숫자이다. 모든 매개변수가 숫자이면 반환값도 숫자이지만 타입 에러가 발생. 두 매개변수의 타입이 달라도 타입에러가 발생하지 않는다 이는 함수의 타입을 구체적으로 정의하지 못했기 때문이다. 이럴때 함수 오버로드를 사용한다.

함수 오버로드

위처럼 매개변수와 반환 타입의 모든 가능한 조합을 정의한다.

명명된 매개변수

인터페이스

인터페이스로 객체 타입 정의하기

간단한 예시

선택속성

전자: 선택속성, 후자: 유니온타입에 포함된 undefined

물음표 기호를 사용하지않고 유니온 타입으로 추가하면 선택 속성과 달리 명시적으로 age 속성을 입력해야한다.

읽기전용 속성

정의되지 않은 속성값에 대한 처리

p2가 Person에 정의되지 않은 속성을 포함하지만 타입 에러가 발생하지 않는다. 이는 p3 타입이 p2타입을 포함하는 더 큰 타입이기때문이다. (타입 호환성)

인터페이스로 정의하는 인덱스타입

(1) 문자열로 된 모든 속성 이름에 대해 값이 문자열 또는 숫자열이라고 정의함. birthday속성을 입력해도 컴파일 에러가 발생하지 않는다. age 는 명시적으로 숫자로 정의했기 때문에 문자열 입력시 에러가 발생한다.

여러개의 인덱스를 정의하는 경우

--

--