TypeScript?

TypeScript is JavaScript with syntax for types.

• 자바스크립트에 타입을 부여한다.
• 자바스크립트의 확장된 언어

JavaScript VS TypeScript

JavaScript

• 동적 타입 언어
• 어떤 값이 들어오든 상관없다.
• 파라미터의 타입이 정해져있지 않아서 의도하지 않은 타입의 값이 들어올 수 있다.

var a = 1;
let b = 'hello';
const c = {name:'kim'}

b = 100; //이렇게 다른 타입의 값으로 재할당이 가능하다.

function sumNumber(first,second){
	return first+second;
}

console.log(sumNumber(1,2)) //3
console.log(sumNumber('1',2)) //12 (의도하지 않은 결과)

TypeScript

• 컴파일 언어
• 자바스크립트의 타입 관련 에러 등을 사전에 예방할 수 있다!
• 타입을 매번 지정해주어야 한다.
• 코드 퀄리티가 높아진다. (타입을 지정함으로써 직관적으로 코드를 이해할 수 있다)

함수

함수 정의하기

function()

function sayMyAge(age: number): string {
	return `당신의 나이는 ${age}세 입니다.`
}

const myAge = sayMyAge(25);
console.log(myAge); // 당신의 나이는 25세 입니다. 

• function 함수명(파라미터: type): return타입
  → 파라미터 age의 타입은 number, return값의 타입은 string이다.

arrow function

const sayMyAge = (age: number): string => {
	return `당신의 나이는 ${age}세 입니다.`
}

const myAge = sayMyAge(30);
console.log(myAge); // 당신의 나이는 30세 입니다. 

파라미터 타입 지정하기

복잡한 파라미터 타입 지정

const setMyData = (id: string | number, country = 'korea', age?: number) => {로직~~~}

setMyData('123')
setMyData('myId', 'America');
setMyData('yourId', 'America', 25);

• id: string | number : 파라미터 id는 string 또는 number타입만 올 수 있다.
• country = 'korea' : 파라미터 country는 값이 없다면 'korea'로 기본값이 할당된다.
• age?: number : 파라미터 age는 타입은 number지만, 있어도 되고 없어도 되는 파라미터이다.

rest 파라미터

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

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

• rest파라미터 : number 또는 boolean값이 들어간 배열로 타입 지정

destructuring 파라미터

const formatDate = ({d,lang = 'ko',delimiter,}: {
  d: Date | number;
  lang?: 'ko' | 'en' | 'jp';
  delimiter?: string;
}) => {
  console.log('hello');
};

• 객체가 들어간 타입을 정의한다.
• {d,lang = 'ko',delimiter,} 이 객체의 타입을 아래와 같이 정의했다.
  • {d: Date | number; lang?: 'ko' | 'en' | 'jp'; delimiter?: string; }