새싹 프론트엔드 실무 과정 9주차 TypeScript 인터페이스, 클래스

• 9주차 목요일

3. 인터페이스 + 클래스

 

 

인터페이스

 

특징

- 코드 재사용성을 높임

- 작성중인 코드에 대한 더 많은 정보를 타입스크립트에 제공하기 위해 사용

- 인터페이스는 자바스크립트 코드로 컴파일 되지 않음

 

이름 규칙

- 첫글자를 대문자로 표기

- 인터페이스 이름 앞에 대문자(I)를 붙이지 않음

 

➡ App.tsx

const App = () => {

  interface Language {

    name: string;

    level: number;

  }

  let p1: Language = {

    name: "react",

    level: 5,

  };

 

// 에러 발생

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

  let p3: Language = { level: 5 }; // name

  let p4: Language = {}; // level, name

  let p5: Language = {

    name: "javascript",

    level: 1,

    completed: true, // 이게 뭔데!?

  };

 

선택 속성

- 필수 속성이 아닌 경우

- 속성 이름 뒤에 물음표(?) 기호를 붙임

 

const App = () => {

  interface Language {

    name: string;

    level: number;

    completed?: boolean // 선택 속성으로 에러 해결

  }

  let p1: Language = {

    name: "react",

    level: 5,

  };

  let p5: Language = {

    name: "javascript",

    level: 1,

    completed: true, 

  };

선언 방식

➡ 인터페이스는 객체에서만 사용 가능

 

 

구현

 

큰 차이 없음!

 

 

선언적 확장 : 동일한 이름으로 재선언할 경우 자동으로 하나로 합쳐짐

변수와 다르게 interface는 재선언 가능!

 

 

상속(extends)

 

➡ name, age, address ⭕

➡ gender ❌

 

 

 

클래스

 

➡ ClassComponent.tsx

const ClassComponent = () => {

  class Person {

    name: string;

    age: number; // 클래스 속성은 사전에 선언되어야 함

    constructor(name: string, age: number) {

      this.name = name;

      this.age = age;

    }

  }

  let p1: Person = new Person("gan", 20);

  console.log(p1);

 

접근제한자 : public, private, protected

protected : private + a, 상속받는 자식도 접근이 가능!

_속성 인 경우 private 변수! (약속)

 

 

주의사항

- 인터페이스는 어떠한 속성이 있는지에 대한 규약

- 해당 속성을 생성해주지는 않음

- 따라서 클래스 내부에서 해당 속성을 정의해야 함

 

interface PersonInterface {

    name: string;

    age: number;

  }

  class Person implements PersonInterface {

    name: string;

    age: number;

    constructor(name: string, age: number) {

      this.name = name;

      this.age = age;

    }

  }

  let p1: Person = new Person("gan", 20);

  console.log(p1);

➡ 결과 : Person {name: 'gan', age: 20}

 

 

추상 클래스

 

추상화 : 여러가지 사물·개념에서 공통되는 특성을 묶어 이름을 붙이는 것

추상 클래스

- 완전하게 구현되어 있지 않은 메서드(추상 메서드)를 갖는 클래스

- 추상 클래스는 객체를 생성할 수 ❌ (메서드가 미완성이기 때문)

- 목적 : 상속 계층에서 추상적인 개념을 나타내기 위해 사용

 

➡ Animal이 추상 클래스

 

추상 클래스 { 

 일반 메서드() {consloe.log("잠잔다")}

   추상메서드()

}

 

 

 

 

 

 

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