제네릭이란 타입스크립트에서 제네릭이란 함수나 인터페이스, 타입 별칭, 클레스 등을 다양한 타입과 함께 동작하도록 만들어 주는 기능을 말합니다. 제네릭(Generic)이란 일반적인 또는 포괄적인 이라는 뜻을 가지고 있습니다. 제네릭과 의미가 비슷한 단어는 제네럴(General)입니다. 제네럴은 영어권에서 종합병원을 이야기 할 때 사용되는 단어로, 두루두루 다 적용할 수 있는 포괄적인 뜻으로 생각할 수 있습니다. 제네릭이 필요한 상황 function example(value:any){ return value }; let numberValue = example(123); // any 타입 let stringValue = example('Korea'); // any 타입 example함수는 인수로 전달한 값을 ..
컴파일러 옵션이란 타입스크립트의 컴파일은 작성한 타입스크립트 코드에 타입 오류가 없는지를 검사하고 오류가 없다면 자바스크립트 코드로 변환합니다. 이러한 컴파일 과정에서 아주 세부적인 사항들(얼마나 엄격하게 타입을 검사할 건지 또는 컴파일 되는 자바스크립트 코드의 버전은 어떻게 할 건지 등)을 컴파일 옵션이라고 합니다. 컴파일러 옵션 자동 생성 타입스크립트의 컴파일러 옵션은 tsconfig.json 파일에서 설정할 수 있으며, Node.js 패키지 단위로 설정됩니다. 컴파일러 옵션을 가장 쉽게 설정하는 방법은 자동 생성 도구를 이용하는 방법입니다. tsc를 이용하면 기본 옵션이 설정된 컴파일러 옵션 파일을 자동 생성할 수 있습니다. tsc --init 터미널에서 위 명령어를 입력하면 자동으로 기본 설정이 ..
타입 별칭과 인터페이스 아래 코드는 name: string과 age: number를 가진 객체를 타입 별칭과 인터페이스로 구현한 구문입니다. type Person = { name: string; age: number; } interface Person{ name: string; age: number; } 두 구문에 대한 타입스크립트의 할당 가능성 검사와 오류 메시지는 거의 동일합니다. 하지만 완전하게 동일하지 않고 몇 가지 차이점을 가지고 있습니다. 인터페이스는 속성 증가를 위해 병합 할 수 있습니다. 인터페이스는 클래스가 선언된 구조의 타입을 확인하는데 사용할 수 있지만, 타입 별칭은 사용할 수 없습니다. 일반적으로 인터페이스의 타입 검사가 더 빠릅니다. 인터페이스는 이름 없는 객체 리터럴의 별칭이 아..
자바스크립트의 배열은 매우 유연하고 내부에 모든 타입의 값을 혼합해서 저장할 수 있습니다. 그러나 배열 안에 다른 타입의 값을 혼합해서 사용하거나, 다른 타입의 값을 추가하게 되면 배열을 읽을 때 혼란을 줄 수 있으며, 오류가 발생할 수도 있습니다. 그렇기 때문에 대부분의 배열은 하나의 특정 타입의 값만 가지고 있는 것을 볼 수 있습니다. 타입스크립트는 초기 배열 내부의 값에 대한 타입을 기억하고, 배열이 해당 데이터 타입에서만 작동하도록 제한하여 배열의 데이터 타입을 하나로 유지시킵니다. 위 코드를 보면 타입스크립트가 초기 배열 names에 담긴 요소를 통해서 배열의 타입을 유추하는 것을 볼 수 있습니다. 배열 타입 배열의 요소 타입 다음에 [ ]을 배치 : let names: string[]; Arr..
한쪽 끝에는 함수 인수가 있고, 다른 쪽 끝에는 반환 타입이 있다. 함수의 매개변수 const eating = (food) => { console.log(`Give me the ${food}!`) } eating 함수를 작성한 개발자가 매개변수 food를 제공하기 위해 의도한 값의 타입은 무엇일까요? string일까요? 아니면 재정의된 toString() 메서드가 있는 객체일까요? 매개변수의 타입에 대해 과연 누가 알 수 있을까요? 명시적으로 타입 정보가 선언되지 않고는 매개변수의 타입에 대해 알 수 없습니다. 타입스크립트는 이와 같은 매개변수를 보면 any타입으로 간주하여 매개변수의 타입은 무엇이든 될 수 있습니다. 변수와 마찬가지로 타입스크립트를 사용하면 타입 에노테이션으로 함수 매개변수의 타입을 선..
객체 타입 객체 리터럴은 중괄호({…}) 사용하여 생성할 수 있는데, 타입스크립트는 객체의 각각의 키에 대한 값에 따라 타입을 결정하게 됩니다. 객체 타입 선언 객체 타입은 객체 리터럴과 유사하게 보이지만 값 대신 타입을 사용하여 설명합니다. 별칭 객체 타입 {name: string, age: number} 와 같은 객체 타입을 계속 작성하는 것은 효율적이지 못하고 귀찮습니다. 일반적으로는 각 객체 타입에 타입 별칭을 할당하여 사용합니다. (대부분의 타입스크립트 프로젝트에서는 객체 타입을 설명할 때 인터페이스(interface) 키워드를 사용하는 것을 선호) 구조적 타이핑 타입스크립트의 타입 시스템은 구조적으로 타입화(structurally typed)되어 있습니다. 즉, 타입을 충족하는 모든 값을 해당..
유니언과 내로잉은 타입스크립트가 해당 값을 바탕으로 타입 추론을 수행하는 핵심 개념입니다.(코드 정보에 입각한 추론) 유니언과 리터럴 - 유니언(union) : 값에 허용된 타입을 두 개 이상의 가능한 타입으로 확장하는 것 - 내로잉(narrowing) : 값에 허용된 타입이 하나 이상의 가능한 타입이 되지 않도록 좁히는 것 1️⃣ 유니언 타입 유니언 타입은 (값이 정확히 어떤 타입인지 모르지만) 두 개 이상의 타입을 지정하는 것을 말합니다. 유니언 타입은 가능한 값 또는 구성 요소 사이에 수직선(|) 연산자를 사용하여 지정합니다. 유니언 속성 값이 유니언 타입인 경우, 타입스크립트는 유니언으로 선언한 모든 타입에 존재하는 멤버 속성만 접근 할 수 있습니다. 유니언 타입의 경우 타입이 두 개 이상이기 때..
타입스크립트는 자바스크립트 코드를 구조화하고, 타입 안정성을 강화하기 위해서 사용됩니다. 타입의 종류 타입스트립트의 기본 타입은 자바스크립트의 기본 윈시 타입(primitive type)과 같습니다. 윈시 타입(primitive type) - null - undefined - boolean - string - number - bigint - symbol 타입스크립트는 변수의 타입을 유추할 수 있어, 변수에 마우스를 올리면 해당 변수가 어떤 타입을 인지 유추한 정보를 메시지로 표시 됩니다. 변수에 초기값이 없는 경우에는 어떻게 될까? 변수에 초기값이 없는 경우, 타입스크립트는 기본적으로 변수를 암묵적인 any 타입으로 간주합니다. any 타입은 특정 타입을 강제하는 대신 새로운 값이 할당될 때마다 변수 타..
중복을 피하기위해 기존에 정의되어 있는 타입을 새로운 타입으로 변환해 주는 문법(자바스크립트의 map()함수를 적용한 것과 같은 효과) // 기존 타입 { name: string; email: string; } // 새로운 타입 { name: number; email: number; } 🖐🏻 문법 type Name = 'Kim' | 'Park' | 'Shin'; 위와 같이 김, 박, 신을 유니온 타입으로 묶어주는 Name이라는 타입이 있습니다. 여기서 각 이름에 몸무게까지 붙인 객체를 만들고 싶다면 아래와 같이 변환할 수 있습니다. type PersonProfiles = { [T in Name] : number}; const personInfo1: PersonProfiles = { Kim: 55, Par..
