TypeScript - 기본타입 정리

이종호·2021년 7월 18일
0

TypeScript

목록 보기
1/7
post-thumbnail

목차

  • 기본 타입
  • 배열
  • Type Aliases: 새로운 타입을 정의
    • String Literal Types: 정확한 문자열을 타입으로 지정
    • Union Types: OR
    • discriminated union
    • Intersection Types: &
  • enum
  • Type Inference: 타입 추론
  • Type Assertions: 타입 강제

기본 타입

  1. number

  2. string

  3. boolean

  4. undefined
    : 보통 let age: number | undefined;와 같이 쓰이고 단독으로 쓰이진 않는다.

  5. null
    : 거의 안쓰인다.

  6. unknown
    : any처럼 모든 타입을 받을 수 있지만 의미적으로 잘 모를때 씀

  7. any
    : 무엇이든 상관 없다. 거의 쓰이지 않(아야 하)고 외부 api나 다른 플랫폼에서 값을 받아와야 할 경우 쓰인다(고 엘리님이 말했지만 나는 종종 쓰게되는 것 같다..).

  8. void: return이 undefined인 경우

  9. never: throw new Error()while(true)처럼 함수가 리턴값이 없을 경우 사용

배열

  const fruits: string[] = ['토마토', '바나나'];
  const scores: Array<string> = ['토마토', '바나나'];
  • 둘 다 동일한 형태

function printArray(fruits: readonly string[]){}
  • readonly를 사용하고 싶으면 string[]으로 정의해야지 사용가능

Type Aliases: 새로운 타입을 정의

  type Text = string;
  const name: Text = 'jongho';
  const address: Text = 'korea';
  
  type Num = number;

  type Student = {
    name: string;
    age: number;
  }
  const student: Student = {
    name: 'jongho',
    age: 27,
  }

String Literal Types: 정확한 문자열을 타입으로 지정

  type Name = 'jongho';
  let jonghoName: Name;

  jonghoName = 'jongho';

  type Bool = true; // true값만 가질 수 있음

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;
  • 다른 타입에 대해서도 마찬이다

discriminated union

  • union 타입에서 같은 속성값을 가지게 하여, 구분짓기 편하게 만든 union 형식
type SuccessState = {
  result: 'success'; // discriminated union
  response: {
    body: string;
  }
}
type FailState = {
  result: 'fail'; // discriminated union
  reason: string;
}
type LoginState = SuccessState | FailState;

function printLoginState(state: LoginState) {
  if(state.result === 'success') {
    console.log(state.response.body);
  } else {
    console.log(state.reason)
  }
}

Intersection Types: &

  • union과 반대되는 개념으로 두개의 타입 모두의 형식을 가져야 한다.
  • interface에서 상속(extends)처럼 사용할 수 있다.
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: 'jongho',
  score: 100,
  employeeId: 12345,
  work: () => {}
})

enum

  • 다른 언어에서 사용되는 형식인데 이것보다 union을 쓰는 것이 더 좋다고 한다.
  • 왜냐하면 한번 값을 할당한 뒤에 같은 타입의 다른 값을 할당하는 것이 가능하기 때문
  enum Days {
    Monday = 1,
    Tuesday,
    Wednesday,
    Thursday,
    Friday,
    Saturday,
    Sunday
  }

  console.log(Days.Monday); // 1
  let day = Days.Sunday; // 7
  day = 10; // 10
  console.log(day); // 10

Type Inference: 타입 추론

  let text = 'hello'; // string으로 추론
  function print(message = 'hello'/* string */ ) { // return이 void로 추론
    console.log(message);
  }
  print('hello')
  • 아주 기본타입이거나 함수 return이 undifined경우 추론을 사용할 수 있지만 회사규정에 따름

Type Assertions: 타입 강제

  function jsStrFunc(): any {
    return 2
  }

  const result = jsStrFunc();

  console.log((result as string).length); // result가 string 타입이라고 강제해서 에러발생
  console.log((<string>result).length); // result가 string 타입이라고 강제해서 에러발생
  • 개발자의 의도에 의해 타입을 강제하여 ts에게 알려줄 수 있다.
  • (result as string)
  • (<string>result) 동일
  • React에선 <>는 컴포넌트를 말하기 때문에, as문법을 주로 사용한다고 한다.
profile
코딩은 해봐야 아는 것

0개의 댓글