인터페이스와 클래스

ggomadev·2022년 4월 7일
0

Today I Learned

목록 보기
15/15
post-custom-banner

인터페이스

기본

인터페이스는 타입을 체크하기 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다.
프로퍼티와 메소드를 갖는 점에서 클래스와 비슷하지만, 직접 인스턴스를 생성할 수 없고, 모두가 추상 메소드라는 점에서 다르다.

인터페이스로 해당 변수가 가져야하는 형태를 정의할 수 있다. 인터페이스는 속성의 각 행 끝에 콤마(,)가 아닌 세미콜론(;)을 사용한다.

interface Movie {
	readonly title: string;
  	year: number;
  	director: string;
  	released?: boolean;
}
  • 선택적 속성은 속성 이름 뒤에 물음표(?)를 붙이면 된다. released 속성이 없더라도 새로운 Movie 객체를 생성할 수 있다.

  • readonly: 객체를 생성한 후 특정 속성을 편집할 수 없도록 해준다. title 속성은 편집할 수 없다.


함수

인터페이스로 함수가 가져야할 형태를 만든 후 해당 인터페이스를 자료형으로 가지는 변수를 정의하여 할당할 수도 있다.

interface Study {
    (name: string, subject: string, hour: number): string;
}

const sbHasBeenStudyingFunction: Study = function(name:string, subject: string, hour: number): string {
  return `${name} has been studying ${subject} for ${hour}hours...`;
}

console.log(sbHasBeenStudyingFunction('Brooklyn', 'Marketing', 2))
//"Brooklyn has been studying Marketing for 2 hours..." 

상속

  • 인터페이스는 extends 키워드를 사용해서 다른 인터페이스 또는 클래스를 상속받을 수 있다.
interface Furniture {
	color: string;
	height: number;
  	width: number;
}

interface Desk extends Furniture {
	designer: string;
    materials?: string[];
}

const meldesk: Desk = {
    color: 'Beige',
    height: 150,
    width: 200,
    designer: 'Melani C.',
    materials:['wood', 'steel']
}

클래스

프로토타입 상속을 수행해 애플리케이션에서 재사용할 수 있도록 한다는 점에서 자바스크립트 클래스와 유사하다. 하지만 타입스크립트는 클래스 멤버에 접근하는 권한을 설정할 수 있다.

  • public: 어디서나 접근할 수 있다.
  • private, protected: 타입스크립트로 코드 작성할 때에는 접근할 수 없게 막을 수 있지만, 트랜스파일되어 생성된 자바스크립트 코드에서는 접근을 막을 수 없다.
class Human {
    public sleep = () => {
        console.log('zzz')
    }
}

class Agent extends Human {
    private onMission = () => {
        console.log('on MISSION No.23')
    }
}

const Traverse = new Agent()

Traverse.sleep()
Traverse.onMission()
// 코드 작성 당시 에러
// Property 'onMission' is private and only accessible within class 'Agent'.
post-custom-banner

0개의 댓글