타입스크립트 시작하기

타입스크립트란?

타입스크립트는 자바스크립트의 단점을 보완하고자 나온 언어로 자바스크립트 기반보다 타입을 지정함으로 인해 버그를 줄일 수 있고 유지보수가 쉽습니다.  타입스크립트를 배우기 전에 알아두면 좋은 지식은 총 세 가지가 있습니다. 첫 번째로 데이터 타입에 대해서 알고 있어야 합니다. 두 번째로는 변수나 동적메모리의 동작원리에 대해서 알아두면 좋고 마지막으로 객체 지향 철학에 대해 알고 계시면 많은 도움을 받을 수 있습니다.

 

타입스크립트 환경과 자바스크립트 환경을 비교해 보면

타입스크립트 환경의 경우 자바스크립트가 동작하지만

자바스크립트 환경의 경우 타입스크립트가 동작하지 않습니다.

 

데이터 타입을 명시하면 어떻게 좋을까요?

테이터 타입을 명시하지 않는 자바스크립트는 변숫값을 정확하게 알 수 없어서 매번 확인작업을 해야하는 반면에 타입스크립트는 테이터 타입을 명시하기 때문에 변수값이 명확하게 어떤 데이터인지 알수 있어 안정성을 높여줍니다.

function add( a, b ) { // 자바스크립트 문법
  return a + b;
}

add(3,5) // 8
add('3','5') // '35'

function add( a : number, b : number) { // 타입스크립트 문법
  return a + b;
}

add(3,5) //8
add('3','5') // error

위 코드로 비교를 했을 때 자바스크립트 문법에서는 타입이 명시되지 않아 숫자와 문자 둘 다 출력이 되지만, 타입스크립트로 작성한 코드에서는 숫자일때는 잘 출력이 되고 문자일때는 에러가 발생하게 됩니다. 숫자와 문자 둘다 출력되는 자바스크립트 코드가 좋아 보이겠지만 기능적으로 봤을 때 문자가 출력되는 저 값은 우리가 원한 값이 아니기 때문에 불필요한 데이터가 반환이 되는 것입니다. 때문에 타입스크립트처럼 처음부터 데이터타입을 명시한다면 문자열로 매개변수가 넘어오더라도 우리가 원하는 상황이 아닌 문자열 덧셈을 하지 않고 에러를 발생시키는 것입니다.

 

이렇게 데이터 타입을 명시해 주면 클래스타 인터페이스 컨스트럭터나 접근지정자와 같은 객체 지향 프로그래밍의 특성을 지원하게 됩니다. 즉, 객체지향 프로그래밍의 특성을 이해하고 있다면 타입스크립트를 이해하는데 도움이 된다는 뜻이 되고 타입스크립트를 이해한다면 객체 지향 코드를 적용할 수 있게 되는 것입니다.

또한 컴파일타임시에 오류를 체크를 해주게 됩니다. 타입스크립트는 웹사이트에서 코드를 읽을 수 없기 때문에 자바스크립트로 컴파일 작업을 하고 자바스크립트는 그걸 웹사이트에 전송을 하여 출력을 해 주는 것입니다. 이렇게 컴파일 작업을 하면서 그 체크하는 시간(컴파일타임)에 타입이 일치하지 않는 경우 해당 오류를 발견할 수 있게 되는 것입니다.

 

타입스크립트 환경 설정하기

타입스크립트를 설치하기 전에 확인할 것 : node.js 설치

npm i - g typescript

 

타입스크립트 시작하기

타입스크립트 파일 생성 방식 : 파일명.ts

 

타입스크립트 파일을 생성을 했다면  어떻게 실행할수 있을까요? 타입스크립트 파일은 컴파일 작업을 거처야 자바스크립트로 변경이되고 그걸로 실행을 할수 있기 때문에 vscode 터미널에서 컴파일 명령어를 입력해 주어야합니다.

tsc 파일명.ts

이렇게 명령어를 입력하게되면 파일명.js가 생성이됩니다. 이걸로 실행을할수있는데요. 매번 이렇게 컴파일 작업을 하지 않아도 아래와 같은 명령어를 입력하면 파일명.ts에서 값을 수정해도 해당 값을 바로바로 컴파일하지 않고 js파일을 수정할수 있습니다.

tsc -w 파일명.ts