JS & TS/TypeScript

[TypeScript] Class

Bay Im 2024. 2. 13. 16:51
  • 클래스 메서드
    • 독립 함수와 동일한 방식의 메서드
    • 매개변수 타입이나 기본 값을 지정하지 않으면 any 타입을 기본 값으로 가진다.
    • 메서드를 호출하려면 허용 가능한 수의 인수가 필요하다. 재귀 함수가 아니라면 대부분 반환 타입 유추 가능
    • 메서드 호출 시 올바른 타입의 인수가 올바른 수로 제공되는지 확인하기 위해 타입 검사 실시
  • 클래스 속성(attribute)
    • 클래스의 속성을 읽거나 쓰려면 명시적으로 선언해야 한다.
  • 클래스 속성 - method
    • 모든 prop은 초기화 또는 정의해야 한다. (! 또는 ?는 제외)
  • 클래스 속성 - 초기화 검사
    • StrictNullCheck On에서 TS는 undefined 타입으로 선언된 각 속성이 생성자에서 할당되었는지 확인
    • 초기화하지 않았다는 것은 undefined이므로 생성자에서라도 초기화 해야 한다.
    • StrictNullCheck가 없다면 타입 시스템이 undefined 값에 접근할 수 없다고 말할지라도 클래스 인스턴스는 undefined 값에 접근할 수 있다.
  • 클래스 속성 - 확실하게 할당된 속성
    • 엄격한 초기화 검사를 적용하면 안되는 속성인 경우 변수 이름 뒤에 ‘!’를 추가해 검사를 비활성화하도록 하기
    • TS 속성이 처음 사용되기 전에 undefined 값이 할당됨
    • 또는 생성자에서 초기화
      • constructor(변수: string[]) { this.변수 = 변수; }
  • 클래스 속성 - 선택적 속성
    • 선언된 속성 이름 뒤에 ?를 추가해 속성을 옵션으로 선언
      • class 클래스 { 변수?: string; }
    • ‘ | undefined’ 를 포함하는 유니언 타입과 동일하게 작동
  • 클래스 속성 - 읽기 전용 속성 (readonly)
    • 선언된 속성 이름 앞에 readonly 키워드를 추가해 속성을 읽기 전용으로 선언
      • class 클래스 {
        	readonly 변수: string;
        	constructor(변수: string) {
        		this.변수 = 초기화값;
        }
    • readonly로 선언된 속성은 선언된 위치 또는 생성자에서 초기값만 할당할 수 있다. (다른 모든 위치는 읽을 수 만 있고 쓸 수 없음)
    • readonly는 타입 시스템에만 존재하고 JS로 컴파일할 때는 삭제된다.
  • 클래스 속성 - readonly literal
    • 값의 타입이 가능한 좁혀진 리터럴 타입으로 유추
      • ex)
      class 클래스 {
      	readonly 변수1: string = 초기화값;
      	readonly 변수2 = "Hello";  // Literal Type
      }
      
      // 변수1의 타입은 string
      // 변수2의 타입은 "Hello"
      
  • 타입으로서의 클래스
    • TS는 클래스의 동일한 멤버를 모두 포함하는 모든 객체 타입을 클래스에 할 수 있는 것으로 간주
    • TS의 구조적 타이핑이 선언되는 방식이 아니라 객체의 형태만 고려하기 때문
  • 클래스와 인터페이스 (implements)
    • 클래스 이름 뒤에 implements 키워드와 인터페이스 이름을 추가하면 클래스의 인스턴스가 해당 인터페이스를 준수한다고 선언할 수 있다.
      • class 클래스 implements 인터페이스 { … }
    • 부모 클래스는 선언만 하며, 자식 클래스는 부모의 기능을 다시 정의해서 사용해야 한다. (오버라이딩)
  • 클래스와 인터페이스 - 다중 인터페이스 구현
    • 클래스에 구현된 인터페이스 목록은 개수 제한없이 인터페이스를 사용할 수 있다. (다 상속 가능)
      • class 클래스 implements 인터페이스1, 인터페이스2 { … }
    • 하지만 두 개의 충돌하는 인터페이스를 구현하는 클래스를 선언하려고 하면 클래스에 하나 이상의 타입 오류 발생
  • 클래스 확장 (extends)
    • 다른 클래스를 확장하거나 하위 클래스를 만드는 자바스크립트 개념에 타입 검사 추가
      • class 하위클래스 extends 기본클래스 { … }
    • 기본 클래스에 선언된 모든 메서드나 속성은 하위 클래스(파생 클래스) 에서 사용 가능
    • 부모 클래스에서 선언과 정의를 모두하고, 자식 클래스는 오버라이딩 할 필요없이 부모 클래스의 기능을 사용할 수 있다.
    • extends는 클래스 한 개만 상속받을 수 있다.
  • 클래스 확장 - 재정의(override)된 생성자
    • 하위 클래스가 자체 생성자를 선언하면 super 키워드를 통해 기본 클래스 생성자를 호출해야 함
      • class 하위클래스 extends 기본클래스 {
        	constructor() {
        		super(값);
        	}
        }
    • 하위 클래스 생성자는 모든 매개변수 선언 가능
  • 클래스 확장 - 재정의(override)된 메서드
    • 하위 클래스는 기본 클래스와 동일한 이름으로 새 메서드를 다시 선언할 수 있다.
  • 클래스 확장 - 재정의된 속성
    • 하위 클래스는 동일한 이름으로 기본 클래스의 속성 (변수)을 명시적으로 다시 선언할 수 있다. (하위는 기본과 구조적으로 일치해야함)
  • 추상 클래스 (Abstract Class)
    • 일부 메서드를 구현하지 않고 하위 클래스가 해당 메서드를 제공할 것을 예상하고 기본 클래스를 만드는 방법
      • abstract class 추상클래스 {
        	readonly name: string;
        	constructor(name: string) {
        		this.name = name;
        	}
        	
        	// 아래 코드 처럼 본체는 없음 
        	abstract 추상메서드(): string[];
        }
        
        class 하위클래스 extends 추상클래스 {
        	추상메서드() {
        		// 구현코드
        	}
        }
    • 추상 클래스를 상속 받는 하위 클래스는 꼭 추상 메서드를 재정의 해야 한다. (override 안하면 error 발생)
    • 추상 클래스는 객체 생성이 불가능하고, 자식 클래스를 대상으로 객체 생성 한다.
    • 추상 클래스는 추상 메서드를 가진 클래스를 말하며 일반 멤버(변수, 메서드)도 가질 수 있다. 하지만 한 개 이상의 추상 메서드는 반드시 존재해야함!
  • 멤버 접근성
    • TS의 멤버 접근성은 클래스 멤버의 선언 이름 앞에 아래 키워드 중 하나를 추가한다.
    • public (기본값)
      • 모든 곳(외부, 하위) 에서 접근 가능
    • protected
      • 해당 클래스 내부 또는 하위 클래스에서만 접근 가능
    • private
      • 해당 클래스 내부에서만 접근 가능
  • 멤버 접근성 - 정적 필드 제한자 (static)
    • 클래스를 통해 인스턴스를 생성할 필요 없이 클래스의 속성이나 메서드를 사용하고자 할 때 static 키워드를 사용하여 속성이나 메서드 정의
      • ex) protected static readonly 변수: ‘aaa’;
    • static 키워드를 사용하여 선언된 변수, 함수는 정적 변수, 정적 함수라고 말한다. 이는 클래스에 속하는 변수와 함수로 호출하기 위한 객체가 필요하지 않고 클래스에서 바로 호출 가능하다. (클래스에서 점 표기법으로 직접 호출가능)
    • 객체에서(인스턴스 생성) 정적 변수, 정적 함수 호출은 불가능
      • var 클래스2 = new 클래스();
      • 클래스2.정적함수(); → 에러 발생!
728x90

'JS & TS > TypeScript' 카테고리의 다른 글

[TypeScript] Generic  (0) 2024.02.15
[TypeScript] 타입 제한자  (0) 2024.02.15
[TypeScript] Interface  (0) 2024.02.13
[TypeScript] Array, Tuple  (0) 2024.02.13
[TypeScript] Function  (0) 2024.02.13