1. 타입스크립트란?

• 타입스크립트란 자바스크립트에 타입을 부여한 언어입니다. 자바스크립트의 확장된 언어라고 볼 수 있습니다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해주어야 합니다. 이 변환 과정을 우리는 컴파일(complile) 이라고 부릅니다.

2. why 타입스크립트?

• 에러 사전 방지

function sum( a:number , b:number ){
retrun a+b
}
sum(1,2) // 는 문제 없지만
sum('1','2') // str이라 error!! 타입 지정을 안했다면 12

• 개발 생산성 향상

3. 타입스크립트 기본 타입

타입스크립트의 기본 타입에는 크게 다음 12가지가 있습니다.

let str : string = 'Hi'

위와 같이 :를 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기(Type Annotation)라고 합니다.

• Boolean
• Number
• String
• Object
• Array

let arr : number[] = [1,2,3]
또는 제네릭을 사용하는 경우 // 제네릭은 추가로 정리할예정
let arr <number> = [1,2,3]

• Tuple

튜플은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미합니다.

  let arr:[string, number] = ['moon', 32]
  
만약 정의하지 않은 타입, 인덱스로 접근할 경우 오류가 납니다.
  
  arr[1].concat('!'); // Error, 'number' does not have 'concat'
  arr[5] = 'hello'; // Error, Property '5' does not exist on type '[string, number]'.

• Enum
  Enum은 열거형 데이터 타입을 지원합니다. 멤버라 불리는 명명된 값의 집합을 이루는 자료형으로 기억하기 어려운 숫자 대신 친숙한 이름으로 접근/사용하기 위해 활용할 수 있습니다.

enum Size {
    xsmall,   // 0
    small,    // 1
    medium = 101,
    large,    //102
    xlarge   //103
}

let box:string = Size[102]
let circle:number = Size.xsmall

console.log(box) // 'large' 
console.log(circle) // 0 

• Any
• Union
  id 매개 변수에 설정 가능한 타입 값을 number, string 모두 가능하게 하려면 파이프(|)를 사용하여 설정합니다. 이를 유니온(union) 타입이라고 부릅니다.

function ( id : string | number, name:string ) {
  return {id , name}
}

• Void
  Void 는 결과 값을 반환하지 않는 함수에 설정합니다. 반면 결과 값을 반환하는 함수의 경우 명시적으로 반환 값의 타입을 기술할 수 있습니다.

// 리턴 값 타입이 명시적으로 설정되지 않는 함수
function assignClass(name:string): void {
  document.documentElement.classList.add(name);
}

// 리턴 값 타입이 숫자인 함수
function factorial(n:number): number {
  if (n < 0) { return 0; }
  if (n === 1) { return 1; }
  return n * factorial(n-1);
}

// 리턴 값 타입이 문자인 경우
function repeat(text:string, count:number=1): string {
  let result:string = '';
  while(count--) { result += text; }
  return result;
}

• Null
• Undefined
• Never