[Type Script] 타입스크립트 실행 및 설정

Type Script사용법

오늘은 내가 사용하는 에디터인 VScode에서 Type Script를 사용해 볼려고 한다.

1. 일반 HTML CSS JS 웹개발시 타입스크립트 사용하기

먼저 node, npm 설치되어 있는지 확인한다.

node -v

npm -v

나는 이미 설치가 되어있기 때문에 다음 작업으로 넘어갔다.
study라는 폴더를 하나 만들어 주고 그 안에 TypeScript라는 폴더를 만들어 주었다.

TypeScrip라는 폴더 안으로 들어간 후 터미널을 이용하여 아래 명령어를 순서대로 입력 해주면 된다.

$ npm init-y           -->package.json 파일 생성
$ npm i -g typescript  -->typescript 전역 설치
$ npm i typescript -D  -->

그리고 node에서 typescript를 실행하게 하기 위해 ts-node를 설치를 해준다.

$ npm i -D ts-node

이제 tsconfig.json파일을 생성하여 typescript에 대한 설정을 해 주면 된다. 다른 설정도 많지만 오늘은 간략하게 설정을 해보았다.

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "noImplicitAny": true,
        "strictNullChecks": true
    }
}

• 'target'은 타입스크립트파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분이다.
  es5로 셋팅해놓으면 es5 버전 자바스크립트로 컴파일(변환) 해줍니다.

• 'module'은 자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 곳이다.
  commonjs는 require 문법!
  es2015, esnext는 import 문법!을 사용한다.

• 'noImplicitAny'는 any라는 타입이 의도치않게 발생할 경우 에러를 띄워주는 설정이고

• 'strictNullChecks'는 null, undefined 타입에 이상한 조작하면 에러를 띄우는 설정입니다.

더 많은 tsconfig.json에 들어갈 항목들은
https://www.typescriptlang.org/tsconfig 여기서 구경 가능 하다!

이렇게 ts에 대한 설정을 마치고 ts 파일을 하나 생성한 후 아무 코드를 입력 해보자!

let 이름:string = "han"

먼저 이름이라는 변수를 만들어 주고 이 변수에 string(문자)type이 들어 오도록 코드를 작성해 보았다.

let 이름:string = "han"
이름 = 123;

그리고 밑에 이름이라는 변수에 숫자 type의 값을 입력 해주면

이런 식으로 변수 밑에 빨간줄이 생기면서 어떤 오류가 발생하였는지 알려준다.
그리고 현재 ts파일에서 작성 중인 코드를 실시간으로 js파일로 변환 시켜 주고 싶다면 현재 ts파일이 있는 폴더에서 터미널을 열고

tsc -w

명령어를 입력해주면 .ts 파일명과 동일한 .js 파일이 생성 되면서 .ts파일에서 입력한 코드가 .js파일에 입력 되어 있는 것을 확인 할 수가 있다.