9주차 (TypeScript)

초기 세팅 방법

// 1. node js로 세팅 
npm init -y

// 2. 타입스크립트화
tsc --init --rootDir ./src --outDir ./dist --esModuleInterop --module commonjs --strict true --allowJS true --checkJS true
	// 1. 프로그램의 소스 파일이 들어가는 경로는 src 디렉토리
	--rootDir ./src
	// 2. 컴파일이 된 파일들이 들어가는 디렉토리는 dist 디렉토리
	--outDir ./dist 
	// 3. CommonJS 방식의 모듈을 ES모듈 방식의 import 구문으로 가져오기
	--esModuleInterop
    
// 3. package.json script 변경하기
"scripts": {
	"start": "tsc && node ./dist/index.js",
	"build": "tsc --build",
	"clean": "tsc --build --clean"
},

// 4. `src 디렉토리 생성`

// 5. `src에 index.ts 파일 생성`

// 6. 코드 작성 완료 이후
`npm run build`
`npm run start`

 

TypeScript [[컴파일러]]: TSC 

1. TSC는 TypeScript 언어를 JavaScript로 변환해줌

2. 주요 명령어
	1) tsc --init: [[tsconfig.json]]이 생성되는 명령어
	2) tsc index.ts: index.ts를 컴파일
	3) tsc src/* ts: src 디렉토리 안에 있는 모든 TS 파일을 컴파일
	4) tsc index.js --declaration --emitDeclarationOnly: @type 패키지를 위한 d.ts 파일 생성

d.ts 파일

1. JavaScript 라이브러리도 TypeScript 코드에서 사용할 수 있게 해주는 파일

2. TypeScript 타입 정의 파일

3. @types 라이브러리: 외부 라이브러리에 대한 타입 정보 제공

기본 타입

1. boolean: 참, 거짓을 나타냄(ex: 켜짐, 꺼짐을 표현하고 싶을 때)

2. number

3. string

4. 배열: 기본타입에 []가 붙은 형태(`ex: const numbers: number[]`)

5. 튜플: 서로 다른 타입의 원소를 순서에 맞게 가질 수 있는 특수한 형태의 배열
    => ex: const person: [string, number, boolean]

 

6. enum: 열거형 데이터 타입
   1) 다양한 상수를 이해하기 쉬운 문자열 이름으로 접근하고 사용할 수 있게 하는 타입
   2) 값이 설정되어 있지 않으면 0으로 시작함(0, 1, 2..)

// 코드 예시
enum UserRole {
USER, // 0임
ADMIN = "ADMIN",
EDITOR = "EDITOR"}

 

7. readonly
	1) 객체의 속성을 불변으로 만드는 데 사용
	2) [[readonly 코드예시]]
	3) const 처럼 객체 변경이 불가능하게 만들어줌
    
// 코드 예시
class Person { 
  readonly name: string;
  readonly age: number;

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

const person = new Person('Spartan', 30);

console.log(person.name);  // 출력: 'Spartan'
console.log(person.age);   // 출력: 30

person.name = 'Jane';  // 에러: 'name'은 readonly 속성이므로 다시 할당할 수 없음
person.age = 25;       // 에러: 'age'은 readonly 속성이므로 다시 할당할 수 없음

 

8. any
	1) 모든 타입의 최상위 타입 = 어떤 타입의 값이든 저장할 수 있음
	2) [[any 코드예시]]
	3) 코드의 안정성과 유지 보수성을 저해할 수 있기 때문에 가급적 사용을 하지 않아야 함
    
// 코드 예시
let anything: any;
anything = 5; // 최초에는 숫자를 넣었지만
anything = 'Hello'; // 문자열도 들어가고요
anything = { id: 1, name: 'John' };

 

9. unknown
	1) any와 같지만 값을 다른 타입의 변수에 할당하려면 명시적으로 타입을 확인해야 함
    
// 코드 예시
let unknownValue: unknown = '나는 문자열이지롱!';
console.log(unknownValue); // 나는 문자열이지롱!

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

 

10. union 타입
	1) 여러 타입 중 하나를 가질 수 있는 변수를 선언할 때 사용
	2) `type StringOrNumber = string | number` 처럼 사용 가능

enum과 object literal 비교

1. object literal은 const로 정의하며, 키 + 벨류로 구성된 객체를 정의하는 방식

2. 장점: 멤버의 값이나 데이터 타입을 마음대로 변경할 수 있음

유틸리티 타입

// `Partial<T>`: T의 모든 속성을 선택적으로 만듦

interface Person {
  name: string;
  age: number;
}

const updatePerson = (person: Person, fields: Partial<Person>): Person => {
  return { ...person, ...fields };
};

const person: Person = { name: "Spartan", age: 30 };
const changedPerson = updatePerson(person, { age: 31 });

 

// `Required<T>`: 모든 속성을 필수적으로 만듦

interface Person {
  name: string;
  age: number;
  address?: string; // 속성 명 뒤에 붙는 ?
}

 

// `Readonly<T>`: 모든 속성을 읽기 전용으로 만듦

interface DatabaseConfig {
  host: string;
  readonly port: number; // 인터페이스에서도 readonly 타입 사용 가능해요!
}

const mutableConfig: DatabaseConfig = {
  host: "localhost",
  port: 3306,
};

// 리드온리 예제
const immutableConfig: Readonly<DatabaseConfig> = {
  host: "localhost",
  port: 3306,
};

mutableConfig.host = "somewhere";
immutableConfig.host = "somewhere"; // 오류!

 

// `Pick<T,K>`: K 속성들만 선택하여 새로운 타입을 만듦

interface Person {
  name: string;
  age: number;
  address: string;
}

type SubsetPerson = Pick<Person, "name" | "age">;

const person: SubsetPerson = { name: "Spartan", age: 30 };

 

// `Omit<T,K>`: K 속성들만 제외하여 새로운 타입을 만듦

interface Person {
  name: string;
  age: number;
  address: string;
}

type SubsetPerson = Omit<Person, "address">;

const person: SubsetPerson = { name: "Alice", age: 30 };