타입스크립트

타입스크립트는 2012년에 마이크로소프트의 개발자이자 C타입스크립트는 오픈소스입니다.또 타입스크립트는 오픈소스로 공개되어 있는데요 그래서 현재도 많은 프로그래머들이 이 언어의 개발과 유지보수에 참여하고 있고 다양한 토론을 이어가고 있어서 앞으로도 발전 가능성이 아주 창

자바스크립트에는 정확히 어떤 한계점이 있는가?타입스크립트는 이 한계점을 어떻게 극복하는가?타입스크립트가 다른 언어 대비 갖는 차별점은 무엇인가?우선 자바스크립트에 정확히 어떤 한계가 왜 있었는지 이해하기 위해서 그리고 앞으로 우리가 타입스크립트를 잘 배우기 위해서 먼저

타입스크립트 동작 방식을 정확히 이해 하려면 대다수의 프로그래밍 언어들이 어떻게 동작 하는지 그 원리를 살펴볼 필요가 있습니다.먼저 대부분의 프로그래밍 언어는 사실 컴퓨터보단 인간에게 더 친화적입니다. 컴퓨터는 인간과는 달리 바이트코드나 기계어, 이진수 같은 아주 단순

기본 타입이란 타입스크립트가 자체적으로 제공하는 타입들을 말합니다. 기본 타입을 다른 말로는 내장 타입이라고도 할 수 있습니다. 다음 그림은 타입스크립트가 제공하는 기본 타입들을 계층에 따라 분류한 ‘타입 계층도’ 그립입니다.그림을 자세히 보면 null이나 undefi

원시 타입(Primitive Type) 은 동시에 한개의 값만 저장할 수 있는 타입들을 말합니다.예를 들어 원시 타입이 아닌 배열이나 객체 같은 비 원시 타입들은 동시에 여러개의 값들을 저장할 수 있는 반면, number, string, boolean 등의 원시 타입은

타입스크립트의 배열과 튜플 타입에 대해 살펴봅니다. 배열은 자바스크립트의 배열과 크게 다르지 않으며 튜플은 타입스크립트에서만 특별히 제공되는 타입입니다.타입스크립트에서 배열 타입을 정의하고 사용하는 방법에 대해 알아봅니다.타입스크립트에서는 다음과 같이 배열 타입을 정의

타입스크립트에서는 2가지 방식으로 객체의 타입을 정의할 수 있습니다.객체 타입을 정의하기에 앞서 먼저 간단한 객체를 하나 만듭니다.다음으로 user의 타입을 객체를 의미하는 object로 정의합니다.타입이 잘 정의되었습니다. 그런데 이렇게 타입을 정의하면 한가지 문제가

타입 별칭을 이용하면 다음과 같이 변수를 선언하듯 타입을 별도로 정의할 수 있습니다.type 타입이름 = 타입 형태로 타입을 정의합니다. 위 코드는 타입 이름으로는 User 그리고 타입으로는 여러개의 프로퍼티가 있는 객체 타입을 정의했습니다. 이렇게 만든 타입 별칭은

열거형 타입은 자바스크립트에는 존재하지 않고 오직 타입스크립트에서만 사용할 수 있는 특별한 타입입니다.열거형은 다음과 같이 여러개의 값을 나열하는 용도로 사용합니다.3개의 멤버 ADMIN, USER, GUEST를 나열한 열거형 타입을 하나 만들었습니다. 설명 편의상 앞

any 타입은 타입스크립트에서만 제공되는 특별한 타입으로 타입 검사를 받지 않는 특수한 치트키 타입입니다.예를 들어 다음과 같이 아주 범용적으로 사용되어야 하는 변수가 하나 있다고 가정합니다.변수 anyVar는 number 타입의 값 10으로 초기화 했지만 이후에 또

void 타입은 아무런 값도 없음을 의미하는 타입입니다.보통은 다음과 같이 아무런 값도 반환하지 않는 함수의 반환값 타입을 정의할 때 사용합니다.물론 다음과 같이 변수의 타입으로도 당연히 void 타입을 지정할 수 있습니다. 그러나 void 타입의 변수에는 undefi

