01.TS 개요

---

TypeScript 개요

• 공식 사이트 : (https://www.typescriptlang.org/)

1.TypeScript?

Typed JavaScript at any Scale

📎 from 공식 사이트

• TypeScript extends JS by adding types.

• by understanding JS, TypeScript saved you time catching errors and providing fixes before you run code

• any browser, any OS, anywhere JS runs. Entirely open source.

• Typed Superset of JS, Compiles to plain JS

📦 정리 하자면..

• 타입스크립트는 Programming Language 입니다.

• 타입스크립트는 Complied Language 입니다.

  • 일반적인 C 언어나 다른 언어에서 쓰이는 complie 과는 다른 개념입니다.

  • 그래서 Transpile 이라고 불리기도 합니다.

• 자바스크립트는 Interpreted Language 입니다

📌 compiled vs interpreted

compliled (TS)	interpreted (JS)
컴파일이 필요함	컴파일 필요없음
컴파일러 필요함	컴파일러가 필요없음
컴파일하는 시점있음	컴파일하는 시점없음
컴파일 타임 필요	코드 자체를 실행
컴파일된 결과물을 실행	코드를 실행하는 시점 있음
컴파일된 결과물을 실행하는 시점	런타임 있음

2.TypeScript 설치

JS run-time

• node.js : Chrome's V8 JavaScript Engine 을 사용하여, 자바스크립트를 해석하고 OS 레벨에서의 API를 제공하는 Sever side 용 JS run-time 환경임

• browser : HTML 을 동적으로 만들기 위해 브라우저에서 자바스크립트를 해석하고, DOM 을 제어할 수 있도록 하는 JS run-time 환경임

TS Compiler 설치

• npm

  • npm i typescript -g (global 단위로 설치 할 경우.)

  • node_modules/.bin/tsc

  • tsc source.ts

• Visual Studio plugin 설치 : 2017 이후 버전에는 default 로 설치되어 있음

  • VS code 랑 다른 프로그램인데 vs code 만 사용 한다면 mpm 으로 설치 하는것을 권장함

간단한 컴파일러 사용 예제

• 타입스크립트 컴파일러를 글로벌로 설치 후,

  • cli 명령어로 파일 컴파일

  • 특정 프로젝트 폴더에서 타입스크립트 컴파일러 설정에 맞춰 컴파일

  • 특정 프로젝트 폴더에서 타입스크립트 컴파일러 설정에 맞춰 컴파일 (watch 모드)

• 프로젝트에 타입스크립트 컴파일러를 설치 후,

  • .bin 안의 명령어로 파일 컴파일

  • npm 스크립트로 파일 컴파일

  • 프로젝트에 잇는 타입스크립트 설정에 맞춰, mpm 스크립트로 컴파일

  • 프로젝트에 잇는 타입스크립트 설정에 맞춰, mpm 스크립트로 컴파일 (watch 모드)

🔹 단순히 컴파일 실행 해 보기

1. node.js 설치 후에 npm i typescript -g 을 통해 TS 설치

2. 테스트를 위해 test.ts 파일 생성 후, console.log(“HI, Jacob”)

3. tsc test.ts 실행하면 동일 폴더에 test.js 파일이 자동으로 생성 (컴파일 한거임)

🔹 글로벌 단위로 컴파일 실행하기

1. tsc-project 라는 폴더를 만든다

2. test.ts 파일 만들고 그 안에 단순히 console.log(‘HI, world’) 넣는다.

3. tsc --init 하면 자동으로 설정 파일 tsconfig.json 생성이 됨

4. 그럼 tsc 라고만 치면 컴파일되서 test.js 파일이 자동으로 생성됨

5. tsc -w 라고 하면 watch mode 실행 –> 이건 파일이 수정 될때 마다 일일히 tsc 치지 않아도 자동으로 컴파일 해주는 명령어 임

🔹 프로젝트에 TS 컴파일러 설치후 컴파일 실행하기

• !! global 로 설치해서 돌리게 되면 전체에 영향을 주기 때문에 project 단위로 컴파일러 돌리는것을 추천함 !!

1. 설치 된, global 타입의 typescript 지워 주기 -> npm uninstall typescript -g

2. 테스트 할 폴더 tsc-project2 만들고, 해당 폴더에 가서 npm init -y 치면 자동으로 package.json 파일 생성됨

3. npm i typescript 프로젝트 폴더에서만 사용되는 typescript 를 설치 해줌 **(-g 가 없기 때문에 local 속성으로 프로젝트 폴더 내에서만 설정됨) **

4. package.json 파일에 가면 dependencies : typescript : 버전명 이 써있는것을 확인 !! (typescript 가 dependent 하게 잘 설치 되었는지 확인 차)

5. global 과 다르게, 컴파일 하려면 tsc 명령어를 치려면 일단, 위치는 ./node_modules/.bin/tsc 에 위치해 있음.

6. 쉽게 줄여서 npx tsc 하게 되면 컴파일 실행 되며, tsconfig.json 의 생성은 npx tsc --init 하면 생성 됨

7. 테스트를 위해 해당 폴더에 test2.ts 파일 생성하고 console.log("hi, test2") 라고 쓰고, npx tsc 라고 치면 자동으로 test2.js 파일생성되면서 컴파일이 됨

8. 마찬가지로 npx tsc -w 하면 watch 모드로 실행되서 수정되면 자동으로 컴파일러 실행

9. npx 로 바로 실행해 줘도 되고 package.json 안에 명령어를 등록해서 사용해도 편리함

  "scripts": {
    "build" : "tsc",
    "build:watch" : "tsc -w"
  },

위와 같이 등록하고, 실행창에서npm run build 또는 npm run build:watch 하게 되면 컴파일러가 실행됩니다.

3.VS Code 설치 및 설정

• TypeScript Compiler

  • VS Code 에 컴파일러가 내장되어 있습니다.

  • 내장된 컴파일러 버전을 VS Code 가 업데이트 되면서 올라갑니다.

    • 그래서 컴파일러 버전과 VS Code 의 버전은 상관 관계가 있습니다.

  • 내장된 컴파일러를 선택할수 있고, 직접 설치한 컴파일러를 선택할 수도 있습니다.

4.First Type Annotation

• TypeScript 가 가지고 있는 고유의 기능입니다. (JS 가장 차별되는 기능임)

• Type 이 코드상에 등어나는것을 말함

let a = "Jacob";

// Type 'number' is not assignabale to type 'string'
a = 80; // JS 와 TS 다르게 위에는 str 이고  아래는 number 이기 때문에 error 발생 -> a 에는 무조건 str 이 와야 됨

let a: string; // type 을 지정해주는 것을 type annotation

a = "Jacob";

function hello(b: number) {
  // 이것도 마찬가지로 type annotation
}

// Argument of type 'string' is not assignable to parameter of type ''
hello("Jacob"); // error 발생

Reference

• typescript offical site - (https://www.typescriptlang.org/)

• taeg92.log - https://velog.io/@taeg92/TypeScript-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0