! 읽기 전
이 시리즈에 있는 모든 글은 블로그 지향 기반 개발 & 공식 문서 기반으로 작성되었습니다 내용은 정확하지 않을 수도 있으며, 100% 신뢰하지 마시길 바랍니다
💡 Nest는 타입스크립트를 기본 언어로 채택하고 있습니다. 자바스크립트로 설정을 바꿀 수도 있지만 타입스크립트의 장점을 누리기 위해 기본 설정으로 사용하시기를 추천합니다. 이 절에서는 타입스크립트에 익숙하지 않은 개발자 분들이 Nest를 배우기 위해 알아야 할 아주 기본적인 타입스크립트 문법만을 소개합니다. 꼭 시간을 투자하여 타입스크립트를 배워보시길 바랍니다. 하나 이상의 언어에 익숙하다면 쉽게 익힐 수 있을 것입니다. 자바 또는 자바스크립트를 다룰 줄 알지만 타입스크립트를 처음 접하는 분들을 대상으로 이후의 설명을 진행하겠습니다.
타입스크립트는 마이크로소프트에서 개발한 언어입니다. 자바스크립트 코드에 타입 시스템을 도입하여 런타임에 에러가 발생할 가능성이 있는 코드를 정적 분석1으로 찾아줍니다. 타입스크립트는 자바스크립트에 구문을 추가하여 만들어졌습니다. tsc 명령으로 컴파일하여 자바스크립트 코드로 변환이 가능합니다. 컴파일 후 생성된 자바스크립트는 타입이 없습니다. 자바스크립트에 원래 타입이 없기 때문입니다. 타입스크립트가 제공하는 타입 추론은 타입오류로 인해 런타임에 발생하는 오류를 컴파일 타임에 잡아줍니다. VS Code2와 같은 IDE에서는 소스코드에 에러를 표시해 주므로 일일히 컴파일 명령을 실행하지 않아도 됩니다.
변수 선언
타입스크립트에서 변수를 선언하는 방식은 다음과 같습니다.
[선언키워드] [변수명]: [타입]- 선언키워드:
const,let또는var로 선언합니다. const는 선언 후 재할당이 불가능하며 let과 var는 재할당이 가능하여 값을 바꿀 수 있습니다. let과 var의 차이는 호이스팅(hoisting) 여부인데, var는 변수를 사용한 후에 선언이 가능하지만 let은 그렇지 못합니다.
Typescript에서 지원하는 타입
타입스크립트는 자바스크립트가 가지고 있는 자료형을 모두 포함합니다. 자바스크립트의 타입은 기본타입(Primitive value)과 객체형(Object), 함수형(Function)이 있습니다. typeof 키워드를 이용하여 인스턴스의 타입을 알 수 있습니다.
typeof instance === "undefined"기본 타입
| typeof | 설명 | 할당 가능한 값 |
|---|---|---|
| boolean | 참, 거짓을 나타내는 논리값 | true, false |
| null | "유효하지 않음"을 나타낸다 | null |
| undefined | 값이 존재하지 않음. 즉, 변수 선언 후 "값이 할당되지 않음"을 나타낸다 | undefined |
| number | 배정밀도 64비트 형식 IEEE 754의 값 | -(2^53 -1) 와 2^53 -1 사이의 정수와 실수+Infinity, InfinityNaN (Not a Number) |
| bigint | Number의 범위를 넘어서는 정수를 안전하게 저장하고 연산할 수 있게 해 준다 | ex) const x = 2n ** 53n;정수 끝에 n을 추가한다 |
| string | 문자열. 변경 불가능(immutable)하다 | 홑따옴표 또는 쌍따옴표로 둘러싸인 문자열ex) 'hello', "world" |
| symbol | 유일하고 변경 불가능한 (immutable) 기본값(primitive value)객체 속성의 키로 사용할 수 있다 |
객체 타입
객체 타입은 속성(Property, 프로퍼티)을 가지고 있는 데이터 컬렉션입니다. C언어의 구조체와 유사합니다. 속성은 키와 값으로 표현 되는데 값은 다시 자바스크립트의 타입을 가지고 있습니다. 따라서 다음 예와 같이 데이터를 구조적으로 표현할 수 있습니다.
const dexter = {
name: 'Dexter Han',
age: 21,
hobby: ['Movie', 'Billiards'],
}자바스크립트에는 개발할 때 유용한 내장객체들이 있습니다.
Date: 1970년 1월 1일 UTC 자정과의 시간 차이를 밀리초 단위로 나타낸 것으로 시간을 다룰 때 사용합니다.- 배열(
Array): 정수를 키로 가지는 일련의 값을 가진 객체입니다. 코드로 표현할 때는 대괄호([])로 표현합니다. - 키를 가진 컬렉션:
Map,WeakMap은 키와 값을 가지는 객체 타입이고,Set과WeakSet은 유일값들로 이루어진 컬렉션 객체 타입입니다. JSON: JSON(JavaScript Object Notation)은 자바스크립트에서 파생된 경량 데이터 교환 형식이지만 많은 프로그래밍 언어에서 사용됩니다. JSON은 범용 데이터 구조를 구축합니다.
이 외 표준 라이브러리에는 더 많은 내장 객체가 있습니다. MDN 문서를 참고하세요.
함수(Function) 타입
자바스크립트는 함수를 변수에 할당하거나 다른 함수의 인자로 전달할 수 있습니다. 함수의 결과로 반환할 수도 있습니다. 언어의 이러한 특징을 일급 함수라고 합니다. 함수 func의 타입을 검사하면 "function"이 됩니다.
typeof func === "function"any / unknown / never
타입스크립트에는 특수한 타입이 있습니다. any는 자바스크립트와 같이 어떠한 타입의 값도 받을 수 있는 타입입니다. any 타입의 객체 역시 어떤 타입의 변수에도 할당이 가능합니다. 이 특성때문에 런타임에 오류를 일으킬 가능성이 있습니다. unknown 타입은 any타입과 마찬가지로 어떤 타입도 할당 가능하지만 다른 변수에 할당 또는 사용할 때 타입을 강제하도록 하여 any가 일으키는 오류를 줄여 줍니다. never 타입의 변수에는 어떤 값도 할당할 수 없습니다. 함수의 리턴 타입으로 지정하면 함수가 어떤 값도 반환하지 않는다는 것을 뜻하고, 다음과 같이 특정 타입의 값을 할당받지 못하도록 하는데 사용할 수도 있습니다. <T>는 제네릭 타입인데 이후에 설명합니다.
type NonString<T> = Textends string ? never : T;타입 정의하기
타입 스크립트는 타입을 정의해서 사용할 수 있습니다. 기본타입과 같은 타입을 정의한다는 뜻은 아니고, 위에서 설명한 타입들을 조합하여 타입에 이름을 붙여 사용합니다. 다음 코드를 vscode에 입력하고 마우스를 user 변수 위로 가져가 보세요.
const user = {
name: 'Dexter',
age: 21,
}추론된 타입이 다음과 같이 표시됩니다.
const user: {
name: string;
age: number;
}변수에 객체를 바로 할당하지 않고 interface로 정의할 수 있습니다. 인터페이스를 이용하여 User 타입을 선언하는 것입니다.
interfaceUser {
name: string;
age: number;
}
const user:User = {
name: 'Dexter',
age: 21,
}interface는 class로 선언할 수도 있습니다.
class User {
constructor(name: string, age: number) { }
}
const user:User =newUser('Dexter', 21);
}💡 생성자에 선언된 변수는 클래스 멤버변수가 됩니다. 접근제한자(public, private)가 없으면 public 변수가 됩니다. 멤버변수를 사용할 때는 this.name과 같이 this 키워드와 함께 사용합니다.
또 타입은 type 키워드로 새로운 타입을 만들수 있습니다.
type MyUser = User;MyUser 타입은 기존 User 타입을 그대로 사용하지만 내가 사용하는 도메인에 맞는 이름으로 바꾼 것입니다.
타입 구성하기
자바스크립트는 변수에 어떠한 타입의 값도 할당할 수 있습니다. 일명 덕 타이핑3이라 부릅니다. 타입스크립도 여러 타입의 값을 할당할 수 있습니다. 여러 타입을 조합한 새로운 타입을 가지는 것입니다.
유니언 (Union) 타입
유니언 타입이 위에서 설명했던 여러 타입을 조합한 타입입니다. 다음 코드에서 getLength 함수의 인자인 obj는 string 또는 string 배열 타입을 가질 수 있습니다.
function getLength(obj: string | string[]) {
return obj.length;
}유니언 타입을 활용하면 변수가 가질 수 있는 값을 제한할 수도 있습니다.
type Status = "Ready" | "Waiting";💡 타입스크립트는 열거형을 제공합니다. 위 코드는 열거형으로 사용하는게 더 편합니다.
enum Status {
READY = "Ready",
WAITING = "Waiting",
}제네릭(Generic) 타입
Java나 C#에서의 제네릭과 유사한 기능을 합니다. 어떠한 타입이든 정의될 수 있지만 호출되는 시점에 타입이 결정됩니다. 만약 다음과 같이 인자를 그대로 리턴하는 함수가 있다고 합시다.
function identity(arg: any): any {
return arg;
}이 함수의 반환값은 any로 되어 있기 때문에 arg에 'test'를 인자로 전달할 경우 전달한 인자의 string 타입이 반환할 때 any가 되어 버립니다. 반면 다음과 같이 제네릭 타입을 사용하게 되면 리턴되는 값의 타입은 함수를 호출하는 시점의 인자로 넣은 타입으로 결정되도록 할 수 있습니다.
function identity<T>(arg: T): T {
return arg;
}제네릭을 선언할 때는 보통 대문자 한글자를 사용합니다.
코딩애플 - 타입스크립트 쓰는 이유 & 필수 문법 10분 정리
interfaceUser -> interface User
띄어쓰기가 안되어있어요!