TypeScript의 타입 알아보기

TypeScript Types

 

기본 타입

Boolean: true나 false와 같은 불리언 값을 나타낸다.

let isDone: boolean = false;

 

Number: JavaScript와 마찬가지로, TypeScript의 모든 숫자는 부동 소수점 값이다. TypeScript는 16진수 및 10진수 리터럴 외에도, ES6(ECMAScript 2015)에 도입된 2진수 및 8진수를 지원하고 있다.

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

 

String: 텍스트 데이터 타입을 나타낸다. JavaScript와 같이, TypeScript도 문자열 데이터를 위해 큰따옴표 (") 또는 작은따옴표 (')를 사용하고 있으며 ES6(ECMAScript 2015)에 추가된 백틱(`)을 이용하여 문자열을 나타내는 것도 가능하다.

let color: string = "blue";

 

Array: 배열 타입은 두 가지 방법으로 작성할 수 있다. 하나는 요소 타입 뒤에 '[]'를 붙이는 것이고, 다른 하나는 제네릭 배열 타입인 Array<요소 타입>을 사용하는 것이 있다.

let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

 

Tuple: 튜플 타입을 사용하여, 배열의 각 요소의 타입을 고정할 수 있다.

let x: [string, number];
x = ["hello", 10]; // 타입 일치
x = [10, "hello"]; // 타입 에러

 

Enum: enum은 C#, Java와 같은 언어에서 찾을 수 있는 특징인데, 값의 집합에 더 나은 이름을 붙일 수 있게 해준다.

enum Color {
    Red,
    Green,
    Blue
}
let c: Color = Color.Green;

 

Any: any 타입은 기존 JavaScript와 최대한 유사하게 동작하도록 하기 위해 사용하는 타입이다. any 타입의 변수에는 모든 타입의 값이 들어갈 수 있지만 Any타입을 사용하게 된다면, TypeScript를 이용해 정적인 타입을 지정해 주는 의미가 옅어져 사용에 주의해야 한다.

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;

 

Void: void는 함수에서 아무런 값을 반환하지 않을 때의 반환 타입으로 주로 사용된다.

function warnUser(): void {
    console.log("This is my warning message");
}

 

타입 선언 방법

직접 타입을 선언하기: 변수나 함수의 반환값, 함수의 매개변수에 타입을 명시적으로 선언할 수 있다.

let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";

 

함수에서의 타입 선언: 함수의 매개변수와 반환하는 값의 타입을 선언할 수 있다.

function add(x: number, y: number): number {
    return x + y;
}

 

인터페이스, 타입: TypeScript는 interface나 type키워드를 사용하여 커스텀 타입을 정의하거나 객체의 구조를 정의할 수 있다.

interface Point {
    x: number;
    y: number;
}

// interface와 선언방식이 다르다
type PointType = {
    x: number;
    y: number;
}

let myPoint: Point = { x: 10, y: 20 };
let typePotin: PointType = {x: 20, y: 30};

 

type과 interface의 차이

interface는 확장 가능하다는 장점이 있다. interface를 사용하면 같은 이름의 interface를 여러 번 선언할 수 있고, TypeScript 컴파일러는 그러한 선언들을 자동으로 합쳐 하나의 interface로 만들어주지만, 반면에 type은 확장할 수 없다.

interface User {
  name: string;
}

interface User {
  age: number;
}

// 위와 같이 선언하면 아래와 같이 합쳐진다.
// interface User {
//   name: string;
//   age: number;
// }

 

type은 유니온(|)과 인터섹션(&) 타입을 표현하는 데, 이로 인해 type은 interface보다 더 복잡한 타입 표현식을 유연하게 생성할 수 있게 해 준다.

type WindowStates = "open" | "closed" | "minimized";  // Union type
type LockStates = "locked" | "unlocked";  // Union type
type OddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;  // Union type

type은 원시 타입, 유니온, 튜플 등에 별칭을 지정할 수 있지만, interface는 원시 타입에 별칭을 지정할 수 없다.

type ID = number | string;  // type은 원시 타입에 별칭을 지정할 수 있다