Typescript 2. Class

Alpha, Orderly·2023년 1월 6일
0

typescript & javascript

목록 보기
2/6
post-thumbnail

Class

클래스는 자바스크립트 Object의 틀이라고 생각하시면 됩니다.

내부에 프로퍼티나 메소드를 선언 할수 있습니다.

보통 클래스의 이름은 Upper Camel Case로 짓습니다.

기본적 틀

// 클래스
class Example {
	// 클래스 내 프로퍼티
    prop: string;
    // 프로퍼티는 기본값을 가질수 있다.
    prov: string = "";

	// 클래스의 생성자
    constructor(prop: string) {
    	// this 키워드로 자신의 프로퍼티를 가리킵니다.
        this.prop = prop
    }
	
    // 클래스 내부 메소드
    printProp() {
        console.log(this.prop)
    }
}

사용 시에는 new를 이용해 생성합니다.

const ex = new Example("예시")

OPTIONAL

name?: string 과 같이 프로퍼티 작성시 자동으로 기본값이 undefined입니다.

또한 반드시 생성자에서 초기화 해줄 필요가 없게 됩니다.

함수의 패러미터에서도 옵셔널이 사용될수 있는데, 이 경우 optional chaining이나 unwrapping을 해야 사용 가능합니다.

function add(s1: number, s2?: number) {
	if (s2 != undefined ) {
    	return s1 + s2 
    } else {
    	return 0
    }
}

패러미터에서 옵셔널은 기본값과 같기에 오른쪽 끝에서만 쓰일수 있습니다.

function add(s1?: number, s2: number) {
	if (s2 != undefined ) {
    	return s1 + s2 
    } else {
    	return 0
    }
}

불가능.

this 키워드

this 키워드는 자신을 실행한 객체를 가리킵니다.

즉 위 ex는 내부 메소드가 실행될때 ex를 가리키게 됩니다.

const a = new A("AA")

접근 제한자

메소드나 프로퍼티 앞에 private을 붙히면 외부에서의 접근을 차단할수 있습니다.

기본적으로 public이기에 제한자를 설정하지 않는다면 외부에서 접근이 가능합니다.

protected의 경우 후에 나올 상속에 사용되며, 자식 클래스가 접근할수 있습니다.

private prop: string;
prov: string = "";

또 다른 생성자

생성자 내부에서 프로퍼티 작성, 접근자 지정, 생성자 만들기를 전부 할수도 있습니다.

constructor(private prop: string) { }

위와 같이 생성자의 패러미터 부분에 접근자를 적으면 됩니다.

또한 함수 패러미터 기본값을 설정하듯 기본값을 지정할수도 있습니다.

읽기 전용

프로퍼티 앞에 readonly를 적을 경우 이는 읽기 전용이 됩니다.


상속

상속은 겹치는 기능을 가지는 여러 클래스가 중복된 코드를 작성하지 않아도 기능을 사용할수 있도록 합니다.

class AccountingDepartment extends Department 

extend 를 이용하여 클래스를 상속 받을수 있습니다.

부모 생성자 접근

constructor(id: string, admins: string[]) {
  super(id, 'IT');
  this.admins = admins;
}

자식 클래스는 부모 클래스의 생성자에 접근해 부모 클래스를 초기화 시킬수 있습니다.

super(...) 를 통해 가능합니다.

오버라이딩

타입스크립트엔 오버라이딩을 위해 따로 적을 필요 없이 함수명과 패러미터를 동일하게 하면
자동으로 오버라이딩 됩니다.

abstract type

클래스의 앞에 abstract를 붙히고 메소드 앞에도 abstract를 붙힌뒤 메소드의 바디를 제거하면

반드시 오버라이딩 해야 하는 메소드가 됩니다.

abstract class Department {
  abstract describe(this: Department): void;
}
// Department 상속 받을시 반드시 오버라이딩 해야 함.

클래스에 abstract가 붙으면 이 클래스는 직접 사용하지 못하고 부모 클래스로만 사용 가능해 집니다.

Getter / Setter

프로퍼티를 사용하거나 프로퍼티에 대입시 복잡한 동작이 구현되도록 할수 있습니다.

class C{
  private lastReport: string = "a";

  get mostRecentReport() {
    if (this.lastReport) {
      return this.lastReport;
    }
    throw new Error('No report found.');
  }

  set mostRecentReport(value: string) {
    if (!value) {
      throw new Error('Please pass in a valid value!');
    }
    this.addReport(value);
  }
}

와 같은 클래스가 있을 시

	const c = C()
   	const a = c.mostRecentReport
    // 위 Getter가 동작해 리턴되는 값이 됩니다.
    c.mostRecentReport = "C"
    // 위 Setter가 동작해 값을 사용합니다.

정적 메소드 / 프로퍼티

앞에 static을 붙히면 모든 객체가 공유하는 static type이 됩니다.

static method 안에서는 static property를 this 키워드로 호출할수 있습니다.

싱글턴

클래스에 객체가 항상 하나 존재하도록 구현하는 것입니다.

class AccountingDepartment extends Department {
  private lastReport: string;
  // 정적 프로퍼티로 자기 자신을 가리킵니다.
  private static instance: AccountingDepartment;

 // 생성자는 외부 접근이 불가능합니다.
  private constructor(id: string, private reports: string[]) {
    super(id, 'Accounting');
    this.lastReport = reports[0];
  }

// 클래스 static이 생성되어 있으면 그대로 리턴, 아니면 생성 후 리턴합니다.
  static getInstance() {
    if (AccountingDepartment.instance) {
      return this.instance;
    }
    this.instance = new AccountingDepartment('d2', []);
    return this.instance;
  }
}

Interface

클래스 / 오브젝트의 틀이 된다.

형태

interface Greetable extends Named {
  name: string;
  greet(phrase: string): void;
}

사용시 implement를 이용하며 interface에 있는 모든 프로퍼티 및 메소드를 오버라이딩 하여야 한다.

interface 끼리 상속

interface 끼리는 extends를 이용해 서로 상속할수 있다.

interface readonly

interface Named {
  readonly name: string;
  outputName: string;
}

위와 같이 interface 단에서 readonly를 작성할 경우

클래스에서 오버라이딩 해도 readonly가 적용 된다.

함수 형태 지정

// type AddFn = (a: number, b: number) => number;
interface AddFn {
  (a: number, b: number): number;
}

let add: AddFn;

위와 같이 함수의 형태를 지정하는데도 사용 할수 있다.

profile
만능 컴덕후 겸 번지 팬

0개의 댓글