typescript

TypeScript는 자바스크립트에 타입 기능을 추가한 언어로,
대규모 프로젝트에서 코드 안정성과 유지보수성을 높이기 위해 개발된 언어입니다.

타입스크립트가 만들어진 이유

자바스크립트는 매우 유연한 언어지만 다음과 같은 문제가 있습니다.

• 실행 전까지 오류를 알기 어렵다
• 타입 변경이 자유로워 예기치 못한 버그 발생 가능성 높음
  TypeScript는 이러한 단점을 해결하기 위해
  정적 타입 검사 기능을 도입하여 코드를 실행하기 전에 오류를 검출합니다.

자바스크립트 vs 타입스크립트

자바스크립트 문제 예시

자바스크립트 문제 예시입니다. 실행하기 전에는 오류를 잡지 못하다가, 실행할 때 오류가 발생합니다.

let a = "abcde"
a = 12345

a.toUpperCase() // 실행 시 오류

하지만 자바에서는 모든 변수에 타입을 지정함으로 그럴 일이 없음!

String a = "hello";
int b = 123;
int c = a * b; //여기서 오류 발생

타입스크립트는 자바스크립트의 동적 타입 시스템과 자바의 정적 타입 시스템을 혼합한 것 같은 타입 시스템을 사용함

타입스크립트

let a: number = 1;
a.toUpperCase(); // 컴파일 단계에서 오류 발생

정적 타입 시스템처럼 안전하면서도 마치 동적인 타입 시스템처럼 모든 변수에 일일이 우리가 직접 타입을 명시하지 않아도 됨!

let a = 1;
a.toUpperCase();

TypeScript는 모든 변수에 타입을 강제로 요구하지 않음
let a = 1; -> 숫자로 초기화되었기 때문에 자동으로 number로 추론!

이처럼 명시된 타입은 엄격히 검사하고,
명시되지 않은 타입은 자동 추론하는 시스템을
점진적 타입 시스템(Gradual Typing)이라고 합니다.

타입스크립트 동작 원리

JS의 컴파일 과정

사람에게 익숙한 언어인 프로그래밍 언어와 컴퓨터가 우리가 작성한 코드들을 실행하기 위해 자기들이 해석하기 쉬운 형태로 변환해야 합니다. 이 과정을 컴파일(Compile) 이라고 하고, 코드를 컴파일하는 친구를 컴파일러라고 부릅니다.

자바는 바이트코드로 컴파일되지만, 자바스크립트는 AST로 변환된 뒤 자바스크립트 엔진(V8 등)에 의해 실행됩니다.

컴파일러는 바로 바이트코드로 변환하는 것이 아닌 그 전에 AST라는 형태로 변환한다.

AST는 추상 문법 트리로, 코드의 공백이나 주석 탭 등의 코드 실행에 관계없는 요소를 전부 제거하고 트리 형태로 자료 구조에 코드를 쪼개서 저장해놓은 형태

그러고 AST에서 바이트코드로 컴파일하게 됩니다.

따라서 자바스크립트의 컴파일 과정은 코드 -> AST -> 바이트 코드 순으로 컴파일하게 됩니다!

TS의 컴파일 과정

타입스크립트는 자바스크립트와 다르게 AST에서 타입 검사가 이루어집니다. 타입 검사에서 검사를 실패하면 컴파일이 종료되고, 성공하게 되면 AST를 자바스크립트로 변환하게 되죠!

그러면 타입스크립트의 총 컴파일 과정은

타입스크립트는
코드 → AST(TS) → 타입 검사 → JS 코드 생성 → AST(JS) → 바이트코드 → 실행
과정을 거칩니다.

타입 검사를 하고 검사가 성공되면 자바스크립트 언어로 컴파일된 후에 다시 컴파일 과정이 이루어지게 되는 것~

따라서 자바스크립트를 보다 더 안전하게 사용할 수 있도록 미리 한번 코드를 검사하는 용도로 사용된다! 타입스크립트의 사용 이유임!

타입스크립트 이용 방법

PS C:\Users\User\OneDrive\바탕 화면\studying\frontend\typescript\ts-basic> npm i @types/node

added 2 packages, and audited 3 packages in 2s

found 0 vulnerabilities
PS C:\Users\User\OneDrive\바탕 화면\studying\frontend\typescript\ts-basic> npm install typescript -g 

added 1 package in 2s
PS C:\Users\User\OneDrive\바탕 화면\studying\frontend\typescript\ts-basic> tsc -v
Version 5.9.3
PS C:\Users\User\OneDrive\바탕 화면\studying\frontend\typescript\ts-basic> tsc .\src\index.ts
PS C:\Users\User\OneDrive\바탕 화면\studying\frontend\typescript\ts-basic> node .\src\index.js
Hello ts

타입스크립트 설치, 타입스크립트 글로벌 설치 모든 프로젝트에 설치했음
tsc 타입스크립트 컴파일러 버전 확인

console.log("Hello ts");
const a: number = 1;

이것을 tsc .\src\index.ts로 컴파일을 해주면
.js파일로 컴파일되서 나오는 것을 확인할 수 있음!

console.log("Hello ts");
var a = 1;

계속 번거롭게 타입스크립트 컴파일하고 자바스크립트 컴파일하기에는 시간이 오래 걸리므로 tsx를 통해 타입스크립트를 바로 컴파일할 수 있도록 해보자!

PS C:\Users\User\OneDrive\바탕 화면\studying\frontend\typescript\ts-basic> sudo npm i -g tsx
PS C:\Users\User\OneDrive\바탕 화면\studying\frontend\typescript\ts-basic> tsx .\src\index.ts
Hello ts
PS C:\Users\User\OneDrive\바탕 화면\studying\frontend\typescript\ts-basic> 

바로 되는 것을 확인!