타입스크립트를 이해한다는 말은 타입스크립트가 어떤 기준으로 타입을 정의하고, 어떤 기준으로 타입들간의 관계를 정의하고, 어떤 기준으로 타입스크립트 코드의 오류를 검사 하는지 그 원리와 동작 방식을 낯낯이 살펴본다는 말입니다.그런데 “문법 배우기도 바쁜데 왜 갑자기 원리

타입스크립트의 '타입'은 사실 여러개의 값을 포함하는 '집합'입니다. 집합은 동일한 속성을 갖는 여러개의 요소들을 하나의 그룹으로 묶은 단위를 말합니다.따라서 다음 그림처럼 여러개의 숫자 값들을 묶어 놓은 집합을 타입스크립트에서는 number 타입이라고 부릅니다.그렇다

타입 계층도를 한번 살펴보며 여러가지 기본 타입들이 각각 왜 그런 특징을 갖는지 자세히 살펴보겠습니다.unknown 타입은 타입 계층도의 최 상단에 위치합니다.따라서 unknown 타입 변수에는 모든 타입의 값을 할당할 수 있습니다. 바꿔 말하면 모든 타입은 unkno

위 코드를 다시 살펴보자면, Number 타입 변수 num1에 Number Literal 타입 변수 num2를 할당하는 것은 업 캐스팅에 해당 하므로 허용됩니다. 그러나 반대로는 다운캐스팅에 해당하므로 안된다고 알아보았습니다.객체 타입간의 호환성도 동일한 기준으로 판단

대수 타입이란 여러개의 타입을 합성해서 만드는 타입을 말합니다. 대수 타입에는 합집합 타입과 교집합 타입이 존재합니다.합집합은 Union 타입, 교집합은 Intersection 타입이라고 부릅니다.하나씩 천천히 살펴보겠습니다.다음과 같이 string과 number의 유

타입스크립트는 타입이 정의되어 있지 않은 변수의 타입을 자동으로 추론합니다. 이런 기능을 “타입 추론”이라고 합니다.따라서 타입스크립트는 프로그래머에게 모든 변수에 일일이 타입을 정의하지 않아도 되는 편리함을 제공합니다.그러나 모든 상황에 타입을 잘 추론하는 것은 아닙

다음과 같은 코드가 있다고 가정합니다.변수 person은 Person 타입으로 정의 되었지만 초기화 할 때에는 빈 객체를 넣어두고 싶다고 가정하겠습니다. 그러나 타입스크립트에서는 이런 경우를 허용하지 않습니다. 빈 객체는 Person 타입이 아니므로 오류가 발생하게 됩

다음과 같은 함수가 하나 있다고 가정하겠습니다.이때 매개변수 value의 타입이 number | string 이므로 함수 내부에서 다음과 같이 value가 number 타입이거나 string 타입일 것으로 기대하고 메서드를 사용하려고 하면 오류가 발생합니다.만약 val

서로소 유니온 타입은 교집합이 없는 타입들 즉 서로소 관계에 있는 타입들을 모아 만든 유니온 타입을 말 합니다. 예시와 함께 살펴봅니다.다음과 같은 간단한 회원 관리 프로그램이 있다고 가정합니다.회원의 역할 분류에 따라 3개의 타입을 각각 정의해 주었습니다. 그리고 이

다음과 같은 자바스크립트 함수가 있을 때, 이 함수를 다른 사람에게 설명하는 가장 좋은 방법은 이 함수가 어떤 매개변수를 받고 어떤 값을 반환 하는지 이야기 하는 것 입니다.그럼 타입스크립트에서는 어떨까요? 자바스크립트에서 함수를 소개하는 방식과 비슷합니다. 대신 타입

다음과 같이 함수 타입을 타입 별칭과 함께 별도로 정의할 수 있습니다. 이를 함수 타입 표현식(Function Type Expression)이라고 부릅니다.변수 add의 타입을 함수 타입 표현식으로 정의한 함수 타입으로 정의했습니다.이렇게 함수 타입 표현식을 이용하면

함수 타입의 호환성이란 특정 함수 타입을 다른 함수 타입으로 괜찮은지 판단하는 것을 의미합니다.다음 2가지 기준으로 함수 타입의 호환성을 판단하게 됩니다.두 함수의 반환값 타입이 호환되는가?두 함수의 매개변수의 타입이 호환되는가?첫번째 기준부터 차례대로 살펴보겠습니다.

