[TIL]230725

TypeScript

배우는 이유

• JS는 유연하기 때문에 예기치 않은 버그가 나타날 수 있고, 이에 따라 유지보수가 어려워질 수 있다.
  (JS는 실행시간에 타입을 지정해준다.)
  -> TS를 사용하면 컴파일 시 변수를 지정해주기 때문에 변수 type이 명확해지고 객체지향 프로그래밍 시에 class가 좀 더 명확해진다.
• 타입이 명확해지기 때문에 코드 자동완성을 더 쉽게 사용할 수 있다.

TypeScript Compiler

JS(인터프리터 언어)는 기계어로 변환할 필요가 없다! 왜냐하면, 브라우저에서 처리를 하기 때문이다.

• 생성
  tsc --init
• 파일.ts 코드 컴파일
  tsc 파일.ts
  디렉토리 내에 있는 모든 TS파일을 컴파일 하고 싶을 때?
  → tsc 디렉토리이름/*.ts
• type 패키지를 위한 .d.ts 파일 생성
  tsc index.js --declaration --emitDeclarationOnly

  하나씩 명령어로 실행할 수 있지만, 귀찮으니 tsconfig.json을 활용하자

.d.ts

JS라이브러리를 수정하지 않고 그대로 사용할 수 있다.
-> JS를 import하여 실행ok

JS 라이브러리를 TS로 사용해보기

npm init -y : package.json 생성
tsc --init : tsconfig.json 생성

• tsconfig.json 주석 활성화

  "allowJs": true // TypeScript 프로젝트에 JavaScript 파일 허용 여부
  "checkJs": true // JavaScript 파일 타입 체크 여부

• test.js

  /** 주석으로 표현해둔 것(최소한의 정보를 JS에 적는 것이다.)
   * @param {number} a
   * @param {number} b
   * @returns {number}
   */
  export function add(a, b) {
    // export를 넣지 않으면 import 할 수 없는 것 아시죠?
    return a + b;
  }

npx tsc test.js --declaration --allowJs --emitDeclarationOnly --outDir types

→ d.ts 생성 (test.js를 기반으로 생성된 Typescript)

• 실행해보기 root위치에 파일.ts를 생성하여 생성되어있는 JS코드를 import해서 실행해볼 수 있다! ex)

  import { add } from "./test";
  console.log(add(1, 2));
  // node 명령어로 실행
  // npx ts-node foo.ts

실습

프로젝트 세팅
1. package.json 생성

npm init -y

1. typescript 생성

tsc --init --rootDir ./src --outDir ./dist --esModuleInterop --module commonjs --strict true --allowJS true --checkJS true

• --rootDir ./src
  • 프로그램의 소스 파일이 들어가는 경로: src 디렉토리
• --outDir ./dist
  • 컴파일이 된 파일들이 들어가는 디렉토리는 dist 디렉토리
• --esModuleInterop
  • CommonJS 방식의 모듈을 ES모듈 방식의 import 구문으로 가져올 수 있다.

1. package.json의 scripts 수정

   "scripts": {
       "start": "tsc && node ./dist/index.js",
       "build": "tsc --build",
       "clean": "tsc --build --clean"
   },

2. src 디렉토리 생성

3. 실행

   npm run build

   → typescript 빌드 (dist라는 폴더에 결과물이 빌드되어 있다. 설정에 "outDir": "./dist", 이라고 되어있기 때문)

   npm run start

화살표 함수

const calculateAverage = (매개 변수의 타입): 리턴타입 => {
  const sum =
    student.scores.korean +
    student.scores.math +
    student.scores.society +
    student.scores.science +
    student.scores.english;

  return sum / Object.keys(student.scores).length;
};

TypeScript Type

기본 타입

1. boolean

2. number

3. string

4. list

5. tuple
   서로 다른 타입의 원소를 순서에 맞게
   ex) const person: [string, number, boolean] = ['Spartan', 25, false];

6. enum
   열거형 data type
   Number, String타입만 할당 가능
   ex)

   enum UserRole {
     ADMIN = "ADMIN",
     EDITOR = "EDITOR",
     USER = "USER",
   }
   
   enum UserLevel {
     NOT_OPERATOR, // 0
     OPERATOR // 1
   }

const, readonly

불변성을 보장해준다.

불변성이란?

→ 객체 생성 후 그 상태를 변경할 수 없는 것

readonly

객체의 속성을 불변으로 만드는데 사용되는 키워드

class Person { // 클래스는 다른 강의에서 자세히 설명해드릴게요!
  readonly name: string;
  readonly age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

⇒ person.name이나 person.age로 재할당 하려고 하는 경우 error 발생

가변 타입

any

아무거나 넣을 수 있음

let anything: any;

NoSQL의 경우에는 어떤 값이 들어올지 모르기 때문에(가변적) 해당 타입을 사용한다.

unknown

any와 유사하지만 더 안전하다.

unknown으로 선언한 변수는 다른 타입의 변수에 할당하려면 명시적으로 타입을 확인해야 한다.

let unknownValue: unknown = '나는 문자열이지롱!';
console.log(unknownValue); // 나는 문자열이지롱!

let stringValue: string;
stringValue = unknownValue; // 에러 발생! unknownValue가 string임이 보장이 안되기 때문!
stringValue = unknownValue as string; // 단언해줌 
console.log(stringValue); // 나는 문자열이지롱!

1) 타입 단언
위 코드처럼 type을 단언해주는 것

2) typeof
ex) 타입을 미리 확인한 후 unknown 타입의 변수를 string에 할당

union

여러 타입 중 하나를 가질 수 있는 변수를 선언할 때 사용
| 연산자(or)를 사용하면 된다.
ex) number, string 둘 다 사용하고 싶을 때

type StringOrNumber = string | number;

새로운 타입들은 기존의 타입에서 살짝 변형된 것이기에 어렵지 않았지만, 컴파일러가 어떻게 실행되는지 한번 순서를 그려보면서 내용을 정리할 필요가 있다.