[TypeScript] TypeScript 사용 이유

수민🐣·2023년 3월 18일

typescript

TypeScript

목록 보기

2/16

사용 이유

강타입(정적타입) <-> 약타입(동적타입)
모든 변수를 선언하는 시점부터 해당 변수의 타입을 반드시 지정해야하며, 지정한 타입을 벗어나는 값은 해당 변수에 할당할 수 없도록 만들어짐

➡ 안전성, 표현력

자바스크립트로 컴파일
컴파일 : A언어 -> B언어로 변환 즉, 번역기
특정한 언어를 다른 언어로 변환하는 것
전부 다 변역한 다음에 결과물 받음

인터프리터 : 한문장 씩 실행하면서 변환
속도가 느리다는 단점

➡ 범용성 - 자바스크립트를 사용할 수 있는 곳에는 어디든지 활용할 수 있다는 점

① 안전성

코드를 작성하는 과정에서 엄격한 규직을 지켜야 한다 = 제약 발생

제약이 많으면 많을 수록 개발자가 실수하거나, 권장되지 않은 방식으로 코드를 작성할 확률을 줄일 수 있어 안정성을 높일 수 있다.

에러를 발생시키는 시점

let age: number = 1;
age = "2"; // error

유저가 애플리케이션을 실행하고 있는 과정 (실제 코드가 돌아가고 있는)에서 타입 에러가 발생해서 애플리케이션이 예기치 않게 종료된다면 안전성을 갖추지 못한 코드이다.

타입스크립트는 컴파일 언어이기에 실행전에 자바스크립트로 컴파일을 시켜줘야 하며, 실제로 애플리케이션에서 실행되는 코드는 자바스크립트로 변환된 코드

타입스크립트는 컴파일 시점에 타입에러가 발견된 경우 컴파일을 중단하며 타입에러가 발생했다고 알려준다.

➡ 컴파일 단계에서 개발자가 확인하고 수정할 수 있게 되며, 최종적으로 컴파일된 자바스크립트 코드에는 더이상 타입 문제가 없는 것을 확신할 수 있는 것

② 표현력

보통 특정 변수의 타입을 제한하는 용도로 사용하는데 하지만, 다양한 표현을 할 수 있다는 점

추상 - What 무엇을 한다
구체 - How 어떻게 동작을 수행한다

function sum(인자: 인자의 타입):함수의 리턴 타임 {
}

function sum(x: number, y: number): number {
  return x + y;
}

function sum(x: number, y: number): number 만 봐도 알 수 있음

➡ 표현력 UP

interface Storage {
	setItem:(key:string, item:string) => undefined;
	getItem:(key:string) => string;
}

const localStorage:Storage = {
	// setItem, getItem 동작을 할 수 있어야 해
}
const sessionStorage:Storage = {
	// setItem, getItem 동작을 할 수 있어야 해
}

class LocalStorage implements Storage {}
class SessionStorage implements Storage {}

function saveToken(storage:Storage, token:string) {
	storage.setItem("access_token", token);
}

saveToken(localStorage, "JWT");
saveToken(sessionStorage, "JWT");