함수 오버로딩이란 하나의 함수를 매개변수의 개수나 타입에 따라 다르게 동작하도록 만드는 문법입니다.타입스크립트에서 함수 오버로딩을 구현하려면 먼저 다음과 같이 버전별 오버로드 시그니쳐를 만들어 줘야 합니다.이렇게 구현부 없이 선언부만 만들어둔 함수를 ‘오버로드 시그니쳐

사용자 정의 타입가드란 참 또는 거짓을 반환하는 함수를 이용해 우리 입맛대로 타입 가드를 만들 수 있도록 도와주는 타입스크립트의 문법입니다.간단한 예제와 함께 살펴보겠습니다.2개의 타입 Dog와 Cat을 정의하고 두 타입의 유니온 타입인 Animal 타입을 정의했습니다

인터페이스란 타입 별칭과 동일하게 타입에 이름을 지어주는 또 다른 문법입니다.예를 들어 간단한 Person 객체의 타입을 정의한다면 다음과 같이 할 수 있습니다.이렇게 정의한 인터페이스를 타입 주석과 함께 사용해 변수의 타입을 정의할 수 있습니다.이렇듯 인터페이스는 타

인터페이스 확장 인터페이스 확장이란 하나의 인터페이스를 다른 인터페이스들이 상속받아 중복된 프로퍼티를 정의하지 않도록 도와주는 문법입니다. 말로만 하면 어려우니 예제와 함께 살펴보겠습니다. 다음과 같이 3개의 타입이 정의되어있다고 가정하겠습니다. 각 타입 들을 자세히 살펴보면 Animal 타입을 기반으로 Dog, Cat, Chicken이 각각의 추가적인 ...

타입 별칭은 동일한 스코프 내에 중복된 이름으로 선언할 수 없는 반면 인터페이스는 가능합니다.이렇게 되는 이유는 중복된 이름의 인터페이스 선언은 결국 모두 하나로 합쳐지기 때문입니다.따라서 위 코드에 선언한 Person 인터페이스들을 결국 합쳐져 다음과 같은 인터페이스

제네릭이란 함수나 인터페이스, 타입 별칭, 클래스 등을 다양한 타입과 함께 동작하도록 만들어 주는 타입스크립트의 놀라운 기능 중 하나 입니다.제네릭이 필요한 상황다음과 같이 다양한 타입의 매개변수를 받고 해당 매개변수를 그대로 반환하는 함수가 하나 필요하다고 가정하겠습

4가지의 사례를 살펴보며 제네릭의 타입 변수를 더 잘 활용하는 방법에 대해 살펴 보겠습니다.만약 2개의 타입 변수가 필요한 상황이라면 다음과 같이 T, U 처럼 2개의 타입 변수를 사용해도 됩니다.위 코드에서 T는 String 타입으로 U는 Number 타입으로 추론됩

자바스크립트의 배열 메서드 Map은 다음과 같이 원본 배열의 각 요소에 콜백함수를 수행하고 반환된 값들을 모아 새로운 배열로 만들어 반환합니다.map 메서드를 직접 함수로 만들고 타입도 정의하겠습니다. 먼저 제네릭 함수가 아닌 일반적인 함수로 만듭니다.메서드를 적용할

제네릭은 인터페이스에도 적용할 수 있습니다. 다음과 같이 인터페이스에 타입 변수를 선언해 사용하면 됩니다.키페어를 저장하는 객체의 타입을 제네릭 인터페이스로 정의했습니다.다음과 같이 변수의 타입으로 정의하여 사용할 수 있습니다.변수 keyPair의 타입으로 KeyPai

Promise는 제네릭 클래스로 구현되어 있습니다. 따라서 새로운 Promise를 생성할 때 다음과 같이 타입 변수에 할당할 타입을 직접 설정해 주면 해당 타입이 바로 resolve 결과값의 타입이 됩니다.아쉽게도 reject 함수에 인수로 전달하는 값 즉 실패의 결과

