[Inflean 장기효] 입문강의 -문법 이전 내용-

교안 : 타입스크립트 핸드북 (joshua1988.github.io/ts/)

 

타입스크립트란?

자바스크립트에 타입을 부여한 언어이다 

자바스크립트와는 다르게 브라우저에서 실행하기 위해 파일을 한번 변환해주는 과정(컴파일)이 필요하다 

 

타입스크립트는 왜 써야하는가?

JS를 써서 비동기 처리를 할 때  [object Object] 이런 데이터들을 몇번 보았는데 이러한 부분을 타입스크립트를 쓴다면 좀 더 명확하게 연결 할 수 있다. 또한 오탈자로 인해서 정보를 불러오지 못하는 경우(undefined) 에러로 연결 될 수 있다 이런 부분도 타입스크립트를 통해 보완 할 수 있다.

코드 상으로 알 수 없는 데이터의 모습을 파악 할 수 있다. (에러의 사전 방지)

 

브라우저를 실행해서 data 값을 보고 그것을 기반으로해서 코드를 작성하는 반면에 타입스크립트를 사용한다면 코드를 작성하면서 가지고있는 속성값을 확인을 할 수 있기때문에 에러의 사전방지부분에서는 강점이 있는 것 같다 

(근데 저거 다 일일히 다 타입이랑 프로퍼티랑 지정하고있으면 오래 걸리고 힘들 것같다는 생각이 드는데..)

그레서 타입스크립트를 쓰는구나 일일히 다 저렇게 쓰는게 JSdoc을 이용해서 타입스크립트처럼 흉내를 내는 방법이라고 보면 된다.

 

function sum(a : number, b : number): number {
	return a + b;
}
sum (10, 20) // sum(10, "20") 로 호출한다면 빨간줄로 그여있다.

이렇게 쓰는 것은 좀 간단히 쓸 수 있어서 좋은 것 같다.

 

제공하는 API의 확인이 TS에서 더 잘 확인 할 수 있다. 

자동완성 기능에서 JS는 쓸데 없는 것도 많이 뜨는데 TS의 경우에는 필요한 method만 뜨는 느낌이다.

vs코드의 인텔리센스 기능인데 TS에서 좀 잘 되는 것 같다.

 

JSDoc을 이용해서 params를 선언하듯이 JS에서 타입을 선언해서 TS처럼 사용하는 방법이 있다.

/**
* @param {number} a
* @param {number} b
*/
function sum(a, b) {
	return a + b;
}

sum(10, "20") // 아쉽게도 JS에서는 이부분에서 빨간줄이 나오지 않는다
// @ts-check  // 를 사용하면 타입스크립트처럼 빨간줄이 나온다 (주석도 포함한 문구임)

 

 

---

 

타입스크립트로 프로젝트를 만들어보자

1. 확장자는 ts를 사용한다 ex) counter.ts

2. ts파일은 브라우저에서 바로 실행할 수 없다 브라우저가 인식을 못하기 떄문이다 그렇기 때문에 컴파일을 통해 ts파일을 js파일로 변환해서 브라우저가 인식할 수 있게 해주어야 한다.

3. 노드가 설치되어있는지 확인을 한다.

4. npm i typescript -g 를 이용해서 TS를 설치한다. (tsc 라고 불리는 TScompiler를 설치해서 사용하기 위해서)

5. tsc index.ts 를 명령어로 치면 index.ts를 js로 변환하겠다는 명령어로써 하면 파일 옆에 index.js가 생성이 된다. 이걸 브라우저에서 실행하면 된다.

 

타입스크립트 설정파일

tsc를 사용해서 컴파일 하는 것을 매번하는 것이 아니라 모듈번들러를 통해서 하면 된다. (webpack)

tsc로 컴파일을 할 떄 부가적인 옵션을 줄 수 있다 이때 파일이 tsconfig.json을 만들어서 key value 형태로 정의를 하면 된다

1. "compilerOptions" : {"allowJs" : true, "checkJs" : true, "noImplicitAny" : true}

컴파일 할 때 부가적인 옵션이 프로젝트에서 자바스크립트를 허용한다, @ts-check와 비슷한 역할을 한다, 모든 타입에 대해서 최소한 any라고 하는 기본적인 타입이라도 넣어야한다.

크롬에서 타입스크립트 공식문서에서 확인해볼 내용은 Tools 에서 오른쪽에 TSConfig referance가 있으니 여기서 속성을 확인해서 그떄그떄 찾아서 확인하자

 

 

공식문서의 playground를 알아보자