TS 왜 생겼는가?
TypeScript 배워 보기 전에 왜 생겼는지에 대해 알아보자
JS를 쓰는 100명의 개발자 중 TS를 안쓰는 개발자는 10명밖에 안된다 즉 100명 중 90명이 TS를 사용하고있다.
JS는 원래 간단한 상호작용 정도로(웹브라우저에서만 실행) 처리하기 위해 개발 되었고 그렇기에 유연한 문법 + 자유로움이 있었다
Node.js가 생기고 나서 웹브라우저에서만 실행되던 JS가 이제 어디서든 구동기 가능해졌고 이로 인해 웹서버, 모바일 앱, 데스크탑 앱으로까지 개발이 가능해졌다 그러나 JS의 본질적 성질때문에 버그 가능성이 높아지면서 장점이 단점이 되어버렸고 이 단점을 극복하기 위해 생긴 것이 TS이다.
타입스크립트 = 자바스크립트의 확장판
자바스크립트를 더 안전하게 사용할 수 있도록
type관련 기능들을 추가한 언어
JS는 전세계적으로 가장 인기있는 프로그래밍 언어이다.
인기 많은 JS만으로 충분하지 않을까? TS 굳이 배워야하나?
응
타입(Type) 시스템
값들을 어떤 기준으로 묶어 타입을 규정할 것인가?
언어의 타입 관련된 문법 체계
- Number - 0.1, 1, 100
- Boolean - true, false
- String - "안녕", "그래"
정적 타입 시스템
코드 실행 이전 모든 변수의 타입을 고정적으로 결정
즉 엄격하고 고정적이다
ex) C,Java
동적 타입 시스템
코드를 실행하고 나서 그때 그때 마다 유동적으로 변수의 타입을 결정
즉 자유롭고 유연하다
ex) Python, JavaScript
TS의 타입 시스템
// index.js
let num = 1;
num.toUpperCase();JS 에서는 위 코드가 코드 실행 전 아무런 표시가 뜨지 않는다.
TS는 어떠할까?
// index.ts
let num: number = 1;
num.toUpperCase();toUpperCase부분에 빨간줄이 뜬다.
그렇지만 항상 매번 변수에 타입을 지정하는거는 너무 번거로운 일이지 않냐?
그렇지 않다.
// index.ts
let num = 1;
num.toUpperCase();모든 변수에 타입을 일일이 지정할 필요가 없음
초기 값을 통해 타입을 추론
TS 동작 원리
TS 동작 원리를 알아보기 전 JS의 동작 원리에 대해 알아보자
JS 컴파일 과정
컴파일 - 우리가 쓰는 프로그래밍 언어를 컴퓨터가 이해하기 쉬운 형태(바이트 코드)로 변환하는 작업
- JS코드를 AST(추상 문법 트리)로 변환
- AST -> 바이트 코드로 변환 컴파일 종료
AST - 코드에 필요한 것을 제외(공백, 주석 등)
TS 컴파일 과정
- TS코드를 AST(추상 문법 트리)로 변환
- 변환된 AST에 대해 타입 검사
2-1. 타입에 오류가 있을 시 컴파일이 종료 - 타입 오류가 없다면 AST를 JS로 변환 후 컴파일 종료
-> 타입 검사가 된 JS는 안전한 코드이기에 버그 발생 확률이 현저히 낮다
TS 컴파일러 옵션 설정
TS를 시작하기 앞서 이제 컴파일러 옵션에 대해 알아보자
해당 프로젝트에서 다음과 같은 명령어를 사용
tsc --init이렇게 하게되면 tsconfig.json 파일이 생성되고 그 안을 열어보면 뭐가 많은데 그냥 다 삭제해버리자
컴파일러 옵션이기에 프로젝트에 따라 다르게 설정할 수 있으니 입맛대로 설정해보면서 어떠한 옵션이 있는지 알아보자
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"outDir": "dist",
"strict": false,
"moduleDetection": "force"
},
"include": ["src"]
}
하나하나 알아보자
target - 컴파일된 JS코드를 어떤 ECMAScript 버전으로 타겟팅할 지에 대한 설정
module - 컴파일된 JS 모듈 형식을 설정
outDir - 컴파일된 JS 파일이 생성될 디렉토리 설정
strict - TS의 엄격한 타입 체크 설정
include - TS컴파일러에게 컴파일 할 파일이나 디렉토리 지정
moduleDetection - 모듈 감지 방법
// file1.ts
const message = "Hello from file1";
// file2.ts
const message = "Hello from file2";위와 같은 파일이 존재하고 같은 변수가 존재한다고 하자
그럼 TS는 오류가 발생했다고 알려준다.
TS는 변수 충돌을 방지를 하기때문이다
그래서 moduleDetection 이 옵션을 force로 바꾸게 되면
조금 더 자유로운 변수를 공유할 수 있게 된다.
