[12주차] 1. Typescript 복습(3)

Typescript 복습

고급 타입

Intersection Types

• 여러 타입을 하나의 타입으로 합쳐진 타입
• &로 표현 가능
• 특정한 타입들을 합쳐줘야 하는 타입이 필요할 때 사용
• 새로 만들지 않고 기존 타입들을 활용해서 사용하고 싶을 때 사용

Union Types

• | 로 표현
• 이타입일 수도 있고 저 타입일 수도 있을 때 사용
• 단 타입별로 묶어주고 싶을 땐 타입 가드(typeof 활용한 조건문으로)로 반환 값을 달리 해줘야 함
• Primitive type이 아닌 인터페이스 타입 등을 가지고도 활용 가능
  • 타입 가드를 member로 확인(<인터페이스타입>변수.do)
  • 사용자 정의 타입가드 만들고(함수로) 조건문의 조건으로 넣고 반환 값으로 (<인터페이스타입>변수).do
    function 타입가드함수(파라미터 : 인터페이스타입 | 인터페이스타입) : 파라미터 is 인터페이스타입 {
    return(<인터페이스타입>파라미터).do !== undefined!; // 인터페이스타입을 체크하는 코드
    }

Type Alias 타입 별칭

• 인터페이스와 비슷하지만 직접 작성한 타입에 이름을 붙일 수 있다
• type 키워드를 통해 작성
• intersection, union 타입 쓸 수 있음
• 제네릭 사용 가능
• 이름만 부여하는 것이 아닌 인터페이스처럼 속성에 특정 타입을 정의할 수 있다.
• 클래스에서 implements로 인터페이스처럼 사용 가능
• 정의된 타입을 가지고 새로운 타입을 만든다던가 문자형 리터럴 타입을 가지고 타입을 만든다는 가 등에 많은 부분에서 사용 됨

index type

• 속성이름이 정의되어 있지 않고 동적을 처리해야 할 경우 사용
• key 값은 string 혹은 number만 들어갈 수 있다.
• 어떠한 key를 넣을지 모를 땐 [key : string 혹은 number] : 타입;
• keyof 인터페이스이름 은 해당 인터페이스의 key들의 이름이 유니온 형태를 반환한다.

Parcel과 모듈

• 노드 패키지 모듈 사용할수 있게 package.json 파일 생성 yarn init -y
• 노드와 타입스크립트 사용하기 위해 parcel bundler 설치 yarn add parcel-bundler -D
• package.json에 해당 코드 작성
  "scripts" : {
  "dev" : "parcel index.html"
  }
• yarn run dev
• export의 경우 이름을 작성해야 하지만 export default를 사용하면 이름 작성하지 않아도 됨
  • export로 내보낸 컴포넌트 가져올 경우 import {컴포넌트이름} from ‘경로’
  • export default로 내보낸 컴포넌트 가져올 경우
    import default로 내보낸 것 여기서이름 지정 가능 from ‘경로’
  • type도 export 가능

Tips

• typeof 변수는 변수의 타입을 나타낸다.
• readonly : 덮어쓰이지 않게 하는 것, 읽기전용