Typescript 공부하기 4일차 (2022.09.27)

1. Interface

1) Interface란?

   - 일반적으로 변수, 함수 , 클래스에 타입 체크를 위해 사용

   - 직접 인스턴스를 생성할 수 없고 모든 메소드가 추상 메소드

   - 추상 클래스의 추상 메소드와 달리 abstract 키워드 사용 불가

   - ES6는 인터페이스 미지원, TS는 지원 

 

2) 사용 목적

   - 타입의 이름을 짓고 코드 안의 계약을 정의

   - 프로젝트 외부에서 사용하는 코드의 계약을 정의하는 강력한 방법

   - 아래 범주에 대해 계약 정의 가능

      ㄴ 객체의 스팩 (속성과 석성의 타입) 

      ㄴ 함수의 파라미터

      ㄴ 함수의 스펙(파라미터, 반환 타입 등)

      ㄴ 배열과 객체에 접근하는 방식

      ㄴ 클래스

 

3) 사용 예시

// A
function sayName(obj: { name: string }) {
	console.log(obj.name);
}
let person = { name: 'june' };
sayName(person);

// B
interface Person {
	name: string
}
function sayName(obj: Person) {
	console.log(obj.name);
}
let person = { name: 'june' };
sayName(person);

   - interface를 추가하여 함수 매개변수 프로퍼티 정의 가능

   - 정의한 프로퍼티 값을 누락하거나 정의하지 않은 값을 인수로 전달 시 컴파일 에러 발생 

 

 

 

2. Properties

1) Properties란?

   - 컴파일러는 프로퍼티의 두 가지 요소를 검사

      ㄴ 필수요소 프로퍼티 유무

      ㄴ 프로퍼티 타입

   - 예약어로 프로퍼티를 세밀하게 컨트롤 가능

      ㄴ ? (Optional Properties)

      ㄴ readonly (Readonly Properties)

 

2) Optional Properties

   - 프로퍼티 선언 시 이름 끝에 ?를 붙여서 표시

   - 인터페이스에 속하지 않는 프로퍼티의 사용을 방지하면서 사용 가능한 프로퍼티 기술 시 사용

   - 객체 안의 몇 개의 프로퍼티만 채워 함수에 전달하는 "optional bags"같은 패턴에 유용

 

3) Readonly Properties

   - 객체가 처음 생성될 때만 값 설정 가능

   - 프로퍼티 이름 앞에 readonly를 붙여 사용

 

3) readonly vs const

   - 공통점: 생성 후에 배열을 변경하지 않음을 보장

   - 변수는 const를 사용하고 프로퍼티는 readonly 사용

 

 

 

3. Interface type

1) Interface type이란?

   - TS에서 인터페이스는 함수, 클래스에서 사용 가능

   - 함수

      ㄴ JS객체가 가질 수 있는 넓은 범위의 형태 기술

      ㄴ 프로퍼티로 객체를 기술하는 것 외에도 인터페이스는 함수 타입을 설명

   - 클래스

      ㄴ 클래스가 특정 통신 프로토콜을 충족하도록 명시적으로 강제

      ㄴ C#과 Java와 같은 언어에서 일반적으로 인터페이스를 사용하는 방법과 동일

 

2) function type

   - 함수의 인자의 타입과 반환 값의 타입을 정의

   - 함수의 타입을 정의 할 때에도 사용

 

3) class type

   - 클래스가 특정 계약(contract)을 충족하도록 명시적으로 강제

 

4) Interface 확장

   - 클래스와 같이 인터페이스도 인터페이스 간의 확장 가능

 

5) Interface 확장

   - JS의 유연하고 동적인 타입 특성에 따라 인터페이스 역시 여러가지 타입을 조합 가능

   - 즉, 함수 타입이면서 객체 타입을 정의 할 수 있는 인터페이스도 구현 가능

interface Counter {
	(start: number): string
    interval: number
	reset(): void
}

function getCounter(): Counter {
	let counter = function (start: number) {} as Counter
    counter.interval = 123;
    counter.reset = function () {}
    return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

 

4. 디자인 패턴 (Strategy pattern)

1) Strategy pattern

   - interface를 활용한 디자인 패턴,  Strategy pattern

   - 객체가 할 수 있는 행위들을 전략으로 만들고,

     동적으로 행위의 수정이 필요한 경우,

     전략을 바꾸는 것만으로 수정이 가능하도록 만든 패턴

 

2) 활용 사례

   - 자판기 결제방법을 현금 결제에서 카드 결제로 변경할 때, Pay 메소드 구현 변경이 필요

   - 메소드 수정 방식의 문제점

      ㄴ OCP 위배 (OOP 설계 원칙)

      ㄴ 시스템이 커져서 확장 될 경우 연동되는 시스템에도 영향

   - 디자인 패턴으로 문제 해결 가능