타입스크립트

김가영·2021년 4월 6일
1

JavaScript

목록 보기
4/9

공식문서

타입스크립트는 JS를 기반으로 하여, Type system이 추가된 형태이다.
기존 JS 는 타입에 굉장히 너그럽다. String 으로 선언한 변수에 number나 obejct 를 넣어도 전혀 상관하지 않는다. 타입스크립트는 이러한 타입을 엄격화시켜 JS에서 발생할 수 있는 예상치못한 버그들을 방지해준다.

자동 타입 설정

타입스크립트는 변수를 만들고 특정 값을 할당하면 자동으로 유형을 설정해준다.

interface

object

이용하기

	const user: User = {
    	name: 'Hayes',
        id: 0,
    }

→ 인터페이스와 일치하지 않는 개체를 만들면 경고가 나온다.

클래스

Primitive types

boolean, bigint, null, number, string, symbol, object, undefined → JS primitive types

타입스크립트는 JS의 primitive types 에 추가적으로 몇 개를 더 지원한다.

any : allow anything


어떤 객체가 올 지 모를 때 any 를 쓴다. 위 예시에서 jsonParsermyAccount 는 json 객체가 어떤 type 이 올지 모르므로 any로 설정돼있다.

unknown : ensure someone using this type declares what the type is


같은 json 을 unknown 으로 설정할 수도 있다. 이 경우 myOtherAccount 는 type이 정의되기 전에는 사용될 수 없다.

type User = { name: string };
const myUserAccount = jsonParserUnknown(`{ "name": "Samuel" }`) as User;
myUserAccount.name;

never : 이 타입은 절대 일어나면 안된다는 것을 의미한다.


이런식으로.
exhaustive switch (모든 가능성을 다루고 있는) 나 error message 를 만드는 데에 이용된다.

enum Flower {
  Rose,
  Rhododendron,
  Violet,
  Daisy,
}

const flowerLatinName = (flower: Flower) => {
  switch (flower) {
    case Flower.Rose:
      return "Rosa rubiginosa";
    case Flower.Rhododendron:
      return "Rhododendron ferrugineum";
    case Flower.Violet:
      return "Viola reichenbachiana";
    case Flower.Daisy:
      return "Bellis perennis";

    default:
      const _exhaustiveCheck: never = flower;
      return _exhaustiveCheck;
  }
};

Flower 에 Tulip 이나 다른 꽃을 추가하면

이렇듯 에러가 뜨는 것을 볼 수 있다. → exhaustive switch

void

: 함수가 undefined 를 return 하거나 아무것도 리턴하지 않을 때.

Composing Type

타입스크립트에서는 Primitive Type 들을 조합하여 Composing Type을 만들 수 있다.
두 가지 인기 있는 방법은 : Union and Generic

Unions

타입의 후보들을 지정할 수 있다.
type MyBool = true | false;
true / false 의 값을 가지게 하려면 위와같이 정의한다. 이는 자동으로 boolean 으로 정의되는데, 이게 바로 property of Structual Type System. 자세한 설명은 아래에

주로 Union 은 string이나 number 들에서 많이 이용된다.

새로운 타입이 형성된다!

다른 타입들의 union 도 가능하다. 함수가 다양한 타입을 이용할 수 있게도 만든다.

이 때 type 을 구분하기 위해서는 typeof 를 이용한다.

Generics

어떤 variable을 가질 지 type에게 알려주는 역할?
가장 대표적인 예시는 Array 이다.

Structural Type System

만약 두 개의 object가 비슷한 모양을 가질 때, 그들을 같은 type으로 간주하는 system

위 예시에서 const point 는 Point type으로 정의되지 않았지만 같은 모양을 가지기에 타입스크립트는 같은 타입으로 판단했다.


완전히 동일하지 않더라도 Point 를 부분집합으로 가지면 같은 타입으로 판별한다.

profile
개발블로그

0개의 댓글