타입스크립트를 사용하는 이유

❗️ TypeScript?

요즘 프론트엔드 채용공고를 보면 자격요건에 TypeScript가 적혀있는 것을 볼 수 있는데,

사용해본 적도 없고 어떤 장점이 있는지 궁금해졌다.

 

TypeScript = JavaScript + Type

즉, 자바스크립트에 타입을 더한 언어가 타입스크립트이다.

 

🤔 자바스크립트애서 5-'3'의 결과는 ?

결과는 2이다.

숫자에서 문자열을 뺐는데 숫자가 나올 뿐만 아니라, 어떠한 에러도 출력하지 않는다.

 

하지만 TypeScript에서 위의 코드를 실행시킨다면 오류가 발생한다.

TypeScript도 JS 기반 언어이지만 왜 다를까?

TypeScript에 대해 더 알아보자 !

---

❗️ JavaScript vs TypeScript

가장 큰 차이점은 당연히 타입이고 이 타입이 결정되는 시점이 다르다.

 

- 타입 결정 시점

JavaScript는 동적 타입 언어로, 변수의 타입이 런타임 중에 결정된다.

TypeScript는 정적 타입 언어로, 변수의 타입을 선언하여 컴파일 시 타입을 확인한다.

 

- 컴파일 여부

JavaScript는 컴파일이 필요없는 인터프리터 언어이기 때문에 런타임 중에 오류가 발견된다.

TypeScript는 컴파일 과정을 거쳐 JavaScript 파일로 변환되기 때문에 컴파일 중에 오류가 발견된다.

---

❗️ TypeScript 실행 과정

TypeScript 파일은 브라우저에서 읽지 못하기 때문에

TypeScript 파일을 JavaScript 파일로 컴파일 한 다음에, JavaScript 파일을 실행시킨다.

 

TypeScript 컴파일러를 설치하면 다음과 같은 방법으로 코드가 실행된다.

 

1. TypeScript 컴파일러에 타입스크립트 코드를 입력
2. TypeScript 코드를 추상 구문 트리(AST)로 변환
3. 타입 검사기가 TypeScript 코드의 타입들이 잘 작성됐는지 안정성 검사 진행
4. TypeScript AST가 JavaScript 코드로 변환
5. 변환된 JavaScript 코드가 다시 JavaScript AST로 변환
6. JavaScript AST가 바이트코드로 변환된 후, 프로그램 실행됨

---

❗️왜 TypeScript를 써야 할까?

- 에러 예방

타입 스크립트를 사용할 때, 알맞지 않은 타입을 지정하거나 타입을 지정하지 않으면 오류가 뜬다.

사전에 오류를 발견할 수 있게 되는 것이다.

 

- 자바스크립트 +알파

자바스크립트와 100% 호환되고, 이 외에 추가적인 기능(ex 인터페이스)을 제공한다.

자바스크립트의 단점을 줄여주면서 추가적인 기능이 생긴 셈이다.

 

🤔 TypeScript의 단점은?

• 컴파일 옵션이나 모듈 사용 설정 등 초기에 설정해줘야 할 것이 많다. (tsconfig.json 파일)
• 타입스크립트를 사용하기 위해서는 타입스크립트 문법을 배워야 한다.
• 자바스크립트보다 유연성이 떨어지기 때문에, 때로는 더 많은 코드를 작성해야 하고 이는 가독성을 저하시킬 수 있다.

 

---

❗️TypeScript의 Type

타입스크립트에서 타입이란 도대체 무엇일까?

변수나 함수를 정의할 때 사용하는 기본 타입들은 크게 12가지이다.

• string : 문자열
• number : 숫자
• boolean : true/false
• object : 객체. 타입스크립트에서는 주로 인터페이스나 타입 별칭을 씀.
• arrary : 배열
  타입이 배열인 경우 number[] 또는 Array<number>와 같이 표시함.
• tuple : 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열
  let arr : [string, number] = ["hi" , 10]
• enum : 특정 값들의 집합
• null
• undefined
• any : 모든 타입을 사용할 수 있음을 의미함
• void :  반환 값이 없는 함수의 반환 타입
• never : 절대 발생하지 않는 값을 의미
  ex) 에러 핸들링 시, 함수의 끝에 도달하지 않을 때 사용

 

타입을 지정하는 방법은 변수 이름 뒤에 콜론(:)과 타입을 정의하는 타입 표기(Type Annotation)를 사용하면 된다.

let str : string

이제 str은 string이 아닌 다른 Type은 가질 수 없다.

 

또한 객체에도 Type을 설정해줄 수 있다.

type objectSetting = {
	[key : string] : string
}

key와 value 자리에 string만 들어올 수 있게 되었다.

키 값으로 어떤 값이 들어올 지 모를 때 사용하는 방식이다.

 

또한 타입 별칭(type alias)을 지정해줄 수 있다.

 

type Car : {
	model: string, brand: string, year: number
}	

const car : Car = {
	model: 'K9', brand:'KIA', year:2022
    }

type이 길거나 복잡한 경우 또는 객체나 함수에 타입을 정의하는 경우에 유용하게 사용할 수 있다.