0041. TypeScript 공부하기1 - 타입스크립트 개론, 동작 원리, 컴파일러 옵션 설정하기(Feat. 한입 크기로 잘라먹는 타입스크립트)

필자가 자꾸 강의를 왔다 갔다 해서 독자분들이 헷갈리실지 모르겠다.

하지만, 듣다 보면 필요한 것이 생겨서 어쩔 수가 없다. 누가 처음부터 짜주는 코스를 따라가는 것이 아니라, 필요한 것을 찾아가다 보니 발생하는 시행착오 같은 상황이다. 필자가 다 듣고 정리하려고 한다.

저도 이러고싶지 않았습니다..

 

이번에 들을 인프런 강의이다.

강의제목 : 안 입 크기로 잘라먹는 타입스크립트(OneBite TypeScript)

 

1/4 정도 들은 의견으로는 강사분이 설명을 잘하신다.

강의가 전체적으로 깔끔해서 매우 좋았다.

 

자료공개는 자유!

 

 

섹션 1. 타입스크립트 개론

1강. 타입스크립트를 소개합니다.

 

1) TypeScript

2012년 오픈소스로 공개

• 타입스크립트 = 자바스크립트의 확장판
• 자바스크립트를 더 안전하게 사용할 수 있도록 "타입 관련 기능들을 추가한" 언어

 

 

2) Node.js

• 자바스크립트 구동기(런타임)
• 자바스크립트를 어디서든 실행 가능하게 만들어줌

 

 

2강. 자바스크립트의 단점과 타입스크립트

1) 자바스크립트의 한계

• 동적 타입 시스템으로 코드를 실행하면서 유동적으로 변수의 타입을 결정한다.
  - 코드의 타입 오류를 미리 검사할 수 없기 때문에 예기치 못한 오류가 발생할 수 있다.

 

2) 타입 시스템

• 모든 프로그래밍 언어는 타입시스템을 갖고 있다.
  - 값들을 어떤 기준으로 묶어 타입을 규정할 것인가?

 

타입시스템 : 언어의 타입 관련된 문법 체계

 

 

 

 

• JS의 경우, 변수의 타입들을 코드가 실행되는 도중에 결정함.
  = 변수의 타입을 우리가 직접 정의하지 않음
• 변수의 타입이 하나로만 고정되지 않음
  = 아무 타입의 값이나 자유롭게 담을 수 있음

 

3) 타입스크립트 TS

• 모든 변수에 타입을 일일이 지정할 필요 없음
  = 점진적 타입 시스템(Gradual Type System)
• 실행 전 검사를 통한 타입 안정성 확보
• 자동으로 변수의 타입을 추론함

 

 

3강. 타입스크립트의 동작 원리

컴파일

인간친화적인 프로그래밍 언어를 → 컴퓨터 친화적인 기계어로 바꿔줌

자바스크립트는 코드를 AST(추상적 문법 트리)로 바꾸고, AST를 바이트 코드로 바꾸면서 컴퓨터가 알아듣게 만듦.

 

타입스크립트는 자바스크립트의 코드를 미리 검증하는 느낌으로 실행하기 때문에 더 안전하게 JS를 사용할 수 있는 것임.

 

 

4강. Hello TS World

 

 

1) node.js 패키지 초기화

명령어 : npm init

그리고 엔터 쭉 치면 package.json이 생긴다.

 

2) types node 패키지 설치

명령어  npm i @types/node

 

이걸 설치하지 않으면 우리가 컴파일하는 과정에서 사용하는 명령어(ex : console)를 알아들을 수 없다. 따라서 반드시 설치해 주도록 하자.

 

 

3) 타입스크립트 컴파일러 설치

명령어 : npm install typescript -g (mac일 경우 앞에 sudo를 입력)

-g : 컴퓨터 전체에서 쓸 수 있도록 지정하는 것(global)

 

tsc(type script compiler) 설치 및 버전확인

명령어 : tsc -v

 

 

4) 컴파일하기

ts 파일을 만들어주고 tsc src/index.ts

 

index.js 파일이 생성된다.

 

ts에서 js로 컴파일되면서 number같은 실행에 관련 없는 type에 관한 건 없어진다.

 

 

컴파일된 JS code를 실행하기

node src/index.js

코드가 실행된다.

 

ts node

