intro 왜 타입스크립트?
JS는 지저분해보이는 경향이있다.
물론 잘 짜고 하면 좋게 보이고, 관리하기 쉬울수있다.
하지만
TypeScript를 사용하면
버그를 줄이고 쉬운 유지보수가 가능해진다 그러면 질 좋은 코드가 된다.
TypeScript는 자바스크립트의 Superset
타입스크립트는 자바스크립트를 기반으로한 언어라는 얘기이다.
타입스크립트는 자바스크립트를 사용하고, 모든 기능 포함
자바스크립트에 포함되지 않은 새로운 기능이 포함되어있다.
TypeScript의 몇가지 특징
Type 표기
JS에서 let,const 를 썻다면
자바나 C++을 썻다면 변수타입 표기가 익숙하다.
몇가지 예제를 보자
//js
function add(a,b){
return a+b;
}
console.log(add('3','5'));
// 결과는 "35" 가 된다.//ts
function add(a:number , b:number){
return a+b;
}
console.log(add('3','5'));
// 코드가 실행되기전에 컴파일 단계에서 error객체 지향적이다.
class, interface , constructor,public, private 등등 ..
객체지향적 Access Modifier (이것이 public, private 를 의미한다. 접근 제어자)
등 객체지향의 프로그래밍 특성을 지원한다.
Compile 타임 오류
컴파일 에러를 잡아낼수있다.
JS 만 배웠더라면 익숙하지 않는 내용이지만 , C를 시작으로 학습이 되어있다면
컴파일 과정을 거치면 기계어로변환한다 라는 정도만 기억하면 어렵지않게 넘어갈수있다.
한마디로 인터프리터언어와 컴파일언어로 분류하는데
한줄씩 읽어나가느냐 아니면 한뭉텅이를 미리 변환하고 쫙 막힘없이 읽느냐 차이이다.
컴파일 : 어떤언어의 코드를 다른언어로 바꿔주는 변환 과정이다.
타입스크립트는 JS환경에서 읽힐수 없다.
한마디로 컴파일과정을 거쳐야한다.
그래서 타입스크립트 개발환경을 구축해야한다.
타입스크립트는 프로그래밍 언어인 동시에 컴파일러!!이다.
TypeScript 개발환경
VS코드등 , IDE 사용하면 된다.
많은 라이브러리등 유저사이 또는 커뮤니티에서 활발하다.
익스텐션 추천 :
- Prettier - Code formatter
- ESLint
- Path Intellisense
- Bracket Pair Colorizer
- Material Icon Theme
등등..
타입스크립트 설치
구글 -> typescript 검색 -> 공식사이트 -> Install Locally
NPM을 통해서 설치 가능하다.
NPM은 Node.js의 한부분이다.
Node.js환경이 어느정도 구축되어있다면 편하게 NPM을 사용하자.
npm install -g typescript
-g 는 global의 약자.
mac사용자유저는 sudo 써야할것이다.
타입스크립트 컴파일러겸 언어가 설치가 되어있다.
-> TypeScript Compiler : tsc 명령어를 사용해서 타입스크립트 코드를 자바스크립트 코드로 변환 할수있다.
확장자는 .ts
타입스크립트는 자바스크립트를 기반으로한 언어.
자바스크립트에서 유효한 코드는 타입스크립트에서도 유효하다.
-> 리펙토링 가능하다!! 아닐까.
파일 테스트를 한번 해보자
Build My First TS File
index.html
app.ts 를 구성해보자.
function logName (name:string){
console.log(name);
}
logName('Shin');vscode 터미널을 열고
tsc app.ts
app.js가 생성된다. (JS코드로 변환되어있다.)
Node를 통해서 실행해볼수있다.
물론 chrome으로 해서 브라우저로 테스트 해볼수도있겟다.
ts파일에 함수명을 보면 빨간줄이 가있는것을 볼수있다.
VSCODE의 버그같은것이다.
해결방법 : ts configuration 파일을 추가해주는것.
tsc --init 하면 tsconfig.json 파일이 추가된다.
ts파일을 수정하면 js파일이 실시간으로 변경되지않는다.
매번 컴파일할수없으니
-w 옵션을준다.
Watch 감시하다.
tsc -w app.ts
Starting compilation in watch mode...
바로(실시간) 변경된다.
