TypeScript 공부하기 - 타입 스크립트 등장 배경과 타입스크립트의 장점, 타입 스크립트의 동작 원리, 환경설정

타입스크립트의 등장 배경

자바스크립트는 동적 타입 시스템으로 다소 자유롭고 유연한 타입 시스템을 가진 프로그래밍 언어다.

초기에 단순한 종류의 상호작용을 위해 개발되었기 때문에, 그다지 엄격성이 요구되진 않았다.
유연한 장점 중 하나는, 우리가 직접 변수의 타입을 직접 정의하진 않아도 되는 편리함이 있다.

 

하지만 그러한 유연함이 단점이 될 때가 있는데,

자유로운 만큼 오류나 버그 같은 비안정성인 문제가 있고, 이에 

타입 스크립트가 등장했다.

 

타입 스크립트는 자바스크립트에 타입 검사가 실시된 자바스크립트의 확장판이라고 생각하면 쉽다.

완전히 다른 문법이 아닌, 자바스크립트에서 타입을 직접 지정해주는 여러가지 문법이 추가 된 것이다.

 

타입 스크립트는 그렇다고 너무 엄격한 언어는 아니다.

 

정적 타입 시스템과 동적 타입 시스템을 둘 다 사용하고 있기 때문이다

1) 타입 지정을 직접 해주기도 하지만, 2) 초기값으로 추론을 직접하는 점진적 타입 시스템을 사용하므로

하나하나 모든 걸 일일히, 타입을 지정해주어야 하는, 타이핑이 많은 단점은 없다

 

따라서 타입 스크립트는 정적 타입 시스템이 갖는 안정성을 채택하지만,

또 모든걸 일일히 작성할 필요가 없는 불편함을 해결한 좋은 타입 시스템 이라고 할 수 있다.

 

---

타입 스크립트의 동작원리

대다수의 프로그래밍 언어는, 컴퓨터 보다는 인간에게 친화적이다.

이 말은, 인간이 사용하는 프로그래밍 언어는 바로 컴퓨터가 직접 알아들을 수 없는데

이 때문에 우리 인간이 작성한 코드를 자기 나름대로 쉽게 컴퓨터가 해석하기 위한 형태로 변환하는 컴파일이란 과정이 필요하다.

 

이 때 우리가 작성한 프로그래밍 언어를 컴파일하여 기계어로 변환하고, 그 뒤 이제서야 컴퓨터는 코드를 실행하는 것.

 

보통 자바나 자바스크립트 같은 언어를 컴파일 하면 바이트 코드라는 형식으로 주로 변환되는데(컴퓨터가 쉽게 이해할 수 있는 컴퓨터 기계어 라고 생각하면 쉽다).

 

우선 프로그래밍 언어를 컴파일 해서 바이트 코드가 되려면 대개 중간에 AST라는 특별한 문법으로 변환한 뒤, 다시 바이트 코드로 바뀐다.

프로그래밍 언어 -> AST -> 바이트 코드

 

타입스크립트의 실행 과정은 조금은 다른데,

여느 프로그래밍 언어처럼

프로그래밍 언어 -> AST 까지는 동일하게 동작하지만

이 때, AST를 보고 타입에 문제가 있는지 없는지를 검사하는 타입 검사가 실시된다.

 

만약 이 타입 검사 동안, 1) 타입에 오류가 있다면, 타입 검사는 실패 되고 컴파일이 중단된다.

2) 타입에 오류가 없다면, 타입 검사는 성공되고 이 때 바이트 코드가 아닌! 자바스크립트 코드로 변환된다 !

 

프로그래밍 언어 -> AST -> 타입 검사 -> 성공시 (자바스크립트 코드) / 실패시 (컴파일 실패)

 

그리고 비로소 이렇게 타입스크립트가 만들어낸 자바스크립트의 코드가 실행하게 되면, 앞선 프로그래밍 언어들 처럼 

동일한 과정으로 컴파일 되며 실행되는 것이다.

타입 검사가 성공되어, 자바스크립트 코드로 변환되면 타입과 관련된 모든 코드들은 컴파일을 실행하게 된다.

---

타입 스크립트 설치 및 환경 설정 

TypeScript의 환경설정이란, 타입 스크립트 설치 후, tsconfig.json 파일에서 컴파일러가 어떻게 작동할지 옵션을 설정해주는 것 을 말한다.

예를 들어,

- 어떤 파일을 컴파일 할지,

- 어떤 버전의 js로 변환할지

- 타입 검사를 엄격하게 할지?

- 특정 폴더나 파일은 무시할지.

 

이런 옵션들을 config 파일에서 세세하게 설치 할 수 있다.

{
  "compilerOptions": {
    "target": "es6",         // 어떤 JS 버전으로 변환할지 (ES6로!)
    "module": "commonjs",    // 모듈 시스템
    "strict": true,          // 엄격한 타입 검사
    "outDir": "./dist",      // 컴파일된 JS 파일이 저장될 폴더
    "rootDir": "./src",      // TypeScript 소스가 있는 폴더
    "esModuleInterop": true  // 외부 모듈 호환성 설정
  },
  "include": ["src/**/*"],   // 이 폴더 안의 파일만 컴파일
  "exclude": ["node_modules"] // 이 폴더는 제외
}

 

---

출처 : 한 입 크기로 잘라먹는 타입스크립트, Chat GPT