[TS] 타입스크립트 시작하기

mokyoungg·2021년 3월 24일
2

타입스크립트 공부

목록 보기
2/10

타입스크립트 설치하기(윈도우)

Node.js 설치

타입스크립트를 설치하기 이전에 Node.js를 설치해야 한다.
https://nodejs.org/en/

Node.js를 설치하면 npm도 같이 설치되는데 설치 이후 정상적으로 설치되었는지 확인할 수 있다.

node -v

타입스크립트 설치

이후에 npm을 사용하여 타이스크립트를 설치한다.(yarn, pnpm도 가능)
https://www.typescriptlang.org/download

npm install typescript --save-dev (또는)
npm install -g typescript

마찬가지로 설치가 완료되었다면 정삭적으로 설치되었는지 확인할 수 있다.

tsc -v



타입스크립트 사용해보기

타입스크립트 변수에 타입 지정

타이스크립트에서 변수의 타입을 명시적으로 입력해야 한다.

let v1: number | string = 123
v1 = 'abc'

변수 이름 오른쪽에 콜론과 함꼐 타입을 선언한다.(number나 string 등)
변수 v1은 문자열도 포함하는 타입이므로 타입 에러가 발생하지 않는다.


타입스크립트를 자바스크립트로 트랜스파일링하기

타입스크립트 컴파일러(tsc)는 타입스크립 파일(.ts)를 자바스크립트 파일로 트랜스파일링한다.
컴파일은 일반적으로 소스 코드를 바이트 코드로 변환하는 작업을 의미한다.
타입스크립트 컴파일러는 타입스크립트 파일을 자바스크립트 파일로 변환하므로 컴파일보다는 트랜스파일링이 보다 적절한 표현이다.
출처 : https://poiemaweb.com/typescript-introduction

자바스크립트로 트랜스파일링하는 이유는?

브라우저와 Node.js는 자바스크립트만 처리하기 때문에
타입스크립트 코드를 실행하거나 디버깅하기 전에 트랜스파일링을 해야한다.

tsc로 트랜스파일링 하기

tsc 타입스크립트파일명.ts

tsc로 타입스크립트 파일을 트랜스파일링 하면 새로운 자바스크립트 파일이 생성된다.
타입스크립트에서 작성했던 type 지정의 코드는 사라진 것을 볼 수 있다.
(만약 오류가 있었다면 터미널에서 오류가 나타난다.)

새로 생성된 using-ts.js 파일을 index.html에 사용하면 기대하는 결과를 얻을 수 있게 된다.
(문자열이 아닌 숫자로 계산함)

기억해야할 것(타입 스크립트의 역할)

바로 위에서 기대하는 결과를 얻을 수 있게 된다라고 적었지만...

타입스크립트는 컴파일하는 동안에만 도움이된다.
브라우저에는 타입스크립트가 내장되어 있지 않기 때문에 런타임시 다르게 작동하도록 자바 스크립트를 변경하지 않는다.

개발하는 동안 개발자를 돕는다. 런타임 코드는 변경되지 않는다.
기본적으로 컴파일을 차단하지 않는다. 그러나 개발자가 오류를 고칠 수 있도록 실수를 가리킨다.

즉, 컴파일(트랜스파일링)시 오류가 발생해도 이를 차단하지 않는다.
실제로 오류가 있어도 타입스크립트 파일은 자바스크립트 파일로 컴파일이 이루어지며 웹에서 동작한다.

타입스크립트는 단지 오류가 발생했다고 개발자에게 알려주는 것이다.


트랜스파일링 중 경험한 오류

1. 보안오류 PSSecurityException

'이 시스템에서 스크립트를 실행할 수 없으므로 파일을 로드할 수 없습니다.' 라는 오류가 발생.

이 경우엔 window의 경우, window PowerShell 프로그램으로 해결할 수 있다.

  1. window PowerShell 프로그램을 관리자 권한으로 실행
  2. Get-ExecutionPolicy 명령어 입력시, 상태가 보임
  3. RemoteSigned가 아니라면 Set-ExecutionPolicy RemoteSigned 입력
  4. Get-ExecutionPolicy로 다시 확인, 권한 변경 확인(RemoteSigned)

출처 : https://dog-developers.tistory.com/183

2. TS6053 File not found.

타입스크립트의 트랜스파일링이 잘못된 폴더에서 이루어질 때 나오는 오류.
터미널에서 ls 명령어를 통해 ts 파일의 위치를 확인하였고 ts 파일의 위치보다 상위 폴더에서 트랜스파일링하고 있었다.

스택오버플로우에선 IDE를 재실행을 해서 고쳤다고 한다.
https://stackoverflow.com/questions/35893723/typescript-ts6053-file-ts-not-found


참고

profile
생경하다.

0개의 댓글