TypeScript 간단 정리

dev.horang🐯·2024년 6월 1일
2
post-thumbnail

해당 글은 스파르타 코딩클럽의 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(의존성 역전 원칙)
    • 상위 인터페이스에 의존해야한다.
profile
좋아하는걸 배우는건 신나🎵

0개의 댓글