타입스크립트 D-1

본 게시글은 정확한 정보를 담고있지 않을 수 있으므로 다른 자료도 참고하시길 바랍니다.
만약, 본 게시글이 잘못된 정보를 가지고 있다면 피드백 부탁드립니다. 감사합니다.

타입스크립트를 배우기로 결정한 이유

1. 리액트, 노드 개발자 채용공고에서 타입스크립트가 필수거나 우대사항에 있는 것을 심심찮게 볼 수 있었다. 취직 확률을 높이기 위해서는 학습이 필수라고 생각했다.
2. 깃허브에서 자바스크립트 베이스 프로젝트들을 보면 꽤 많은 프로젝트들이 타입스크립트로 작성되어 있음을 확인할 수 있었다. 그 코드들을 이해하기 위해서는 타입스크립트 학습이 필요하다고 생각되었다.

학습 도구

TypeScript Tutorial for Beginners [2022]
https://www.youtube.com/watch?v=d56mG7DezGs

학습 내용

1. 타입스크립트는 왜 사용하는가?

• 자바스크립트는 변수 사용시 데이터 타입 설정에 엄격하지 않기 때문에 안정성이 떨어진다.
• 코드 예시

// javascript
let number = 5;
number = "a";
Math.round(number); // NaN

// typescript
let x: number = 5;
x = 'a'; // 컴파일 타임에 에러 발생

• 자바스크립트에서는 프로그램이 실행되어 NaN이 출력되지만 타입스크립트에서는 프로그램 실행 전인 컴파일 타임에 에러를 발생시켜 프로그램 실행시 충돌나는 것을 방지한다.
• 프로젝트 개발 시 자바스크립트 코드에서 발생할 수 있는 버그들을 예방하여 개발 속도를 높일 수 있다.
• 프로젝트 규모가 커질 수록 타입스크립트의 필요성이 증가한다. (왜 IT 기업에서 웹개발자 채용시 타입스크립트를 중요시 여기는지 알 수 있는 항목이다. )
• 이는 동적 타입 프로그래밍 언어인 자바스크립트를 정적 타입 언어처럼 사용하는 것과 비슷하다.

2. 브라우저는 타입스크립트를 이해하지 못한다.

• 타입스크립트가 자바스크립트 코드로 컴파일 되어야하는 이유이다.
• 타입스크립트를 자바스크립트 코드로 컴파일 하는 것을 transpilation 이라고 한다.

설치

npm 을 이용한 설치

npm i -g typescript

설치 확인

tsc -v

타입스크립트 파일 생성

// index.ts
console.log("Hello world");

터미널에 tsc 명령어로 컴파일 실행

tsc index.ts

알 수 없는 수많은 에러들이 빵빵 터진다. 하지만, 컴파일이 실행되었다.
위 에러들은 tsc --init 커맨드를 실행하여 tsconfig.json 파일을 생성하면 말끔히 사라진다.

// index.js
console.log("Hello world");

tsconfig.json 파일 생성

tsc --init

위의 명령어를 실행할 경우 프로젝트 디렉토리에 tsconfig.json 파일이 생성된다.
config 파일 내부에 보면 다음과 같은 프로퍼티들이 존재하는데 값을 변경해준다.

rootDir: './src'
outDir: './dist'
noEmmitOnError: '...'

rootDir인 src 폴더에는 index.ts가 저장되어있고 컴파일 결과물은 outDir인 dist폴더에 저장된다.
다시 컴파일을 시도하는데 이번에는 tsc만 입력.

tsc

tsconfig.json 파일 내부에 rootDir, outDir가 설정되어 있으므로 자동으로 타입스크립트가 파일을 찾아 컴파일을 시도한다.

다시 확인해본 결과 rootDir 를 설정하지 않아도 알아서 ts 프로젝트 디렉토리 내에 있는 모든 ts파일을 찾아서 컴파일한다. 그러나, rootDir를 설정하고 tsc 커맨드를 실행할 경우 모든 ts파일들을 컴파일 하되, 다음과 같은 에러를 발생시킨다.

$ tsc
error TS6059: File 'C:/Users/1/Desktop/portfolios/typescript2/main.ts' is not under 'rootDir' 'C:/Users/1/Desktop/portfolios/typescript2/src'. 'rootDir' is expected to contain all source files.