타입스크립트 (Typescript)

• 타입스크립트는 자바스크립트와 달리 타입을 하나씩 지정해줘야 함.
• 이는 디버깅이나 코드 퀄리티에 훨씬 더 좋은 결과를 냄.

1. 함수 타입 정의

function formatDate(d: Date): string {
	let year = d.getFullYear();
	let month = d.getMonth() + 1;
	let day = d.getDate();

	return `${year}년 ${month}월 ${day}일`
}

const today = formatDate(new Date());

매개변수의 우측에 콜론(:)과 매개변수의 타입을 정의한다.
return 값의 타이비은 소괄호() 우측에 타입을 정의한다.
formatDate의 매개변수 d는 Date 객체 타입을 받아야 하고, return 값을 문자열이어야 한다는 뜻.

2. 매개변수 타입 정의

let formatDate = (d: Date | number, lang = "ko", delimiter?: string): string => {
	// 로직 생략
};

formatDate(new Date());
formatDate(20201028, "en");
formatDate(20201028, "en", "-");

d: Date | number -> 날짜 또는 숫자 값 들어가야 한다.
lang = "ko" -> 무조건 들어가야 하지만 인자를 넣지않는다면 "ko"라는 문자열이 기본값으로 들어간다.
delimiter?: string -> 안들어가도 된다, 하지만 들어간다면 문자열로 와야 한다.

두번째 매개변수인 lang의 경우 인자를 전달하지 않으면 "ko"라는 문자열 값이 할당되도록 한다.
delimiter는 물음표를 사용하여 선택적으로 인자를 전달하도록 한다.

rest 파라미터

• 매개변수의 인자가 몇개가 들어오는지 모를 때 사용

const myfunc = (...rest: (number|boolean)[]) => {
	console.log({ ...rest });
};

myfunc(1, 10, 3, true, false, 2);

• (...rest: (number|boolean)[])
  -> [] 배열 형태로 들어와야 한다. 그런데 배열 안에 오는 요소들은
  number|boolean 숫자 아니면 불리언 값으로 들어와야 한다.

• rest 파라미터는 number 이거나 boolean이 들어있는 배열형태로 타입을 지정한다.

• Union 타입 | 알아보기

destructuring 파라미터

const formatDate = ({
	// destructuring 파라미터
  d,
  lang = 'ko',
  delimiter,
}: {
  // 타입 정의 
  d: Date | number;
  lang?: 'ko' | 'en' | 'jp';
  delimiter?: string;
}) => {
  // 로직생략
};

• 객체에 들어가있는 타입을 정의
• 하지만, 이렇게 하면 가독성이 떨어지므로 type에 대한 별칭을 지정하여 사용하면 좋을 것 같다.

3. Any

any는 어떤 타입도 지정할 수 있다. 자바스크립트로 컴파일된 코드를 보면 아무 타입도 지정하지 않은 원래의 자바스크립트 코드와 똑같다. 즉, any 타입을 사용하면 타입스크립트를 쓸 이유가 없는 것과 다름 없다.

가끔 개발은 바쁜데 어떤 타입을 지정해야 할지 몰라서 any를 쓰는 경우도 있는데, 웬만하면(무조건) 쓰지 않도록 노력해야한다.

let value: any;

// 타입 에러 없음
value = 'kim';
value = 1234;
value = [1,2,3,4];