[TypeScript] 타입스크립트 연습하기

 

타입스크립트 무작정 해보겠다.

 

명령 프롬프트를 연다.

프로젝트 폴더를 만들고 그 안에 타입스크립트를 생성해보겠다.

$ mkdir ts-practice 
//프로젝트 폴더 생성

$ cd ts-practice
// 프로젝트 폴더로 이동

$ npm init -y
// 또는 yarn init -y

 

ts-practice 폴더에 뭔가 생겼나보자.

어서오고

 

타입스크립트를 글로벌로 설치한다.

$ npm install -g typescript

 

tsconfig.json 파일을 생성하기 위해서는 다음 명령어를 입력해야한다.

$ tsc --init

 

tsconfig.json 파일을 한번 열어보자.

 

@_@;;

뭔가 막 많이 써있는데....

헷갈리니까 주석 걸어놓은거는 다 지워보자.

{
  "compilerOptions": {
        "target": "es2016",
        "module": "commonjs",
        "esModuleInterop": true,
        "strict": true,
        "skipLibCheck": true
  }
}

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

 

이제 만든 프로젝트를 intellij로 켜고,

src 폴더를 만들고, 그 안에 타입스크립트 파일을 만들어보자.

 

코드는 간단한 로그 확인 코드 넣었다.

신기하게 : string 이라고 문자열이라고 선언해준다.

처음보는 문법이였다.

 

코드 작성 후, 터미널에 tsc 명령어를 입력해보면

js 파일이 생성된다.

 

아하... 이런식으로 타입스크립트를 사용하는구나...

 

다른 예제도 해봤다.

일부러 에러가 나는 코드였는데 tsc를 실행했을때

에러 로그를 띄워준다.