고급 타입 다루기

Eunji Park·2022년 7월 29일
0

TypeScript

목록 보기
9/18
post-thumbnail
post-custom-banner

Index 타입

interface Todo {
  id: number
  content: string
}

// 1) Indexed Access Type
type TodoId = Todo['id']


interface StrInterface {
  [index: number]: string,
  name: string
  age: number
  // [index: string]: string
}

const Person: StrInterface = {
  99: '구구',
  name: 'Mark',
  age: 99,
  // genderType: ''    //--> Error
}

조건부 타입


// SomeType extends OtherType ? TrueType : FalseType;

// --- Ex 1 --- //
interface Person {
  name: string
}

interface Me extends Person {
  age: number
}

type p1 = Me extends Person ? string : number;

// --- Ex 2 --- //
class Galaxy {
  type = 'AOS'
}

class IPhone{
  type = 'IOS'
}

type MyDevice<T> = T extends 'IPhone' ? IPhone : Galaxy;

const myPhone1: MyDevice<'Galaxy'>
const myPhone2: MyDevice<'IPhone'>
const myPhone3: MyDevice<'Xiaomi'>  // --> 'IPhone'이 아니기 때문에 Galaxy로 인식


// --- Ex 3 --- //
type IsNumbertype1 = 123 extends number ? true : false;
type IsNumbertype2 = number extends 123 ? true : false;

const isNumberType1: IsNumbertype1 = true;
const isNumberType2: IsNumbertype2 = false;

Mapped 타입

다양한 방법으로 새로운 타입을 만들어 낼 수 있다.
• 기존 타입에서 새로운 다른 타입에서 타입을 정의할 수 있다.
• 액세스 서명이나 조건부 타입과 함께 사용할 수 있다.

/* { T in V: T } */

// --- Ex 1 --- //
const newNum = [1, 2, 3].map((num) => num**2);
console.log(newNum);  // [1, 4, 9]


// --- Ex 2 --- //
type StringOrNumber = {
  [key: string]: string | number
}

const Mixedtype: StringOrNumber = {
  one: 'boolean'
}


// --- Ex 3 --- //
type Person = {
  name: string,
  age: number,
  gender: string
}

type Dict<T> = {
  [key: string]: T
}

const newPerson: Dict<Person> = {}
newPerson.me  // me는 Person으로 인식 ( 새로운 타입으로 넣었기 때문에 무조건 Person으로 잡히는 것이다. )


// --- Ex 4 --- //
type NewRecord = {
  [key in 'you' | 'we']: Person
}

function printNewPerson(newPerson: NewRecord) {
  // newPerson  // --> 여기서 newPerson은 'we' 와 'you'로 인식됨
  newPerson.we
  newPerson.you
  // newPerson.me  // --> me가 없기 때문에 Error
}

선언 병합

• TypeScript 에 존재하는 특이한 개념 중 하나로,
• 컴파일러가 동일한 이름으로 선언된 두 개 이상의 각기 다른 선언을 하나의 정의로 병합하는 것이다.
( 단, 원래의 기능이 모두 포함되어 여러 선언을 병합할 수 있다. )
• TypeScript 에서 선언은 네임스페이스, 타입 또는 값의 세 그룹 중 적어도 하나에 엔티티를 만든다.
• 네임스페이스는 점으로 구분된 표기법을 사용하여 액세스 하는 이름을 포함하는 영역을 생성


네임스페이스타입
네임스페이스XX
클래스XX
열거형XX
인터페이스X
타입 별칭X
변수X
함수X


// --- Ex 1 --- //
interface Cat {
  name: string
}

interface Dog {
  age: number
}

const animal: Cat = {
  name: 'cat',
  age: 99
}

// --- Ex 2 --- //
interface Person {
  name: string
  age: number
}

const Person = {
  name: 'Park',
  age: 24
}

export {
  Person
}

// --- Ex 3 --- //
class Car {
  static createCar(): Car {
    return {
      name: 'Car'
    }
  }
}

namespace Car {
  function createCar(): Car {
    return Car.createCar()
  }
}

interface Car {
  name: string
  brandType?: string
}

export {
  Car  // --> 여기서 Car는 class, namespace, interface 로 인식된다. 모든 타입이 merge(병합)된 것을 확인할 수 있다.
}

타입 추론


타입 단언


never


keyof


빈 값 관리


type aliases & interface

post-custom-banner

0개의 댓글