[Typescript] 타입스크립트 기본 기능 정리

Typescript 기본 기능 정리

 

유니언 타입 (Union Types)

유니언 타입은 두 개 이상의 타입을 허용하는 타입을 정의하기 위해 사용

→ 변수가 여러 가지 다른 타입의 값을 가질 수 있음

→ " | " (or) 기호를 사용하여 타입들을 연결하여 표현

// 숫자 또는 문자열을 가질 수 있는 변수
let value: number | string;

value = 10;     
value = "hello";
//value = true;    // error: boolean은 허용되지 않음

//Union Types: OR
type Direction = "left" | "right" | 'up' | 'down';
function move(direction: Direction){
  console.log(direction)
}
move("left");
//발생할 수 있는 케이스 중 하나만 사용할 떄 사용.

type SuccessState = {
  response: {
    body: string;
  }
}

type FailState = {
  reason: string;
}

type LoginState = SuccessState | FailState;

function login(id: string, password: string): Promise<LoginState>{
  return {
    response: {
      body: 'logged in'
    }
  }
}

 

차별화된 유니온 (Discriminated Union)

유니온 타입을 활용하여 각각의 유형을 구별하기 위해 사용되는 방법으로 코드의 가독성을 높이고 타입 안정성 유지에 좋음

이 패턴은 객체의 특정 속성을 기준으로 유형을 식별하고 구분할 수 있도록 해줍니다.

Discriminated Union은 주로 type 또는 interface를 사용하여 정의

//유니언 타입에 차별화 되는 이름이 동일한 타입을 두어 간편하게 구분
//공통된 property로 구분하기 쉽게 코드를 작성

type SuccessState = {
  result: 'success';
  response: {
    body: string;
  }
}

type FailState = {
  result: 'fail';
  reason: string;
}

type LoginState = SuccessState | FailState;

function login(): LoginState {
  return {
    result: "success",
    response: {
      body: 'logged in'
    }
  }
}
function printLoginState(state: LoginState){
  if(state.result === 'success'){
    console.log(`Success ${state.response.body}`)
  } else{
    console.log(`Fail ${state.reason}`)
  }
}

 

 

 

교차 타입 (Intersection)

두 개 이상의 타입을 결합하여 새로운 타입 정의

교차 타입을 사용하면 여러 타입의 속성을 모두 가지는 새로운 타입을 정의할 수 있습니다.

예를 들어, 다음과 같이 두 개의 인터페이스를 교차하여 새로운 인터페이스를 만들 수 있습니다.

→ " &" (and) 기호를 사용하여 타입들을 연결하여 표현

type Student = {
  name: string;
  score: number;
}
type Worker = {
  employeeId: number;
  work: () => void;
}

function internWork(person: Student & Worker){
  console.log(person.name, person.employeeId, person.work())
}
internWork({
  name: 'kim',
  score: 1000,
  employeeId: 111,
  work: ()=>{}
  //모두 할당해야 에러가 나지 않음 
})

interface Car {
  brand: string;
  model: string;
}

interface Engine {
  horsepower: number;
}

type SportsCar = Car & Engine;

const myCar: SportsCar = {
  brand: "Porsche",
  model: "911",
  horsepower: 450,
};

앞서 배운 유니온 타입과 헷갈릴 수 있는 개념이나,
교차 타입은 여러 타입을 합쳐 새로운 타입을 만들고, 여러 타입의 속성을 모두 ! 가지는 것.
유니온 타입은 여러 타입 중 하나의 타입을 선택 ! 하는 방식으로 사용되는 것으로 구분하면 됩니다.

 

 

 

타입 별칭 (Type Alias) 

특정 타입에 대해 별칭을 사용하여 새로운 타입을 정의

→ 기존의 복잡한 타입들을 간결하고 읽기 쉽게 표현

// 타입 별칭 선언
type Text = string;   //문자열만 할당되도록 정의
const name: Text = 'hello'; 
//const name: Text = 1;  //error

type Num = number; 
type Student = {
  name: string;
  age: number;
};

const student: Student = {
  //animal:'cat', //error
  name: 'string',
  age: 10,
}

 

 

인터페이스(Interfaces)

인터페이스는 타입스크립트에서 데이터 구조 정의에 사용되는 강력한 도구

인터페이스를 사용하면 객체가 가져야 하는 속성과 메서드의 형태를 명확하게 정의할 수 있음

→ 인터페이스를 사용하면 코드의 일관성 유지 및 가독성을을 높이고 실수를 방지할 수 있음

interface Person {
  name: string;
  age: number;
  greet: () => void;
}

//Person 인터페이스에 name, age, greet 속성. 
//해당 인터페이스를 구현하는 객체는 꼭 name과 age 속성을 가지고, greet 메서드를 구현.

타입 별칭과 인터페이스의 차이점 !
타입 별칭은 새로운 별칭에 기존 타입을 참조하는 반면, 인터페이스는 새로운 타입을 만듦.
타입 별칭은 주로 복잡한 타입을 정의하는 데 사용되며, 인터페이스는 주로 객체 구조 정의에 사용.
타입 별칭은 type 키워드를 사용하여 정의되고, 인터페이스는 interface 키워드를 사용하여 정의.
타입 별칭은 타입 연산자를 사용하지만, 인터페이스는 연산자를 지원하지 않음.

 

 

타입 단언 (Type Assertions)

개발자가 컴파일러에게 특정 값의 타입을 더 정확하게 알려주는 기능

이를 통해 컴파일러가 해당 값에 대해 더 정확한 타입 체크를 수행할 수 있음.

//'angle-bracket' 문법
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

//as 문법
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

 

 

리터럴 타입 (Literal Types)

문자열 리터럴 타입은 문자열의 구체적인 값만을 타입으로 지정하는 기능

특정한 문자열 값 정의할 때 사용.

문자열 값의 종류를 명시적으로 나타내고 제한 가능

//타입을 문자열로 지정 가능(지정한 문자열만 할당 가능)
type JSON = 'json';
const json: JSON = 'json'

type Boal = true; //타입으로 지정한 값만 할당 가능 
const isCat: Boal = true;

function printText(s: string, alignment: "left" | "right" | "center") {
  // ...
}
printText("Hello, world", "left");

 

 

열거형 (Enums)

자바스크립트에서 지원하지 않고 타입스크립트에서 지원하고 명명된 상수들의 집합을 정의할 때 사용
타입스크립트에서는 Enum을 사용하면 타입이 정확하게 보장되지 않기에 유니언 타입을 사용하는 것을 권장

const DAY_ENUM = Object.freeze({
  "MONDAY":0,
  "TUESDAY":1, 
  "WEDNESDAY":2
})
const dayOfToday = DAY_ENUM.MONDAY

 

숫자 열거형 (Numeric enums)

enum Direction {
  Up = 1,
  Down,  //2
  Left,	 //3
  Right, //4
}
//Up = 1 로 초기화된 숫자 열거형을 선언. 
//이후 객체들은 자동으로-증가된 값을 가짐. 
//Direction.Up = 1, Down = 2, Left = 3, Right = 4

 

문자열 열거형 (String enums)

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

//문자열 열거형에서 각 멤버들은 문자열 리터럴 또는 다른 문자열 열거형의 멤버로 상수 초기화 필요