TIL58.TypeScript

TypeScript의 목적, 사용법에 대해서 알아보자.

타입스크립트란?

자바스크립트에 타입을 부여한 언어이다. 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 변환해주어야한다.

Why 타입스크립트?

• 에러의 사전 방지

//js코드
function sum(a, b) {
  return a + b;
}
sum('10', '20') //1020

//ts코드
function sum(a: number, b: number) {
  return a + b;
}
let total = sum('10', '20') //Error: '10'은 number에 할당될 수 없습니다.

• 코드의 자동완성과 가이드

개발 툴의 기능을 최대로 활용할 수 있다는 장점이 있다.
변수 total에 대한 타입이 지정되어 있기때문에 vscode 에디터에서 해당 타입에 대한 API를 미리 보기로 띄어줄 수 있고, API를 일일히 치지 않고 빠르고 정확하게 작성할 수 있다.

라이브러리설치와 TSC

브라우저에서 바로 실행시키면 ts파일을 인식하지못하기때문에 js파일로 컴파일하는 과정이 필요하다.

1. 변환하려는 파일이 있는 폴더를 우클릭 후, 터미널을 열어준다.
2. npm i typescript -g(에러가 뜨면, sudo를 앞에 추가해준다.)
3. tsc index.ts(tsc명령어는 타입스크립트를 자바스크립트로 변환할 때 사용하는 명령어이다. )
   *현재 폴더에 타입스크립트 설정 파일이 없다면 프로젝트 폴더 내에서 상위 폴더의 경로를 검색해 나간다.

변수와 함수 타입 정의하는 방법

1. 기본타입

• 문자열, 숫자, 배열

//TS 문자
let str: string = 'hello';

// TS 숫자 
let num: number = 10;

// TS 배열
let arr: Array<number> = [1,2,3];
let fruit: Array<string> = ['banana', 'orange'];
// or
let items: number[] = [1,2,3];

• 튜플, 객체, boolean값

Tuple은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 말한다.

// TS 토플
let info: [string, number] = ['mong', 13];

// TS 객체
let person: object = { name: "Jessy", age: 30 };
let person2: { name: string; age: number } = {
  name: "Merry",
  age: 20,
};

//TS Boolean값
let show: boolean = true;

• any, void, enum

any는 단어 의미 그대로 모든 타입에 대해서 허용한다.
void는 변수에는 undefined와 null만 할당하고, 값을 반환하지 않는 함수의 반환 유형으로 사용된다.
-enum은 특정 값(상수)들의 집합을 의미한다.

// TS any
let list: any[] = [1, true, "sky"];
list[1] = 100;

// TS void
function deleteTodo(index: number):void {
  todoItems.splice(index, 1);
}

// TS enum
enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers.Capt;
//인덱스로 접근
enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers[0];

2.함수타입

// 함수의 파라미터에 타입을 정의하는 방식
function add(a: number, b: number) {
  return a + b;
}

add(1, 2);

// 함수의 반환 값에 타입을 정의하는 방식
function sum(): number {
  return 10;
}

//함수에 타입을 정의하는 방식
function add2(a: number, b: number): number {
  return a + b;
}

• never

어떤 일이 발생하지 않을 것이라고 확신할 때 사용한다. 예를들어, 함수의 끝에 절대 도달하지 않거나, 항상 예외를 발생시키는 함수에 사용한다.

function throwError(errorMsg: string): never { 
            throw new Error(errorMsg); 
} 

function keepProcessing(): never { 
            while (true) { 
         console.log('I always does something and never ends.')
     }
}

• optional parameters

인자를 경우에 따라 선택적으로 사용하고 싶을 때, ?를 이용해 표현한다.

//함수의 옵셔널 파라미터
function log(a: string, b?: string) {}

log("hello world");
log("hello ts", "hi");