.jpg)
TypeScript 기본기 다지기
Table of Content
1. TypeScript 시작하기
새로운 프로젝트 (metaverse/greeter)
•
node 프로젝트 생성
npm init -y
Shell
복사
•
프로젝트에 타입스크립트 모듈 설치
npm i typescript
Shell
복사
•
src 폴더 생성 및 greeter.ts 파일 생성
function greeter(person: string) {
return "Hello, " + person;
}
let user = "Fred User";
document.body.textContent = greeter(user);
TypeScript
복사
•
.ts TypeScript 파일만 가지고는 프로그램을 실행시킬 수 없다.
node greeter.ts
Shell
복사
2. TypeScript 파일 빌드
JavaScript 실행 환경
•
Node.js도 JavaScript 실행환경이기 때문에, TypeScript는 Node.js에서 실행되어야 한다. 하지만 이 상태로는 실행되지 않는다.
•
TypeScript는 JavaScript로 컴파일(번역)이 필요하다.
◦
컴파일은 소스 코드를 다른 형태의 코드로 번역되는 과정을 의미 → 이 과정을 컴파일이라 부름
◦
컴파일은 단순히 TypeScript→JavaScript 정도의 번역이 아니라 → 기계어, 바이트코드 등으로도 번역되는 과정도 모두 컴파일이라 함
•
Node.js는 JavaScript 레벨의 언어를 이해하기 때문에 컴파일링이 필요한 것
TSC 커맨드
•
TSC는 타입스크립트 컴파일러를 실행하는 명령어
•
이를 통해 .ts 파일을 .js 파일로 번역 할 수 있다. (현재는 수동으로 하고있다는 점 기억)
•
프로젝트에 타입스크립트 환경 설정
npx tsc --init
Shell
복사
•
위 명령어를 통해 tsconfig.json이라는 파일이 생성된 것을 확인
◦
compilerOptions 등 코드를 통해서도 볼 수 있듯 컴파일과 관련된 것이 추가된 것을 볼 수 있음
•
이제 tsc로 명령어를 사용 할 수 있다.
◦
npx는 로컬에 설치된 패키지를 실행하는 데 특화된 도구로 이 부분에서만 사용 될 수 있으니 알아두기만 할 것
npx tsc src/greeter.ts
Shell
복사
TypeScript → JavaScript로 번역된 파일 자동 생성 확인
•
TypeScript는 JavaScript로 컴파일(번역)이 필요하다.
◦
컴파일은 소스 코드를 다른 형태의 코드로 번역되는 과정을 의미 → 이 과정을 컴파일이라 부름
◦
컴파일은 단순히 TypeScript→JavaScript 정도의 번역이 아니라 → 기계어, 바이트코드 등으로도 번역되는 과정도 모두 컴파일이라 함
•
Node.js는 JavaScript가 실행되는 환경이므로 때문에 TypeScript는 컴파일링이 필요한 것
그럼 처음부터 JS로 만든 파일과 컴파일된 파일이 같다면?
•
처음부터 동일한 순수 자바스크립트 코드로 컴파일로 생성된 js파일과 동일한 코드라면, 동일한 상태로 실행된다.
•
이는 곧 TypeScript는 컴파일 전 및 진행 중에서의 타입 오류를 체크해주는 것일 뿐
•
어떠한 동작을 바꿔주는 것이 아님 = 이것을 런타임 동작이라고 함
•
그리고 TypeScript에서 지정했던 타입들이 컴파일을 통해 지워진 순수 자바스크립트로 나타나는 현상 = 지워진 타입이라고 함
•
이는 TypeScript는 방대한 JavaScript와 동일한 라이브러리를 공유할 수 있는 장점으로 부각됨
그럼 오류가 있는 상태에서 컴파일 하게 된다면?
•
아래와 같이 변수에 잘못된 자료형을 넣어보자
function greeter(person: string) {
return "Hello, " + person;
}
let user = 1004;
document.body.textContent = greeter(user);
Shell
복사
•
즉시 IDE는 오류를 발견하지만, 이 상태에서 컴파일 명령어를 실행한다면?
•
아래 명령어로 컴파일 실행
npx tsc greeter.ts
Shell
복사
◦
오류 메시지도 나타나고 하지만,
◦
컴파일 완료 된 .js 파일이 생성되는 것을 확인 할 수 있다.
•
이것이 의미하는 것
◦
TypeScript는 프로그램 실행 전에 개발자에게 타입의 잘못된 부분을 알려주는 정도이며 타입 검사를 완전히 강제하지 않는다는 의미
◦
TypeScript는 Java와 같은 엄격한 타입 시스템을 갖고 있지 않기 때문에, 개발자가 실수할 가능성이 여전히 존재
◦
TypeScript는 JavaScript의 상위 집합으로 설계되었기 때문에, JavaScript의 유연성을 유지하면서도 타입 안전성을 제공하려는 가치관의 차이로도 볼 수 있음
Related Posts
Search
