TypeScript study note - 1

TypeScirpt는 JavaScript의 Superset이다

브라우저와 같은 자바스크립트 환경에서는 실행되지 않는다.(브라우저가 타입스크립트를 실행시키지 못함)

 

 

타입스크립트는 프로그래밍 언어이며 도구이다

코드를 작성해서 실행하면 자바스크립트 코드로 변환

 

바닐라 JS 로는 조건을 추가적으로 달아주지 않으면 입력받은 숫자값을 문자열로 받아들인다

ex)  10+5 = '105'

 

(sudo) npm install -g typescript 

리눅스 환경에서는 sudo를 넣어야 올바른권한이 생긴다.

해당설치를 하면 PC전역게 타입스크립트가 설치된다.

 

tsc명령어를 실행하면 컴파일러 타입을 호출하여 타입스크립트 파일을 자바스크립트 파일로 컴파일한다.

 

 

같은구조를 가진 js파일이 있으면 ts파일에서는 오류가난다

 

타입스크립트에서는 개발자의 의도를 좀 더 명확하고 분명히 제시해서 코드를 재검토

 

 

 

 

const input1 = document.getElementById("num1")! as HTMLInputElement

타입스크립트에게 null을 내주지 않을거라고 알리는 ! 를 사용해서 명시

항상 입력값 요소라는것을 알기 때문에 as HTMLInputElement 작성

 

 

 

cd 로 경로를 잡아주고

tsc using-ts.ts 작성하여 설치해둔 타입스크립트 컴파일러 호출

해당 명령어로 동일한이름의 자바스크립트 파일을 생성할 수 있다.

 

input1.value 값을 String 타입으로 인식해서 컴파일 오류가 난다.

 

 

  console.log(add(+input1.value, +input2.value));

해당 오류를 해결하기위해서 + 를 붙혀서 number타입으로 만들기

 

 

 

프로젝트를 생성해서 ts파일을 생성하여 작업을 진행할 때

tsc app.ts를 통해서 수동으로 컴파일을 해줘야하는데 해당부분을 위해 

npm init 을 통해서 package.json 파일을 생성해준다.

 

npm install  이프로젝트에만 적용되는 의존성을 설치한다.

뒤에 --save-dev 를 붙혀 개발전용 의존성으로 표시

lite-server 추가설치 경량 개발 서버

해당 작업을 완료하면 package-lock.json 파일이 생성된다.

 

  "scripts": {

     ...............

    "start": "lite-server"

  },

설치한 lite-server를 package.json 파일의 스크립트 부분에 start로 넣어준다.