타입 스크립트의 타입

기본 타입

number

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

TS에서 number는 이진수, 8진수, 10진수, 16진수 같은 모든 부동 소수를 number로 표현한다.

string

let fullName: string = "Bob Bobbington";
fullName = 'Morgan Davis;';
let sentence: string = `Hello, my name is ${ fullName }.

TS에서 string은 큰 따옴표, 작은 따옴표, 벡틱으로 입력되는 모든 문자열 타입을 의미한다.

array

let list: number[] = [1, 2, 3];
let list: string[] = ["one", "two", "three"];

TS에서는 배열의 요소들의 타입을 고정시킬 수 있다. 이를 표기할땐 타입을 입력 후 []을 입력한다.

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

또는 제네릭 배열 타입을 사용한다.

tuple

let x: [string, number];
x = ["hello", 10];

튜플(tuple)이란 배열의 요소 각각의 타입과 총 갯수를 고정시키는 배열이다.**
기존 배열과의 차이점은 배열의 요소마다 타입을 다르게 고정 할 수 있다는 점이다.

enum(열거형)

enum Role { ADMIN, READ_ONLY, AUTHOR };

const person = {
  name: "Max",
  age: 30,
  hobbies: ["Sports", "Cooking"],
  role: Role.ADMIN,
}

if (person.role === Role.ADMIN) {
  console.log("is admin")
}

기본적으로 enum 값의 집합의 멤버마다 0부터 시작하여 숫자를 하나씩 매긴다.

enum Role { ADMIN = 1, READ_ONLY = "READ_ONLY", AUTHOR = true };

혹은 값을 임의로 설정 할 수도 있다.

var Role;
(function (Role) {
    Role[Role["ADMIN"] = 0] = "ADMIN";
    Role[Role["READ_ONLY"] = 1] = "READ_ONLY";
    Role[Role["AUTHOR"] = 2] = "AUTHOR";
})(Role || (Role = {}));
;
var person = {
    name: "Max",
    age: 30,
    hobbies: ["Sports", "Cooking"],
    role: Role.ADMIN,
};
if (person.role === Role.ADMIN) {
    console.log("is admin");
}

위 코드는 JS로 다음과 같이 컴파일 된다.

any

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

let list: any[] = [1, true, "free"];

list[1] = 100;

any는 어떠한 타입도 고정시키지 않는다.
any가 사용된 코드는 컴파일시 타입스크립트에서 변환 과정을 거치지 않는다.
또한 TS의 장점을 없애는 기능이다보니 과도한 사용은 지양해야한다.

유니언 타입

만약 입력될 타입의 기대값이 string이나 number가 동시에 가능한 경우에는 any를 사용하는 것보다는 유니언 타입을 사용하는 것이 바람직하다.

function combine(input1: number | string, input2: number | string) {
  let result;
  if (typeof input1 === "number" && typeof input2 === "number") {
    result = input1 + input2;
  } else {
    result = input1.toString() + input2.toString();
  }
  return result;
}

유니언 타입을 사용할때는 |를 사용하여 표기한다.

리터럴 타입

function combine(input1: number | string, input2: number | string, resultConversion: "as-number" | "as-text") {
  let result;
  if (typeof input1 === "number" && typeof input2 === "number" || resultConversion === "as-number") {
    result = +input1 + +input2;
  } else {
    result = input1.toString() + input2.toString();
  }
  return result;
}

리터럴 타입은 기존의 원시타입과 객체타입 같은 유형이 아닌 값 자체를 타입으로서 갖는다고 볼 수 있다.
"Hello World"는 string이지만, string은 "Hello World"가 아니란 것이다.

타입 알리아스(타입 별칭)

위와 같은 유니언 타입을 사용할시 이를 조금 더 편하게 만들어주는 기능이 TS에 존재하는데 바로 타입 알리아스(타입 별칭)이다.

type Combinable = number | string;
type ConversionDescriptor = "as-number" | "as-text";

function combine(input1: Combinable, input2: Combinable, resultConversion: ConversionDescriptor) {
  let result;
  if (typeof input1 === "number" && typeof input2 === "number" || resultConversion === "as-number") {
    result = +input1 + +input2;
  } else {
    result = input1.toString() + input2.toString();
  }
  return result;
}

위와 같이 평소에 변수를 할당하듯이 type을 사용하여 새로운 타입의 명칭을 생성 할 수 있다.
이는 객체에도 적용 시킬 수 있다.

// basic...

function greet(user: { name: string; age: number }) {
  console.log('Hi, I am ' + user.name);
}
 
function isOlder(user: { name: string; age: number }, checkAge: number) {
  return checkAge > user.age;
}

// type alias...

type User = { name: string; age: number };
 
function greet(user: User) {
  console.log('Hi, I am ' + user.name);
}
 
function isOlder(user: User, checkAge: number) {
  return checkAge > user.age;
}