타입스크립트를 기존에도 프로젝트에 적용하며 사용해왔지만, 기초 지식이 조금 부족한 것 같아 강의를 구입 후 수강하기로 하였다.

이렇게 강의를 듣는 내용들은 다 벨로그에 정리하여 업로드 할 것이다.

---

▪️ 타입 스크립트의 개론

타입스크립트 = 자바스크립트 확장판

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

자바스크립트는 원래 아주 간단한 상호작용 정도를 처리하기 위해 개발되었다.

 - 유연한 문법
 - 버그 발생 가능성 높음
 - 자유로움

이러한 단점을 보완하기 위한 타입스크립트를 사용하는 것이 좋다.

✴︎ 예시

Javascript

let a = 1;
let b = 2;

console.log(a + b);

Typescript

let a:number = 1;
let b:number = 2;

console.log(a + b);

➡️ 이 두 예시의 차이는 Typescript에 타입(number)이 정의되는 문법이 추가되면서 해당 a 와 b 에는 숫자만 선언 가능.

추가

Node.js 자바스크립트를 어디서든 실행 할 수 있게 도와주는 구동기. 즉, 이는 이제 무엇이든 자바스크립트로 만들 수 있음
원래는 웹에서만 가능

---

▪️ 자바스크립트의 한계점과 타입스크립트

모든 프로그래밍 언어에는 타입시스템이 존재

타입시스템이란 ?

프로그래밍 언어를 사용할 때 타입과 관련하여 지켜야 하는 규칙들을 모아둔 체계. 즉, 언어의 타입 관련된 문법 체계

• 언어에서 사용할 수 있는 여러가지 값들을 어떤 기준으로 할 건지 타입 결정
• 코드 타입을 언제 검사할지
• 어떻게 타입 검사할지

타입시스템 종류

[1] 정적 타입 시스템 : 실행전

코드 실행 이전 모든 변수의 타입을 고정적으로 결정
엄격하고 고정적

ex) C, Java

String a = "hello";
int b = 123;

int c = a * b;

이렇게 쓰면 마지막 코드에서 타입 오류가 발생하는데, 정적 타입 시스템이라 에디터 상에서 바로 알려줌

[2] 동적 타입 시스템 : 실행중

코드를 실행하고 나서 그때마다 유동적으로 변수의 타입을 결정함
자유롭고 유연함

ex) Python, Javascript

let a = "hello";

Javascript에서는 변수의 타입들을 코드가 실행되는 도중에 결정. 즉, 변수의 타입을 직접 정의하지 않음

let a = "hello";
a = 19970107;

변수의 타입이 하나로만 고정되지 않음. 즉, 아무 타입의 값이나 자유롭게 담을 수 있음

let a = "hello";
a = 19970107;

a.toUpperCase()

a에는 마지막으로 숫자(number)타입이 선언되었고, a.toUpperCase() 문자열에 사용하는 함수 실행.
위 코드는 실행은 되지만 터미널상에 type 에러 발생.

타입스크립트는 정적 + 동적

let a: number = 1;

a.toUpperCase()

오류 발생 : a 는 타입으로 숫자 선언 하고 toUpperCase 는 문자열에만 사용 가능한 함수

let a = 1;

a.toUpperCase()

타입 지정을 하지 않아도 오류 발생 (모든변수에 타입을 일일이 지정할 필요 없음)
변수에 담기는 초기값으로 알아서 추론 = 점진적 타입 시스템

타입시스템 정리

---

▪️ 프로그래밍 언어의 동작 방법

사람이 작성한 프로그래밍 언어를 컴퓨터가 이해하기 쉬운 기계어로 변환(컴파일) 하여 컴퓨터가 실행

이 컴파일 하는 친구를 컴파일러 라고 한다

프로그래밍 언어 : Javsxcript - 기계어 : 바이트 코드 관계로 보면 된다

• AST 는 코드의 공백이나 주석 탭과 같이 코드 실행에 관계없는 요소들은 전부 제거하고 트리형태의 자료구조로 자료를 쪼개서 저장해놓은 형태.

