[ TIL ] Day 47(1) - 타입스크립트 기본 문법3

🗓️ 수업 일자 : 2025.12.1

✨ 오늘의 수업 평가 :  [ GOOD ]  오늘도 한 걸음 성장! 🌱✨🌙

 

주말에 기본 문법 정리한다고 했는데 감기에 호되게 걸려서 하나도 못하고..

겨우 정신 차리고 정리 완.. 

수업 들으랴, 지난 주 수업 내용 복습하랴.. 정말 고되다.. ㅠㅠ 

 

 

📝  오늘 배운 내용  

- 타입스크립트 Generic

- 타입스크립트의 Class

- 타입 지정 방식 : Type assertion, Type guard

- 타입 스크립트 tsconfig.json 설정

타입스크립트 로고

---

1. Generic 

 - 타입을 미리 정하지 않고, 사용할 때 설정하는 기능

 - any를 쓰지 않으면서, 사용 시 설정하여 타입스크립트를 좀 더 확장 + 정교 하게 쓰는 기술

 - 타입을 쓰는 자리에 주로 T, K, U, V 등 대문자 알파벳 한 글자로 사용

// 함수에서 사용하는 인자 타입을 미리 설정하지 않음
function hello<T>(value: T): T {
  return value;
}

// 함수 선언 시 어떤 타입을 쓸건지 선언
hello<string>("kimday"); // T = string
hello<number>(999);  // T = number

 

 

2. 타입스크립트의  Class 

자바스크립트의 Class : 객체를 만드는 "틀" 같은 역할

타입스크립트에서의 Class : JS Class + 타입 설정을 추가 한 버전

class User {
  name: string;
  age: number;

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

  sayHello() {
    console.log(`안녕 나는 ${this.name}`);
  }
}

const kimday = new User("kim", 20);
kimday.sayHello();

 

 

Class에서 타입 적용 방식

1.  필드(Field) : 클래스가 가지는 속성 타입을 명확하게 작성 가능
2. constructor : 객체 생성시 실행되는 함수의 타입도 작성 가능
3. 접근 제어자 설정(Access Modifier) : 외부에서 접근할 수 있는 범위 설정 기능
   • public : 어디서든 접근 가능, 기본 값으로 적용 됨
   • private : 클래스 내부에서만 접근 가능
   • protected : 클래스 내부 & 자식 클래스(extends)에서 접근 가능

class Account {
  public name: string;      // 누구나 접근 가능
  private balance: number;  // 내부에서만 접근 가능
  protected level: number;  // 상속받은 클래스도 접근 가능

  constructor(name: string, balance: number) {
    this.name = name;
    this.balance = balance;
    this.level = 1;
  }
}

class VIPAccount extends Account {
  upgrade() {
    this.level++; // Account의 protected 설정으로 접근 가능
  }
}

 

 

3. 타입 지정 방식 : Type assertion, Type guard

1.Type assertion
  - 타입스크립트가 추론해서 설정한 타입을 무시하고, 개발자가 타입을 지정 해 주는 방식
  - 실제 로직에서 타입이 잘못되어도, 개발자의 요구 사항대로 움직이므로 런타임 에러 위험이 있음

 

 1) as

   - 사용할 타입으로 지정하고, 해당 타입과 관련된 여러 메서드 등을 사용할 수 있음
   - 타입을 지정하지 않았거나, 혹은 any를 쓰게 되면 여러 타입이 올 수있지만 "강제"로 어떤 타입을 쓸거다 라고 지정하는 것

let someT: any = 'Hello, TypeScript';

let strLength = (someT as string).length; 
// 문자열로 지정했기 때문에 strLength의 타입이 넘버로 나옴

let strAnyLength = someT.length; 
// any 상태 그대로 쓰기 때문에, 변환한 값 strAnyLength도 any 타입으로 나옴

 

2. Type guard

   - 타입을 단언하여 선언하지 않고, 조건 검사를 통해 타입이 어떤것인지 설정할 수 있는 방식

 

 1)  type of 

   - 변수의 타입이 어떤것으로 사용 될 지 미리 알려주고, 해당 타입과 동일하게 적용 혹은 동일한 타입에만 실행하도록 설정

interface Prod {
  id: string;
  name: string;
  price: number;
}

const pd: Prod = {
  id: 'c001',
  name: '후드 집업',
  price: 129000,
};

// pd와 동일하게 pd2의 타입 적용 = 즉 object가 자동으로 들어감
const pd2: typeof pd = {
  id: 'g001',
  name: '텀블러',
  price: 25000,
};

// --------------------------------

function log(v: string | number) {
  if (typeof v === "string") {
    console.log(v.toUpperCase()); // string 확정
  }else { 
    console.log(v.toFixed(2)); // number 확정
  } 
}

log("js"); // string 판별 후 사용 
log(123); // number 판별 후 사용 
log(true); // 에러! string 또는 number 이 아니므로 안됨!

 

2) is

- 함수 리턴 시 최종 타입을 정하는 특수한 문법

function isUser(obj: any): obj is { name: string } {
  return typeof obj.name === "string";
}

if (isUser(data)) {
  data.name; // 타입 확정!!
}

 

4. 타입 스크립트 tsconfig.json 설정

1) 필수 옵션

• "module": "commonjs" = 어떤 모듈 문법을 사용해 변환 할 지 설정. Node.js 환경은 사실 CJS 환경이지만, 최근 ESM 방식이 도입되면서 Node에서 어느 정도는 알아서 변환 해 주고 있었음. 따라서 가능하면 기초 모델인 CJS(CommonJS, 구버전 모듈) 모듈을 쓰는것을 추천
• "target": "es2016" = 어떤 ECMAScript 버전으로 변환 할 지 설정, 백엔드는 ES6 또는 ES7 권장
• "esModuleInterop": true = ES 모듈을 안전하게 사용하는 방식, ESM 문법 & CJS 문법이 혼용되는 경우 정확히 변환하기 위해서 해당 설정이 필요
• "forceConsistentCasingInFileNames": true = 파일의 대소문자 구분 옵션, 윈도우 & 리눅스 파일 시스템 차이로 인한 버그 예방

2) 작성 규칙 관련 옵션

• "strict": true = 엄격한 규칙 적용
• "noImplicitAny": true = 타입 정의를 하지 않아 any 타입이 되면 오류를 내도록 함
• "strictNullChecks": true = Number가 Null이 될 가능성이 있으면 반드시 특정 방식으로 처리하라는 옵션
• "skipLibCheck": true = 설치한 패키지들의 코드 내 타입은 검사하지 않기.

3) 파일 레이아웃 옵션 : src/**/** 과 같이 Glob 패턴을 사용하여 원하는 파일 목록을 설정 가능 

• "rootDir": "./src" = TSC가 처리 할 최 상위 폴더, 즉 타입스크립트 작업 한 폴더
• "outDir": "./dist" = 변환 된 자바스크립트 파일이 위치 할 폴더
• resolveJsonModule : "test.json" = 작성한 JSON 파일을 함께 import 하기 

 

---

 

📃 내일은 뭘 배울까 🤔

- 타입스크립트 심화 문법

- 타입스크립트 유효성 검사