[TypeScript] 기본 타입 #2

Type Alias (타입 별칭)

: 타입의 새로운 이름을 만들어 직접 타입을 정의할 수 있음

/**
   * Type Aliases
   * 새로운 타입을 내가 정의할 수 있음
   */
  
  // 원시타입
  type Text = string;
  const name: Text = "yuna";
  const address: Text = "korea";
  type Num = number;

  // Object 타입
  type Student = {
    name: string;
    age: number;
  };

  const yuna: Student = {
    name: "유나",
    age: 24,
  };

 

 

String Literal Types

: 타입을 값 자체로 지정할 수 있음

해당 타입으로 선언된 변수는 지정된 문자열의 값만 할당 가능

/**
   * String Literal Types
   */
  type Name = "name";
  let yunaName: Name;
  yunaName = "name";
  
  type JSON = "json";
  const json: JSON = "json";

지정된 값을 할당하지 않으면 error

 

 

 

Union Types

/**
*  Union Types : OR
*/
type Direction = "left" | "right" | "up" | "down";
function move(direction: Direction) {
console.log(direction);
}

// function: login => success, fail
  type SuccessState = {
    response: {
      body: string;
    };
  };
  type FailState = {
    reason: string;
  };
  type LoginState = SuccessState | FailState;
  
  function login(id: string, password: string): LoginState {
    return {
      response: {
        body: "logged in!",
      },
    };
  }

 

Union 타입의 인자값에 따라 함수를 처리하는 방법

ex) 로그인 성공/실패 시

// function: login => success, fail
  
  type SuccessState = {
    response: {
      body: string;
    };
  };
  
  type FailState = {
    reason: string;
  };
  
  type LoginState = SuccessState | FailState;
  
  // printLoginState(state: LoginState)
  // success -> 🎉 body
  // fail -> 😥 reason
  function printLoginState(state: LoginState): void {
    if ('response' in state) {
        console.log(`🎉 ${state.response.body}`)
    } else {
        console.log(`😥 ${state.reason}`)
    }
  }

• void는 생략 가능
• in을 사용하는 것은 권장되지 않음

 

 

 

Discriminated Union (구분할 수 있는 Union)

: 모든 케이스에서 공통적인 property를 가지고 각각의 케이스를 구분

-> 아래 코드에서는 각각의 케이스에 result 속성을 추가하였음

-> 더 직관적인 코드 작성 가능 

/**
   * Discirminated
   */
  type SuccessState = {
    result: "success";
    response: {
      body: string;
    };
  };
  type FailState = {
    result: "fail";
    reason: string;
  };
  type LoginState = SuccessState | FailState;

  function login(id: string, password: string): LoginState {
    return {
        result: 'success',
      response: {
        body: "logged in!",
      },
    };
  }

  // printLoginState(state: LoginState)
  // success -> 🎉 body
  // fail -> 😥 reason
  function printLoginState(state: LoginState): void {
    if (state.result === 'success') {
      console.log(`🎉 ${state.response.body}`);
    } else {
      console.log(`😥 ${state.reason}`);
    }
  }

 

 

 

Intersection Types

: 다양한 타입들을 하나로 묶어서 선언할 수 있음

- Union이 OR 라면 Intersection은 AND의 개념

/**
   * Intersection Types : AND
   */

  type Student = {
    name: string;
    score: number;
  };

  type Worker = {
    employeeId: number;
    work: () => void;
  };

  function interWork(person: Student & Worker) {
    // person은 Student와 Worker가 더해진 타입이기 때문에 두 타입의 속성에 접근할 수 있다.
    console.log(person.name, person.employeeId, person.work());
  }

  // 두 타입에 들어있는 정보를 객체로 모두 전달해야 한다.
  interWork({
    name : 'yuna',
    score : 100,
    employeeId: 14,
    work: () => {},
  })

 

 

 

 

Enum

: 여러가지의 관련된 상수 값들을 한 곳에 모아서 정의할 수 있게 도와주는 타입

- 타입스크립트에서 자체적으로 제공

- 타입의 값이 보장되며 값이 변하지 않으므로 타입을 더 안전하게 사용할 수 있음

enum에 값을 따로 지정해주지 않으면 자동으로 0부터의 정수를 매핑해준다.

-> 문자열은 수동으로 할당 해 주어야 함

// TypeScript
  enum Days {
    Monday,
    // 1부터 시작하고 싶다면
    // Monday = 1,
    Tuesday,
    Wednesday,
    Thursday,
    Friday,
    Saturday,
    Sunday,
  }

  console.log(Days.Tuesday)
  const day = Days.Saturday
  console.log(day)

실행결과

 

문제점?

Enum Type으로 선언된 변수에는 다른 값도 할당이 가능하다

  const day = Days.Saturday
  day = 10;

타입이 정확하게 보장되지 않는다는 뜻!

=> TypeScript에서는 Enum을 쓰지 않는것이 좋음

=> Union Type을 활용해서 타입을 보장하는 것이 더 안정적

 

 

 

 

Type Inference (타입 추론)

- 선언함과 동시에 문자열을 할당했기 때문에 타입스크립트에서 자동으로 타입을 추론함

/**
 * Type Inference : 타입 추론
 */

let text = 'hello';
text = 'hi';
text = 123;

함수 선언 시에도 인자의 타입을 지정하지 않으면 암묵적으로 any 타입을 가지게 됨

warining message

함수 add의 리턴값은 자동으로 number 타입으로 추론됨

+ 변수 result도 number 타입으로 추론의 추론

 function add(x: number, y: number) {
    return x + y;
  }
  const result = add(1, 2);

아래와 같이 타입을 명시하는 것이 좋은 방법

(추론이 되는 것 자체가 좋은 방법은 아닌듯,,,? 그럴일 없게 명시해주잣,,ㅎ)

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

 

 

 

Type Assertion

(변수명 as 타입명)

함수의 리턴값은 string 이지만 반환값이 any 타입이므로 length를 바로 사용할 수 없음

-> Type Assertion으로 타입을 캐스팅하여 사용

반환 값의 타입과 캐스팅하려는 타입이 일치하지 않을 때에는 undefined 출력

 

 

 

날씨가 따뜻해졌다. 되게되게 긴 겨울이었는데도 아쉬운건 어쩔 수가 업잔어-