Typescript

타입스크립트는 마이크로소프트에서 2012년도에 발표한 언어입니다. 이름에서 느껴지듯이 자바스크립트를 기반(물론 자바스크립트는 자바기반이 아니지만)으로 정적 타입 문법을 더한 언어입니다.그래서 자바스크립트 유저라면 간단하게 배울 수 있고 자바스크립트의 타입으로부터 오는

굳이 타입스크립트 프로젝트 생성에 대해 따로 다루는 이유는 기존에 프로젝트들은 그냥 만들면 되었지만 타입스크립트 프로젝트는 약간의 설정이 필요하기에 소개해드리고 넘어가려고 합니다.타입스크립트는 Node.js 플랫폼을 기반으로 작동하는 언어이므로 npm init을 통해서

이전 포스트에서 다룬적이 있는 내용이긴 한데, 가독성도 별로고 설명이 조금 부족한 것 같아서 포스트를 다시 작성했습니다.타입스크립트로 개발하고 실행하기 위해서는 타입스크립트 컴파일러 등의 설치가 필요합니다.패키지를 설치하기 이전에 다음과 같은 과정을 거쳐 주세요.Nod

지난 포스트에서 기본적인 타입스크립트 프로젝트를 만들면서 tsconfig.json 파일을 만들었습니다. 다양한 옵션들이 존재하지만 우리가 필요로 하기에 남겨두었던 옵션 키들에 대해서 알아보고 넘어가겠습니다.동작 대상의 플랫폼을 구분해서 그에 맞는 모듈 방식으로 컴파일

잠깐 쉬어가는 의미에서 웹 상에서 타입스크립트를 실행하는 방법을 알아보도록 하겠습니다. 기존 자바스크립트 실행 결과를 웹 상에서 확인하려면, HTML 문서를 만들고 JS 파일을 <script> 태그로 연결시켜 이용했습니다.타입스크립트도 동일합니다. 다만 웹에선 타

타입스크립트는 자바스크립트 기반 언어이기 때문에 문법에 있어서 기본적인 사용법들은 자바스크립트를 따라갑니다.들어가기 전에 타입스크립트 관련 여러 자료들을 보면서 어떤 곳은 세미콜론을 붙이고, 어떤 곳은 세미콜론을 붙이지 않아서 혼란이 있었습니다. 과연 무엇이 정식 문법

기본 타입(Basic Type, 내장 타입)은 타입스크립트에서 지원하는 타입들을 의미합니다.기본 타입에는 우리가 자바스크립트에서 사용하던 Array, string, boolean, number 등과 any, void 등과 같은 타입스크립트에서 지원하는 타입들이 존재합니

타입스크립트에서 배열은 배열을 저장할 수 있는 타입입니다. 자바스크립트와 동일하게 리터럴 방식으로 선언하며 배열의 요소 타입을 타입으로 명시해준다는 것이 특징입니다.다차원 배열도 생성할 수 있습니다.위 방식 외에도 제네릭이라는 방식으로도 배열을 선언할 수 있습니다.제네

타입스크립트의 배열 선언은 자바스크립트와 동일합니다. 배열 리터럴을 이용하거나, Array 객체 생성자를 통해 생성합니다. 자바스크립트 포스트에서 언급했듯이 배열의 선언은 배열 리터럴 방식을 이용해서 선언하게 됩니다.타입스크립트에서 배열에 타입을 주는 방식은 변수때와

이번엔 객체를 만들기 위한 객체 타입의 정의 방법에 대해서 알아보겠습니다.타입스크립트는 두 가지 방식으로 객체 타입을 정의할 수 있습니다. object 타입의 선언과 객체 리터럴을 사용해서 정의하는 방식 두 가지가 존재합니다.object를 이용한 객체 정의는 기존에 변

enum은 타입스크립트에서 지원하는 타입입니다. enum은 enumerated type의 줄임말로 해석하면 열거형 타입이라고 할 수 있습니다. 그 이름처럼 enum은 데이터를 열거하는데 사용됩니다.위처럼 정의한 enum의 멤버를 값으로 사용할 수 있습니다. 값의 사용은

enum에 이어서 타입스크립트에서만 지원하는 특수 타입인 any, unknown, void, never에 대해 소개해보려고 합니다. any는 타입 검사를 따로 수행하지 않는 타입입니다. 존재이유는 기존 자바스크립트와 타입스크립트 간의 호환을 위해서라고 할 수 있습니다.

타입 별칭(Type Alias)은 타입스크립트에서 타입을 정의할 때 변수처럼 선언이 가능하도록 해주는 기능입니다.타입 별칭은 다음과 같은 형태로 선언합니다.예를들어 다음과 같이 학생(Student)라는 타입을 선언할 수 있습니다.위에서 선언한 타입을 다음과 같이 타입

그동안 4개의 포스트를 거치면서 타입 스크립트의 타입들에 대해서 알아봤습니다. 그런데 상관없어 보이는 개념처럼 보이는 각각의 타입들은 서로 긴밀한 상관 관계를 가지고 있습니다.타입스크립트의 타입들은 위의 계층도 처럼 부모-자식 관계를 형성하고 있습니다. 다른 타입을 트

이번엔 Union Type과 Intersection Type에 대해 알아보겠습니다. 두 타입은 완전히 새로운 타입은 아니고 여러 타입들을 기호로 묶어서 만든 타입 정도로 생각하고 자세히 알아보겠습니다.유니온 타입은 조합, 결합, 뒤에 올 Intersection과 비슷한

