[Typescript] 함수 & 리터럴 타입

함수

자바스크립트 형태의 함수에 인자에 대한 타입과 반환하는 값의 타입을 붙여주면 된다.

인자(넘기는 값 == 파라미터)

리액트에서 이벤트를 지정할 때 아래와 같이 사용함.

function updateTodo(event: ChangeEvent<HTMLInputElement>) {
    setTodo(event.target.value);
}

 

반환하는 값(리턴 값)

반환되는 값에 대한 타입을 지정함.

function updateTodo(event: ChangeEvent<HTMLInputElement>):void {
    setTodo(event.target.value);
    console.log(e.target.value);
}

선택적 파라미터

파라미터를 옵셔널하게 지정할 수 있음

function updateTodo(event: ChangeEvent<HTMLInputElement>, todoId?: string):void {
    setTodo(event.target.value);
    console.log(e.target.value);
}

 

리터럴 타입

구체적인 값으로 타입을 지정하고 싶을 때 사용한다.

문자열 리터럴 타입

유니언 타입, 타입가드, 타입별칭과 잘 결합됨. enum 변수를 사용해 문자열을 가질 값들의 타입을 정할 수 있다.

interface goToPlace {
	
    'HOME': string,
    'COMPANY': string,
    'MARKET': string
    
 }

 

숫자형 리터럴 타입

문자열 리터럴과 같은 역할을 수행하나 그 타입이 숫자 형태이다.

function rollDice(): 1 | 2 | 3 | 4 | 5 | 6 {
  return (Math.floor(Math.random() * 6) + 1) as 1 | 2 | 3 | 4 | 5 | 6;
}

const result = rollDice();

 

주로 고정값을 설명할 때 쓰인다.

/** loc/lat 좌표에 지도를 생성합니다. */
declare function setupMap(config: MapConfig): void;
// ---생략---
interface MapConfig {
  lng: number;
  lat: number;
  tileSize: 8 | 16 | 32;
}

setupMap({ lng: -73.935242, lat: 40.73061, tileSize: 16 });