• 타입스크립트의 경우 중간에 타입검사가 있으며 거기서 실패가 되면 컴파일 자체도 실패가 된다

• 타입 검사 성공 후 자바스크립트로 변환할 때 타입과 관련된 코드들은 전부 사라진다

  
  // 처음 ts 파일 작성 
  let a: string = '1';
  
  a.toUpperCase()
  
  // ts → js 로 변환 시
  let a = '1';
  
  a.toUpperCase()

---

▪️ TS 시작

프로젝트 초반 설정 ...

1) nodejs 패키지 초기화 - npm init

2) npm i @types/node

• Node.js의 타입 정의 파일을 설치합니다.

  - @types/node는 TypeScript에서 Node.js 환경(예: fs, path, process 같은 내장 모듈)을 쓸 때 필요한 타입 정보를 담고 있는 패키지입니다.
  - 자바스크립트에는 타입이 없으니까, TypeScript가 “이 함수는 어떤 매개변수를 받고, 어떤 값을 반환하는지”를 알 수 있도록 **타입 선언(.d.ts 파일)**을 따로 설치해 주는 겁니다.
  - 설치 후에는 Node.js 관련 API를 TypeScript 프로젝트에서 자동 완성과 타입 검사를 받을 수 있습니다.

3) npm i typescript -g

• TypeScript 컴파일러(tsc)를 전역(global) 으로 설치합니다.

• -g 는 컴퓨터 전체에 설치 / mac 은 앞에 sudo 붙이기

  - typescript 패키지는 tsc라는 명령어를 제공하는데, .ts 파일을 .js 파일로 변환(트랜스파일)해 줍니다.
  - -g 옵션은 전역 설치를 의미합니다. 즉, 특정 프로젝트 안이 아니라 내 PC 전체에서 공통으로 쓸 수 있게 됩니다.
  - 이렇게 설치해 두면 터미널에서 tsc 명령을 바로 실행할 수 있습니다.

컴파일러 사용

컴파일 하는 방법은 터미널에 tsc src/index.ts 이런 식으로 tsc + 경로/파일명.확장자

📁 index.ts

console.log("Hello TypeScript");
const a: number = 1;

이렇게 작성 후 컴파일 하면 해당 파일 명과 동일한 js 파일이 생성됨

📁 index.js
그 js 파일 내부에는..

console.log("Hello TypeScript");
var a = 1;

이처럼 js 파일에서는 ts 파일에서 선언되었던 number 라는 타입은 사라짐

실행

이후 컴파일 완료된 자바스크립트를 실행하려면 ...

node src/index.js 하면 터미널에 콘솔 찍힘

컴파일과 실행을 한 번에

sudo npm i ts-node -g : 이건 컴파일과 실행을 한 번에 해주는 패키지이다

ts-node src/index.ts 를 터미널에 입력하면 중간 컴파일 단계(js 파일 생성) 생략하고 바로 터미널에 콘솔 찍힘

---

▪️ 컴파일러 옵션 설정하기

프로젝트 마다 퍼스널적으로 설정 가능

tsc --init 하면 tsconfig.json 파일 생성됨

• tsconfig = 타입스크립트 컴파일러의 설정 파일

1. "include": ["src"]

컴파일 할 범위를 설정하기

이전에 tsc src/index.ts 이렇게 컴파일 하였다면, 위를 설정해주면 tsc만 입력해도 컴파일 됨

"include": ["src"] : src 안에 있는 모든 파일을 컴파일 해줘 라는 뜻

2. target

타입스크립트를 컴파일 해서 만들어지는 자바스크립트의 버전을 설정

"compilerOptions": {
    "target": "ES5"
  },

compilerOptions : 타입스크립트를 자바로 변환하거나 타입검사 등 상세한 옵션을 설정할 때는 compilerOptions 안에 설정

이렇게 설정 후

📁 index.ts

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

화살표 함수로 써서 컴파일 (tsc) 해주면

📁 index.js

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

함수 표현식으로 변경되어 컴파일됨

