인터페이스와 클래스

인터페이스

인터페이스를 사용하는 이유

• 타입이 객체인 p1, p2, p3 객체를 생성하는 예

let p1: { name: string; level: number } = {
    name: "react",
		level: 5, 
};

let p2: { name: string; level: number } = {
    name: "typescript",
    level: 3,
};

let p3: { name: string; level: number } = { 
		name: "javascript",
		level: 2,
};

• 코드마다 중복되는 객체 타입을 하나로 만들 수 있다면?

특징

• 코드의 재사용성을 높임
• 작성 중인 코드에 대한 더 많은 정보를 타입스크립트에 제공하기 위해 사용
  • 인터페이스는 자바스크립트 코드로 컴파일 되지 않음

이름 규칙

• 첫글자를 대문자로 표기
• 인터페이스 이름 앞에 대문자(I)를 붙이지 않음

인터페이스

• 객체의 타입을 지정

interface 인터페이스이름 {
		// 속성이름: 속성타입
}

• 예시

interface Person {
    name: string;
		age: number
}

• 타입이 인터페이스인 p1, p2, p3 객체를 생성하는 예

interface Language { 
		name: string;
		level: number
}

let p1: Language = {
    name: "react",
		level: 5 
};

let p2: Language = {
    name: "typescript",
    level: 3
};

let p3: Language = { 
		name: "javascript", 
		level: 2
};

선택 속성

• 필수 속성이 아닌 경우
• 속성 이름 뒤에 물음표(?) 기호를 붙임

interface 인터페이스이름 { 
		// 속성이름**?**: 속성타입
}

Type Alias vs Interface

선언 방식

• type

type UserType = {
    name: string;
    age: number;
}

• interface

interface UserInterface {
    name: string;
    age: number;
}

구현(implements)

• type

class User1 implements UserType {

}

• interface

class User2 implements UserInterface {

}

선언적 확장

• 동일한 이름으로 재선언할 경우 자동으로 하나로 합쳐짐
• type

  • 선언적 확장 불가능

  • 동일한 이름으로 재선언 불가능
    - 기존에 있던 타입 이름에 & 연산자 사용하여 저장

    type AddType = UserType & { address: string };

• interface

  • 선언적 확장 가능

  • 동일한 이름으로 재선언 가능 & 기존값과 새 값이 합쳐짐

    interface UserInterface {
        address: string;
    }

상속(extends)

• interface

interface AddInterface extends UserInterface {
    gender: string;
}

클래스

클래스 선언문

class 클래스이름 { 
		// 속성이름: 속성타입
}

예시

class Person {
   name: string
	 age: number 
}

생성자

• constructor() 메서드

접근제한자

• 속성 이름 앞에 접근제한자를 붙일 수 있음

  • public, private, protected

  • 생략 시, public으로 적용

    class Person {
    		name: string; // public 적용 
    		private _age: number;
    		// private 속성의 변수 앞에는 _를 붙이는 것을 권장
    }

인터페이스 구현

주의사항

• 인터페이스는 어떠한 속성이 있는지에 대한 규약
• 해당 속성을 생성해 주지는 않음
• 따라서 클래스 내부에서 해당 속성을 정의해야 함
• 인터페이스 내부에서는 함수도 설계할 수 있음
  • 단, 함수의 이름만 설계하고 함수 내용은 설계할 수 없음
  • 이름만 만들어진 함수는 클래스 내부에서 내용을 설계할 수 있음

추상 클래스

추상화

• 의미
  • 여러 가지 사물/개념에서 공통되는 특성을 묶어 이름을 붙이는 것
• 공통된 메서드, 속성을 묶어 하나의 클래스로 생성

추상 클래스(abstract class)

• 완전하게 구현되어 있지 않은 메서드(추상 메서드)를 갖는 클래스
  • 추상 클래스를 상속하는 클래스에서 반드시 추상 메서드를 구현해야 함
• 추상 클래스는 객체를 생성할 수 없음
  • 메서드가 미완성이기 때문
• 목적
  • 상속 계층에서 추상적인 개념을 나타내기 위해 사용

동물 상속 계층도

추상 클래스 선언문

abstract class 클래스이름 { 
		속성이름: 속성타입 
		abstract 메서드이름() {}
}

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 9주차 블로그 포스팅