TypeScript 간단 정리

해당 글은 스파르타 코딩클럽의 TypeScript 문법 종합반 강의를 바탕으로 작성되었습니다.

동적 타입 언어 VS 정적 타입 언어

• 동적 타입 언어 → JavaScript
  • 동적 타입 언어는 프로그램 실행 시 변수 타입을 결정한다.
    • 즉, 오류가 있더라도 실행을 해봐야만 오류 확인이 가능하다 → 문제 야기 가능성이 큼
  • 객체의 성질을 수시로 변경할 수 있다.
    • ex) let a = '사람' ; a = 4 string → number
  • =인터프리터 언어 → 엔진(V8, SpiderMonkey)이 코드를 한줄 씩 실행 하면서 동적으로 해석
• 정적 타입 언어 → TypeScript
  • 정적 타입 언어는 컴파일 시에 변수 타입을 체크하고 오류를 발견한다. (VScode의 경우 입력과 동시에 오류 체크)
    • 즉, 실행 전 오류를 체크해준다.
  • =컴파일 언어 → 기계어로 변환이 필요 (ex) tsc)

TSC(Compiler)

• tsconfig.json
  1. target : 컴파일 옵션을 설정
     1. javascript 버전 변환 설정
  2. module : js 모듈 형식 지정
  3. outDir : js 저장 dir 설정
  4. sourceMap : 에러 위치 찾기 용이

ReadOnly

• 객체의 속성을 불변으로 지정

  • const랑 다른점? readonly 는 class 속성에서 지정할때 사용가능 const 는 class 속성에 없어

    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 속성이므로 다시 할당할 수 없어요!

any, unknown, union

💡 어쩔 수 없이 가변적인 타입의 데이터를 저장하고 싶다면 any를 쓰기보다는 unknown을 사용! 그리고,가변적인 타입을 일일이 정의할 수 있다면 union 사용!

• any 는 타입을 쓰는 이유가 사라지는 큰 원인… 왠만하면 사용하지 맛!
• unknown
  • 타입 단언(Type Assertion)을 통해 타입 보장하여 사용가능
    • ex)as string
• union
  • 여러 타입중 한가지를 가질 수 있을 때 사용
    • type StringOrNumber = string | number;

유틸리티 타입

• Partial

  • Person interface 안에있는 속성값 중 일부만 가져올 때 사용

    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

  • 필수로 있어야함.

    interface Person {
      name: string;
      age: number;
      address?: string; 
    }
    type RequiredPerson = Required<Person>; // address 또한 필수로 있어야함.

• ReadOnly
  • 읽기온리 = 완전한 불변 객체 취급
• Pick<T,K>
  • Person interface 에서 name, age속성만 선택해서 새로운 타입 생성

    interface Person {
      name: string;
      age: number;
      address: string;
    }
    
    type SubsetPerson = Pick<Person, "name" | "age">;
    
    const person: SubsetPerson = { name: "Spartan", age: 30 };

• Omit<T,K>
  • 타입 T에서 K 속성들만 제외한 새로운 타입 생성

    interface Person {
      name: string;
      age: number;
      address: string;
    }
    
    type SubsetPerson = Omit<Person, "address">;
    
    const person: SubsetPerson = { name: "Alice", age: 30 };

객체 지향형 프로그래밍

• 클래스 , 객체 ⇒ 붕어빵틀 , 붕어빵

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) { //생성자, 온리원,초기화
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`안녕하세요! 제 이름은 ${this.name}이고, 나이는 ${this.age}살입니다.`);
  }
}

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

• 접근제한자
  • public
  • private
    • 클래스 내부에서만
  • protected

객체 지향 설계 원칙(SOLID)

• SRP(단일 책임 원칙) ⭐
  • 클래스는 하나의 책임만 가져야 한다.
  • ex) 유저 클래스를 정의 했다고 하면 해당 서비스 하위에는 유저와 관련된 액션만 해야한다.
• OCP(개방 폐쇄 원칙)
  • 확장엔 열려있고 수정엔 닫혀있고
  • 기존 코드 변경안하고 해당 코드 가져다가 확장해서 쓰라~
• LSP(리스코프 치환원칙)
  • 서브타입은 기반이되는 슈퍼타입을 대체할 수 있다.
  • 즉, 부모 클래스는 모든 자식클래스를 아우르는 클래스로 구성이 되어야 한다~
• ISP(인터페이스 분리 원칙)
  • 너무 넓은 범위의 인터페이스는 지양하자
  • 다른 인터페이스에 영향이 갈 수있으므로
• DIP(의존성 역전 원칙)
  • 상위 인터페이스에 의존해야한다.