• ts컴포넌트 + 노드(실행까지)
• 명령어 : npm install ts-node -g
• JS파일을 만들지 않고 바로 결과 확인 가능

ts-node src/index.ts

 

난 왜 실행이 될까...

안된다면 여기서 확인할 것

https://ts.winterlood.com/6c9bf87f-6a8f-4e96-95b4-5e12d9f82165#c8a5f8ebaa7d4692a90e3d743bb21dea

Hello TS World - 타입스크립트 개론

 

 

5강. 타입스크립트 컴파일러 옵션 설정하기

프로젝트마다 설정 가능

 

명령어 : tsc --init

typescript 컴파일러 파일 생성(tsconfig.json)

 

 

1) include

폴더를 include 해두면 폴더 안에 여러 개의 ts 파일들이 동시에 컴파일된다.

 

2) target

컴파일 결과 생성되는 JS의 버전설정

타겟을 ES5로 잡고 컴파일하면

 

<컴파일 전>

const func = () => console.log("Hello");

 

<컴파일 후>

var func = function () { return console.log("Hello"); };

 

화살표함수가 없어짐을 볼 수 있다.

ES5에는 화살표 함수가 없기 때문

그래서 컴파일 과정에서 화살표함수가 함수표현식으로 바뀌게 된 것

 

 

 

그래서 ESNext로 변경하면 자바스크립트의 최신 버전을 사용하기 때문에 화살표함수가 있다. 그래서 컴파일 이후에도 화살표함수로 나온다.

 

 

3) module

• common js(cjs)
  const a = request(..) 식으로 모듈을 불러오고
  module.exports로 내보낸다.

 

• es module(esm)
  import a from '...'; 식으로 모듈을 불러오고
  export default 로 내보낸다

 

모듈 옵션에 따라서 출력되는 함수가 다르다.

 

같은 걸 컴파일해도 모듈 옵션에 따라 달라진다.

 

 

4) outdir

자꾸 같은 폴더에 js가 생성되면 매우 번거롭다. 따라서 생성될 곳을 지정해 주는 옵션이다.

 

 

5) strict

tyoe 검사를 얼마나 엄격하게 할지 조절하는 옵션

 

 

strict를 true로 하면 엄격한 검사가 시작됨.

위의 message는 type이 결정되지 않아서 strict true의 경우 오류라고 인식함.

대부분의 개발은 strict 모드를 true로 해놓고 진행될 것임

 

타입스크립트는 모든 모듈을 전역 모듈로 본다.

두 개의 파일이 같은 곳에 있다고 생각하고, 중복값을 잡아낸 것

 

해결방법1.

export 같은 모듈 키워드를 한 번이라도 쓰면, 해당 파일은 독립된 공간으로 본다.

 

해결방법 2. 

tsconfig.json에 moduleDetection을 force로 설정

그랬는데 적용 안되면 ctrl+shift+p 한 뒤에 restart - TS 서버 다시 시작

그러면 ts 파일을 전부 다시 검사함

 

tsc를 실행하면 js에 알아서 export { }를 넣어 놓음

 

 

package.json 파일에

"type": "module"을 넣는다.

 

 

ts node가 esm module을 이해할 수 없음

ts node는 일반적으로 common js를 사용해서 그럼

• ESM module
  ECMAScript 모듈을 지원하는 기능을 가리킴
  ECMAScript 모듈은 JavaScript 언어의 공식 모듈 시스템으로, 코드를 더 모듈화 하고 재사용 가능한 코드를 작성하는데 도움을 준다.

 

그런데 해도 해도 에러가 계속 발생했다.

그러다가 위에서 ts-node는 더 이상 동작하지 않는다는 내용이 기억났다(위쪽 참고).

 

그래서 해당 홈페이지로 허겁지겁 들어가서 npm i -g tsx를 설치했다.

https://ts.winterlood.com/6c9bf87f-6a8f-4e96-95b4-5e12d9f82165#c8a5f8ebaa7d4692a90e3d743bb21dea

Hello TS World - 타입스크립트 개론

 

패키지를 설치해 주고

명령어 : npm i -g tsx

 

버전을 검사하면 설치가 되었는지를 알 수 있다.

명령어 : tsx -v

 

tsx src/index.ts 입력해 주면 끝

실행이 되었는지는 모른다.

시키는 걸 다 했을 뿐..