타입스크립트 베이직 - 3: any, 함수

타입스크립트의 특별한 타입 any

	const product = {
    	id: "c001",
      	name: "유진킴",
      	price: 129000,
      	sizes: ["M", "L", "XL"],
    };

	console.log(product.reviews[2]); // reviews없는데? 에러!

	const product: any = { // any타입 설정
    	id: "c001",
      	name: "유진킴",
      	price: 129000,
      	sizes: ["M", "L", "XL"],
    };

	console.log(product.reviews[2]); // 오류가 나지 않음.

JSON.parse(여러 값의 타입이 뒤죽박죽 혼재된 객체)를 하는 경우 어쩔 수 없이 any를 쓰는 경우가 있을 수 있다. 그러나 되도록 프로퍼티별 타입을 정해주는 것이 좋다.

방법 1 (추천)

const parsedProduct: {
	name: string;
  	price: number;
} = JSON.parse(
	"{ "name": "유쥥킴", "price": 100 }"
);

방법 2 (추천)

const parsedProduct = JSON.parse(
	"{ "name": "유쥥킴", "price": 100 }"
) as {
	name: string;
  	price: number;
};

방법 3 (잘 쓰지 않음)

const parsedProduct: <{
	name: string;
  	price: number;
}>JSON.parse(
	"{ "name": "유쥥킴", "price": 100 }"
);

함수에 타입 정의하기

일단 예제 간단히 쭉 둘러보기.

const stock: { [id: string]: number } = {
  c001: 3,
  c002: 1,
};
const cart: string[] = [];

function addToCart(id, quantity) {
  if (stock[id] < quantity) {
    return false; // 재고가 없으면 false 리턴
  }

  stock[id] -= quantity; // 재고가 있으면 재고개수 줄이고 카트에 그 수만큼 추가
  for (let i = 0; i < quantity; i++) {
    cart.push(id);
  }

  return true;
}

console.log(stock, cart);
const result1 = addToCart('c001', 1);
console.log(`결과1: ${result1}`);
console.log(stock, cart);
const result2 = addToCart('c002', 2);
console.log(`결과2: ${result2}`);
console.log(stock, cart);

현재 프로젝트의 tsconfig파일에서 strict체킹 옵션이 true이면, Any선언이 방지됌.

함수의 타입을 선언하지 않으면 암묵적으로 any를 선언하게 되는 것이기 때문에 타입오류가 나게 된다.

파라미터타입지정

function addToCart(id: string, quantity: number) { ...

리턴타입지정

• 명시적 지정

function addToCart(id: string, quantity: number): boolean { ...

• 생략하고 리턴값으로 추론하게 하기.

function addToCart(id: string, quantity: number) { ...

파라미터 값이 없을 때도 있다면? ~> 옵셔널처리

function addToCart(id: string, quantity?: number): boolean { ...

파라미터 값이 없을 때를 대비한 기본값 설정은 어떻게?

function addToCart(id: string, quantity: number = 1): boolean { ...
(quantity가 undefined이면 1로 대신 써~)

객체 안에 함수를 넣는 방법

const exampleObject: {
	name: string;
  	price: number;
  	addToCart: (id: string, quantity: number) => boolean;
} = {
 	name: "유지니",
  	price: 200,
  	addToCart,
};

rest 파라미터를 쓰는 경우에는 어떻게?

rest 파라미터는 배열타입으로 지정.

function addManyToCart(...ids: string[]) {
  // ...
}

객체에 담아야하는데 아무것도 return하지 않는 function일 때는 뭐라고 쓸까? void!

const exampleObject: {
	name: string;
  	price: number;
  	addToCart: (id: string, quantity: number) => boolean;
  	addManyToCart: (...ids: string[]) => void;
} = {
 	name: "유지니",
  	price: 200,
  	addToCart,
  	addManyToCart,
};

void는 비어있는 뜻이며, 아무것도 리턴하지 않는 함수를 void함수라고 부른다고 한다!