Typescript 문법

윤강석·2022년 11월 13일
0
post-custom-banner

js 를 기반으로 한 언어로 js의 자유분방한 타입을 제어하기 위한 언어로 보인다.

기본타입

  • number, string
  • boolean
  • undefined, null, unknown
  • any : 어떤 타입이 올지 모를때 사용함
  • void : 함수가 어떤 값도 반환하지 않을 때 사용함
  • never : 함수가 에러를 발생시킬 때 사용함

사용 예시

const a: string = '작성 예시'
const b: Array<number> = [1, 2, 3]
function test1(...numbers: number[]) {
  numbers.map((e) => [console.log(e)])
}

async function fetchNumber(id: string): Promise<number> {
  return new Promise((resolve, reject) => {
    return resolve(100)
  })
}

위 처럼 내가 사용할 변수에 미리 어떤 타입이 들어올 것인지를 점지해주는 것이다.

Type aliases

사실 위의 기능보다도 타입스크립트에서 유용하게 쓰이는 것은 type alias 이다. 즉 내가 타입을 지정해서 사용할 수 있다.(클래스의 부모 상속과 유사하다.)

예시 1

type Direction = 'left' | 'right' | 'top' | 'down'
function go(direction: Direction): boolean {
  return direction == 'right'
}

위의 코드에서 direction 이라는 새로운 타입을 정의해주었다. 아래에 GO 함수에 들어갈 인자는 Direcition 타입을 따라야하고 주어진 4개의 문자열이 아닌 인자는 들어 갈 수 없다.

예시 2

type SuccesState = {
  result: 'success'
  response: {
    body: string
  }
}

type failedState = {
  result: 'failed'
  reason: string
}

type LoginResult = SuccesState | failedState

function loglogin(state: LoginResult) {
  if (state.result == 'success') {
    return {
      result: 'success',
      response: {
        body: 'good',
      },
    }
  } else {
    return {
      result: 'failed',
      reason: 'sad',
    }
  }
}

위의 문법을 응용해서 객체의 property 를 상속하여 error 가 나는 것을 막을 수 있다.(이런 부분에서 부모 클래스의 상속과 유사하다 볼 수 있다. 위와 같이 작성하는 타입을 OR 로 정의하는 방법을 discrimination 이라 한다.)

type Stu = {
  name: string
  score: number
}

type Work = {
  employId: number
  earning: number
}

function interWorkd(person: Stu & Work): void {
  console.log(person.name)
  console.log(person.earning)
}

interWorkd({ name: 'adba', score: 12, employId: 141, earning: 1000 })

반대로 and 로 정의하는 것은 Union이라 한다.

제네릭

함수 실행 상황(?)에 따른 타입 정의를 가능하게 해주는 문법이다.

예시

function findNull<generic>(a: generic | null): generic {
  if (a == null) {
    throw new Error('it is null')
  }
  return a
}

위처럼 함수내에서 generic 이란 타입을 함수 이름 옆에 붙여서 정의할 수 있고, 이 때 a 에 들어온 (변수로 받은 값)의 타입에 따라 generic이 정의되게 된다.

post-custom-banner

0개의 댓글