Type Script 기초 배우기 2[변수]

이제 본격적으로 Type Script를 배워보도록 합시다.

타입스크립트는 궁극적으로 JavaScript로 컴파일 되기 때문에 컴파일을 할 수 있는 모듈이 필요합니다.

그래서 nodejs를 통해서 타입스크립트 모듈을 설치해 보겠습니다.

nodejs 설치가 안되어 있는 분은 여기를 참고하세요.

 

우선 명령 프롬프트 창을 실행시킵니다.

(저는 보통 git bash를 사용하기 때문에 git bash로 실행시켰습니다. cmd로 실행시켜도 무방합니다.)

아래와 같이 npm에서 typescript 모듈을 다운로드 합니다.

타입스크립트 모듈을 전역변수로 설치했습니다.

그리고 디렉토리를 하나 생성해서 해당 디렉토리로 이동합니다.

디렉토리에서 명령프롬프트를 실행 후 tsc --init을 입력하면 tsconfig.json파일이 생성됩니다.

 

tsconfig.json는 어떤 파일일까요?

tsconfig.json파일에서는 타입스크립트가 컴파일 될 때 필요한 옵션을 지정합니다. 명령어를 통해서 생성한 설정파일에 기본적으로 설정되어있는 속성들이 어떤 의미를 갖고 있는지 한번 알아봅시다.

 

• target: 컴파일된 코드가 어떤 환경에서 실행될 지 정의합니다. 예를들어서 화살표 함수를 사용하고 target 을 es5 로 한다면 일반 function 키워드를 사용하는 함수로 변환을 해줍니다. 하지만 이를 es6 로 설정한다면 화살표 함수를 그대로 유지해줍니다.
• module: 컴파일된 코드가 어던 모듈 시스템을 사용할지 정의합니다. 예를 들어서 이 값을 common 으로 하면 export default Sample 을 하게 됐을 때 컴파일 된 코드에서는 exports.default = helloWorld 로 변환해주지만 이 값을 es2015 로 하면 export default Sample 을 그대로 유지하게 됩니다.
• strict: 모든 타입 체킹 옵션을 활성화한다는 것을 의미합니다.
• esModuleInterop: commonjs 모듈 형태로 이루어진 파일을 es2015 모듈 형태로 불러올 수 있게 해줍니다.

이외에는 이 사이트가 가장 정리가 잘 되어 있는 것 같습니다. 번역이 잘 맞지 않는 건 흠이네요.

 

옵션에서 outDir이 있는데 ts파일을 js파일로 컴파일했을 때 저장되는 경로입니다. outDir값을 ./dist로 변경합니다. 

그리고 프로젝트 경로에서 src 디렉토리를 생성 후 src디렉토리에서 practice.ts파일을 생성 후 다음과 같이 입력합니다.

let count = 0; 
count += 1;
//count = '문자열'; //number 타입에 문자열 할당시 error type mismatch

const message: string = 'hello world!';

const done: boolean = true;

const numbers:number[] = [1,2,3];
const messages:string[] = ['hello', 'world'];

//messages.push(1); //messages는 string타입의 배열이므로 number를 넣으면 error

let mightBeUndefined: string | undefined = undefined; // string 일수도 있고 undefined 일수도 있음
let nullableNumber: number | null = null; // number 일수도 있고 null 일수도 있음

let color: 'red' | 'orange' | 'yellow' = 'red'; // red, orange, yellow 중 하나임
color = 'yellow';
//color = 'green'; // 위에 정의한 세 개의 타입에 없으므로 error 발생!

주석처리한 라인을 주석을 풀게되면 컴파일에러가 발생하기 때문에 js파일로 컴파일이 안됩니다.

위와 같이 타입스크립트에서는 변수의 타입을 지정해 줄 수 있기 때문에 컴파일 전 에러를 확인할 수 있습니다.

 

 

• 참조

https://velog.io/@velopert/typescript-basics