• ES5 에는 화살표 함수가 없기 때문
• ESNext 라는 자바스크립트의 최신 버전으로 해주면 컴파일도 화살표 함수로 됨

3. module

각 모듈 시스템 차이

CommonJS

const a = require(..)
module.exports

ESNext

import a from '...'
export default

[1] CommonJS 로 설정

📁 hello.ts

export const hello = () => {
  console.log("hello");
};

📁 index.ts

import { hello } from "./hello";

console.log(hello);

➡️ 이렇게 작성 후 컴파일(tsc) 해주면 ...

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.helloWithName = exports.hello = void 0;
const hello = () => {
    console.log("hello");
};
exports.hello = hello;
const helloWithName = () => {
    (0, exports.hello)();
    console.log("my name is 이정환");
};
exports.helloWithName = helloWithName;

[2] ESNext

모듈을 ESNext로 설정 후 똑같은 파일을 다시 컴파일 해주면 ...

export const hello = () => {
	console.log ("hello");
};

import { hello } from "./hello";
console.log(hello);

ES 모듈 시스템을 사용하는 자바스크립트 코드로 변환됨

4. outDir

tsc로 컴파일하면 디렉토리에 js 파일이 생기는데, 이를 사용하면 컴파일 결과 생성될 자바스크립트 파일이 어디 생성되었으면한다를 설정 가능

"outDir": "dist"해주면 src 디렉토리가 아닌 dist 디렉토리에 생성됨

5. strict ⭐️

타입 검사시 얼마나 엄격하게 할지, 타입 스크립트에서 매개변수는 타입을 직접 지정하길 권장

export const hello = (message) => {
  console.log("hello " + message);
};

• "strict": true 이걸 설정하지 않으면 오류가 안 나지만 설정하는 순간 타입 오류 발생
• 매개변수 타입이 뭐가 될지 모르는 상황이기 때문 -> 초기 값이 없어 추론조차 할 수 없기 때문

6. moduleDetection

스코프: 이름이 공유되는 공간을 말 한다

// hello.ts

const a = 1;

// index.ts

const a = 1;

이렇게 작성하면 한 스코프에 같은 선언이 두 번 되어 오류가 뜬다 [ 블록 범위 변수 'a'를 다시 선언하세요. ]

• 자바스크립트에서는 다른 파일은 다른 모듈로 취급받기 때문에 상관 없었음
• 타입스크립트는 모든 타입스크립트파일을 전역 모듈로 봄

해결방법 1)

export {} 혹은 import 같은 모듈시스템을 사용하는 키워드를 파일 내부에 1번 이상이라도 작성해주면 독립된 공간으로 바라봄 = 격리된 모듈로 봄

// hello.ts

const a = 1;

// index.ts

const a = 1;

export {};

해결방법 2)

moduleDetection

타입스크립트의 각각의 파일을 어떤 모듈로 감지할 것이냐

"moduleDetection": "force"

이걸 넣어주면

// hello.ts

const a = 1;

// index.ts

const a = 1;

이렇게 작성하면 컴파일 시

// hello.js

const a = 1;

export {};

// index.js

const a = 1;

export {};

export {}; 이게 자동으로 들어가 있음

• 만약 "module": "commonjs" 라면, exports 와 같은 commonjs 형태로 컴파일 됨

⚠️ 만약 이렇게 했는데 오류가 안 없어진다면 타입 검사를 다시 수행 하도록 해야 함

[ 타입 검사 재수행 방법 ]
command + shift + p 누른 후 restat 치면 TS 서버 다시 시작 클릭

7. ts node

module 이 "module": "CommonJS" 가 아니라 "module": "ESNext" 라면...

ts-node src/index.ts 실행 시 오류 발생

[1]

오류

• export {} 이해 못함
• 노드에서 오류 발생, ES module을 로드하려면 "type": "module" 을 packeage.json 에 정의를 해라

해결

packeage.json에 "type": "module" 추가 해주기

[2]

오류

• ts 파일 자체를 읽지 못함
  ts-node 가 es 모듈 시스템을 해석하지 못함

해결

tsconfig.json 에 아래 추가

"ts-node": {
		"esm": true
	},