그동안 대여섯개의 포스트를 통해 타입스크립트에서 정의하는 타입들을 알아보았습니다. 이제부터 본격적으로 타입스크립트들이 지원하는 다양한 기능과 문법들에 대해서 알아보도록 하겠습니다.그리고 그 첫 번째 주자는 타입 추론(Type Inference)입니다.타입 추론은 변수에

이번엔 타입 단언(Type Assertion)에 대해 알아보겠습니다.단언하다는 '바른 말을 하다, 주저하지 않고 딱 잘라 말하다'를 의미하는 단어입니다. 그 이름처럼 타입을 딱 정한다라고 생각하고 타입 단언이 무슨 기능인지 알아보도록 하겠습니다.타입 단언은 컴파일러에게

타입 좁히기(Type Narrowing)는 예전에 unknown 타입을 다루면서 언급만 했었는데 타입 좁히기가 무엇이고 어떤 일을 하는지 이번 포스트에서 알아보도록 하겠습니다.아래와 같은 함수가 존재할 때, 타입스크립트는 변수 x가 number인지 string인지 확실

이번에는 타입스크립트에서 어떻게 함수의 타입을 정의하는지 알아보도록 하겠습니다.함수의 선언과 정의 자체는 기본 자바스크립트에서 사용하던 방식과 동일합니다. 그래서 이 포스트에선 정의에 대한 설명 자체는 건너뛰고 함수의 타입을 어떻게 정의하는지 바로 알아보도록 하겠습니다

함수 호환성을 소개합니다.

우선 순수 함수에 대해 설명을 해야합니다. 순수 함수(pure function)이란 함수형 프로그래밍에서 사용되는 언어로 함수가 수행하는 기능 외에 다른 효과가 나타나지 않는 것을 의미(부작용이 없다)합니다. 순수 함수가 아니고 기능 외에 다른 효과가 나타나는 함수를

인터페이스(Interface)는 객체의 타입을 지정하는 문법입니다. 객체 타입 정의라는 면에서 타입 별칭과 유사하다고 할 수 있습니다.인터페이스는 interface 키워드를 붙임으로써 정의할 수 있습니다.인터페이스로 타입을 정의한 객체를 만들 때 프로퍼티 수가 부족하거

지난 포스트에서 인터페이스를 다루면서 타입 별칭과 유사하다고 했습니다. 그리고 인터페이스에서 다룬 내용으로만 봤을때 타입 별칭과의 별다른 차이점도 느껴지지 않았고요.그래서 인터페이스와 타입 별칭 무엇이 다른지 조금 조사해보았습니다.인터페이스는 extends를 통해 자신

기본적으로 자바스크립트 클래스 개념을 따라갑니다. 자바스크립트 클래스는 이 포스트(https://velog.io/@bami/Javascript-%ED%81%B4%EB%9E%98%EC%8A%A4-ot9rtjxb타입스크립트에서 클래스는 자바스크립트와 동일하게 선언

타입스크립트는 인터페이스를 통해 클래스를 구현할 수도 있습니다.implements키워드를 이용하면 인터페이스로 클래스를 구현할 수 있습니다. 이때 인터페이스는 마치 클래스의 설계도와 같은 역할을 하게됩니다.이때 implements 키워드로 클래스를 구현하면, 해당 인터

이전 클래스 포스트에서 소개해드린대로 클래스 메소드를 구현해보면 다음과 같습니다.이렇게 보니 좀 복잡하고 지저분한 감이 있지않아서 타입스크립트에서는 이것을 간단하게 줄여쓸 수 있도록 단축 구문을 제공합니다. 위의 printInfo() 메소드를 단축구문을 이용해서 줄여보

이번에는 자바의 Array 객체의 메소드가 아닌 타입스크립트 배열 메소드인 filter, map, reduce 세가지를 소개하겠습니다.왜 이 세 가지를 따로 소개하냐면, 이 세 가지 메소드는 메소드 체인으로 연결되어 자주 등장하는 메소드이기 때문입니다.가장 먼저 만날

제네릭(Generics)은 인터페이스, 클래스, 함수, 타입 별칭과 함게 사용할 수 있게 만들어진 기능입니다. 제네릭은 타입을 미리 지정하지 않고 다양한 타입에 대응할 때 사용하게 됩니다.제네릭은 타입을 정의할때 기존에 사용하던 타입대신 T라는 문자로 지정해 제네릭 타

지난 포스트에서 제네릭이 무엇인지에 대해 알아보았습니다. 그리고 제네릭은 함수, 인터페이스, 클래스, 타입 별칭에도 사용할 수 있다고 했었습니다.그리고 예시를 함수로만 들었었는데 함수만 하고 넘어가긴 좀 그런거 같아서 인터페이스, 클래스, 타입 별칭에서 제네릭을 어떻게

keyof 타입 연산자(이하 keyof 또는 keyof 연산자)는 객체 타입에서 객체의 키(프로퍼티)를 string 또는 number 리터럴 유니온 타입으로 생성하는 연산자입니다.말로하면 잘 안와닿을 수 있기에 실제 코드를 하나 보면서 keyof를 이해해봅시다.위 코드

인덱스드 엑세스 타입(Indexed Access Types)은 인덱스\[]를 사용해서 객체, 배열, 튜플의 특정 프로퍼티 타입을 추출하는 타입입니다.인덱스로 객체의 프로퍼티 명을 사용하면 간단하게 객체 타입에 접근할 수 있습니다.배열에서는 typeof 연산자와 함께 사

오늘 소개할 Template Literal Types는 템플릿 리터럴 문자열을 사용해서 문자열 타입을 생성합니다.자바스크립트의 템플릿 문자열과 동일하게 사용되지만 또 다른 string 리터럴 타입과 함께 사용면 새로운 형태의 string 리터럴 타입을 생성할 수 있습니