[ TypeScript ] TypeScript 기초 다지기 및 파일 생성

TypeScript VS JavaScript

---

Time

---

• TypeScript는 변수의 타입이 컴파일타임에 결정된다.
• JavaScript는 변수의 타입이 런타임에 결정된다.

 

컴파일타임? 런타임?

---

• 컴파일 타임 (Compile time): 작성한 소스코드가 어떠한 것(js, binary 등)으로 변환되는 과정
• 런타임(Runtime): 프로그램이 실행되는 과정

 

 

TypeScript를 왜 쓸까?

---

	장점	단점
TypeScript	1. Microsoft에서 만들었고 꾸준히 업데이트를 한다. 2. 생태계가 크다. 3. Microsoft에서 개발한 VScode와 잘 맞는다. 4. 대부분의 Library에서 타입 정의 파일을 제공한다. 5. 유지보수가 JS보다 유리하다.	1. JavaScript에 비해 어렵다.
JavaScript	1. 다른 언어에 비해 쉽다. 2. 적은 양의 코딩을 할 때 쉽고 빠르게 개발이 가능하다.	1. 런타임 시 오류가 검출된다.  2. 프로젝트 사이즈가 커지면 유지보수가 어렵다.

 

 

생산성(유지보수가) 왜 유리할까?

---

const person = {
  name: 'js',
  gender: 'man',
};

console.log(person.age);

위이 코드에서 Javascript로 작성한 경우에는 동적언어이기 때문에 에러가 나지 않는다. 그러므로 age라는 프로퍼티가 없다는 것을 알지 못한다. 하지만 TypeScript로 작성 파일에서는 VScode가 타입을 알기 때문에 person에 age 프로퍼티가 없기 때문에 에러를 발생시켜 준다. 

 

 

TypeScript 파일 생성하기

---

1. package.json파일 생성

---

npm init -y

 

 

2. TypeScript 설치 명령어

---

node_modules & package-lock.json 파일이 생성된다.

npm install typescript

 

 

3. tsc 모듈로 초기화

---

npx tsc --init

• 위 명령어는 tsc 모듈을 해당 모듈을 사용자의 컴퓨터에 전역적을 저장하는것이 아니라 한 번만 쓰고 버린다.
• tsc: TypeScript 컴파일러 
• 이때 init을 함께 해주면 tsc모듈로 초기화해준다. tsconfig.json파일이 생성된다.

npx란?
사용할 모드를 로컬에 저장하지 않고 매번 최신 버전의 파일만 가져와서 실행한 다음에 파일을 없애는 방식으로 모듈을 사용하게 해 준다.

 

 

TypeScript로 코드 써보기

---

TypeScript 파일 생성

---

touch hi.ts

 

파일생성 후 아래와 같이 적어주었다.

const str = 'TS';

const hi = () => {
  console.log(`Hello ${str}!`)
}

hi();

 

 

JS파일 만들기

---

npx tsc

터니널에 위와 같이 명령어를 입력하면 ts파일을 js파일로 변경해 준다.

변경을 해줘야 하는 이유는 브라우저는 TS파일을 읽지 못한다.

 

 

파일 실행하기

---

node hi.js

 

위 코드를 실행하면 아래와 같이 출력된다.

Hello TS!

 

 

더 쉽게 파일 실행하는 방법

---

아래와 같이 파일을 출력할 수 있지만 

npx tsc 
node 파일이름.ts

조금 더 간결한 방법!

 

글로벌 라이브러리 설치 후

npm install -g ts-node

아래와 같이 실행하면 결과가 출력된다. 

ts-node ./hi