먼저 타입을 조작한다는 것은 기본 타입이나 별칭 또는 인터페이스로 만든 원래 존재하던 타입들을 상황에 따라 유동적으로 다른 타입으로 변환하는 타입스크립트의 강력하고도 독특한 기능입니다.제네릭도 함수나 인터페이스, 타입 별칭, 클래스 등에 적용해서 상황에 따라 달라지는

인덱스드 엑세스 타입은 인덱스를 이용해 다른 타입내의 특정 프로퍼티의 타입을 추출하는 타입입니다. 인덱스드 엑세스 타입은 객체, 배열, 튜플에 사용할 수 있기 때문에 세가지 예시를 순서대로 모두 살펴보겠습니다.다음과 같은 게시글을 표현하는 객체 타입이 있다고 가정합니다

keyof 연산자는 객체 타입으로부터 프로퍼티의 모든 key들을 String Literal Union 타입으로 추출하는 연산자입니다.다음은 keyof 연산자를 사용하는 예시입니다.Person 객체 타입을 정의하고 해당 타입을 갖는 변수를 하나 선언합니다.그리고 getP

맵드 타입은 기존의 객체 타입을 기반으로 새로운 객체 타입을 만드는 마법같은 타입 조작 기능입니다. 예제와 함께 살펴보겠습니다. 이번에는 유저 정보를 관리하는 간단한 프로그램의 일부분을 만든다고 가정합니다. 먼저 유저 객체 타입을 정의합니다.다음으로는 유저 정보가 서버

템플릿 리터럴 타입은 타입 조작 기능들 중 가장 단순한 기능으로 템플릿 리터럴을 이용해 특정 패턴을 갖는 String 타입을 만드는 기능입니다.다음과 같은 코드가 있다고 가정합니다.Color와 Animal은 각각 3개의 String Literal 타입으로 이루어진 Un

조건부 타입은 extends와 삼항 연산자를 이용해 조건에 따라 각각 다른 타입을 정의하도록 돕는 문법입니다.조건부 타입은 위 코드 처럼number extends string ? 과 같은 조건식이 있고 이 조건이 참이라면 ? 우측의 타입인 Number 타입이 결과가 되

변수 a의 타입은 조건식이 참이되어 string으로 정의되고 변수 b의 타입은 조건식이 거짓이 되어 number 타입으로 정의됩니다.그럼 이번에는 타입 변수에 Union 타입을 할당해 보겠습니다.지금까지 배운 조건부 타입 문법에 따라 변수 c의 타입은 number |

infer는 조건부 타입 내에서 특정 타입을 추론하는 문법입니다.infer는 다음과 같이 특정 함수 타입에서 반환값의 타입만 추출하는 특수한 조건부 타입인 ReturnType을 만들 때 이용할 수 있습니다.조건식T extends () => infer R에서 infer

이번 섹션에서는 타입스크립트의 유틸리티 타입에 대해 살펴봅니다.유틸리티 타입이란 타입스크립트가 자체적으로 제공하는 특수한 타입들입니다. 우리가 지금까지 배웠던 제네릭, 맵드 타입, 조건부 타입 등의 타입 조작 기능을 이용해 실무에서 자주 사용되는 유용한 타입들을 모아

가장 처음으로 살펴볼 유틸리티 타입은 Partial 타입입니다. Partial은 부분적인 또는 일부분의 라는 뜻으로 특정 객체 타입의 모든 프로퍼티를 선택적 프로퍼티로 변환합니다. 따라서 기존 객체 타입에 정의된 프로퍼티들 중 일부분만 사용할 수 있도록 도와주는 타입입

이번 포스팅에서 가장 먼저 살펴볼 유틸리티 타입은 Pick<T, K> 타입입니다. Pick은 우리말로 뽑다, 고르다 라는 뜻입니다. 따라서 특정 객체 타입으로부터 특정 프로퍼티 만을 골라내는 그런 타입입니다. 예를 들어 Pick 타입에 T가 name, age가 있

Exclude 타입은 다음과 같이 T로부터 U를 제거하는 타입입니다.직접 구현 하면 다음과 같습니다.Extract 타입은 다음과 같이 T로 부터 U를 추출하는 타입입니다직접 구현 하면 다음과 같습니다.ReturnType은 타입변수 T에 할당된 함수 타입의 반환값 타입을