채용 공고를 보면서 타입스크립트의 비중이 무척 크다는 것을 느꼈다.
🐤 여태까지 미뤄왔던 타입스크립트 공부를 꾸준히 해보려고 한다. (가능하겠지..?)
타입스크립트는 자바스크립트에 비해서 버그를 줄임과 동시에 유지보수가 쉽고, 질 좋은 코드를 작성할 수 있는 장점이 있다. 프로그래밍 언어인 동시에 컴파일러라고 볼 수 있다. (타입스크립트 -> 자바스크립트로 컴파일)
타입스크립트 특징
- 변수 값에 데이터 타입 지정이 가능하다.
function add(a: number, b: number) {
return a + b;
}
console.log(add("3", "5")); // 8-
class와 interface의 특징을 지원함으로써 객체지향 프로그래밍 환경을 제공한다.
-
컴파일 타임 오류
- 타입스크립트로 그 자체로 브라우저에서 실행 될 수 없으므로 자바스크립트로 다시 컴파일 되어야 한다. 이 과정에서 오류를 캐치할 수 있다.
- ES6에서 제공하는 모듈 선언과 모듈 호출 방식을 지원한다.
타입스크립트 세팅
먼저 npm을 사용하여 타입스크립트를 전역으로 설치 한다.
npm install -g typescript
설치가 완료 되면 tsc라는 타입스크립트 명령어를 실행할 수 있게 된다.
하기 명령어를 사용하여 프로젝트 내 tsconfig.json 파일을 생성한다. tsconfig.json파일은 컴파일러의 옵션을 설정할 수 있다.
tsx --init
후에 index.html 과 app.ts 파일을 만들어 실행을 해보면, 아래처럼 에러가 난다!
이유는 브라우저가 .ts확장자 파일을 인지하지 못하기 때문이다.
이를 해결하려면 자바스크립트로 컴파일을 해준 후 실행 해주어야 한다.
자바스크립트로 컴파일된 파일을 만들기 위해 하기 명령어를 실행 해 준다.
tsc app.ts
이렇게 컴파일 된 app.ts를 실행해보면 정상 작동하게 된다.
만약, app.ts파일에서 변경점이 있을 때 자동으로 app.js에 반영되게 하고 싶다면
tsx -w
명령어를 사용하면 감시모드의 컴파일 프로세스가 시작되면서 자동으로 변경사항이 반영되게 된다!
