Typescript 문법

Typescript 데이터 타입

타입스크립트로 변수나 함수와 같은 자바스크립트 코드에 타입을 정의할 수 있다

대표적인 데이터 타입들을 알아보자

• String : 자바스크립트 변수의 타입이 문자열인 경우 하기 코드와 같이 선언한다

  let name: string = "bts"; // 문자열의 값을 갖는다
  

• Number: 자바스크립트 변수의 타입이 숫자인 경우 하기 코드와 같이 선언한다

  let count: number = 5; // 정수중 값을 갖는다
  

• Boolean: 자바스크립트 변수의 타입이 진위값인 경우 하기 코드와 같이 선언한다

  let isLoggedIn: boolean = true; // true, false 중 값을 갖는다
  

• Array: 자바스크립트 변수의 타입이 배열인 경우 하기 코드와 같이 선언한다

  let arr: number[] = [1,2,3];
  

• Tuple: 자바스크립트 변수의 타입이 배열이며 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열인 경우 하기 코드와 같이 선언한다

  let arr: [string, number] = ['bts', 14];
  

• Any: 기존에 자바스크립트로 구현되어 있는 웹 서비스 코드에 타입스크립트를 점진적으로 적용할 때 활용하면 좋은 타입, 단어 의미 그대로 모든 타입에 대해서 허용한다

  let str: any = 'hi';
  let num: any = 10;
  let arr: any = ['a', 2, true];
  

• Void: 반환 값이 없는 함수의 반환 타입, 아래와 같이 return이 없거나 return이 있더라도 반환하는 값이 없으면 함수의 반환 타입을 void로 지정한다

  function printSomething(): void {
    console.log('sth');
  }
    
  function returnNothing(): void {
    return;
  }
  

Typescript 함수

[함수 기본타입] 기존의 자바스크립트에 타입만 추가되는 형태로 아래와 같다

// a와 b라는 파라미터를 받으며 해당 파라미터는 number 데이터 타입만 들어올 수 있다
// 리턴값 역시 타입이 number로 리턴하는 값은 number 데이터 타입이어야한다
function sum(a: number, b: number): number {
  return a + b;
}

타입스크립트는 함수의 파라미터를 모두 필수 값으로 간주한다 따라서 기본적으로 함수의 매개변수를 설정하면 undefined, null 타입이라도 파라미터로 넘겨야하며 컴파일러에서 정의된 매개변수 값이 넘어 왔는지 확인한다

매개변수는 존재하지만 안넘기고 싶은 파라미터라면 아래와 같이 ? 키워드를 사용할 수 있다

function sum(a: number, b?: number): number {
  return a + b;
}
sum(10, 20); // 30
sum(10, 20, 30); // error, too many parameters
sum(10); // 타입 에러 없음

[ES6 Rest문법이 적용된 함수]

Rest문법을 모른다면 👉🏻ES6 공식DOC 에서 자바스크립트의 Rest문법을 참고하자

  function sum(a: number, ...nums: number[]): number {
    const totalOfNums = 0;
    for (let key in nums) {
      totalOfNums += nums[key];
    }
    return a + totalOfNums;
  }