인터페이스
객체에서만 사용 가능- 인터페이스를 사용하는 이유
- 타입이
객체인 p1, p2, p3객체를 생성하는 예
- 타입이
👉 코드마다 중복되는 객체 타입을 하나로 만들 수 있다면?
👉 타입이 인터페이스인 p1, p2, p3 객체를 생성하는 예
-
특징
- 코드의 재사용성을 높임
- 작성중인 코드에 대한 더 많은 정보를 타입스크립트에 제공하기 위해 사용
- 인터페이스는 자바스크립트 코드로 컴파일되지 않음
- 인터페이스 내부에서는
속성뿐만 아니라함수도 설계 가능- 함수의 이름만 설계해야 함 → 함수 내용은 class 사용하여 작성
-
이름 규칙
- 첫글자를
대문자로 표기 - 인터페이스 이름 앞에 대문자(I)를 붙이지 않음
- 첫글자를
-
인터페이스
- 객체의 타입을 지정
interface 인터페이스이름 {
속성이름: 속성타입
}
// 예시
interface Person {
name: string;
age: number
}[실습] 인터페이스
const Interface = () => {
interface Language {
name: string;
level: number;
}
let p1: Language = {
name: "react",
level: 5,
};
// 에러 발생
let p2: Language = { name: "Typescript" };
let p3: Language = { level: 5 };
let p4: Language = {};
let p5: Language = {
name: "javascript",
level: 1,
completed: true,
};
return <div></div>;
};
export default Interface;- 선택 속성
- 필수 속성이 아닌 경우
- 속성 이름 뒤에 물음표
?기호를 붙임
interface 인터페이스이름 {
속성이름?: 속성타입
}const Interface = () => {
interface Language {
name?: string;
level?: number;
completed?: boolean;
}
let p1: Language = {
name: "react",
level: 5,
};
let p2: Language = { name: "Typescript" };
let p3: Language = { level: 5 };
let p4: Language = {};
let p5: Language = {
name: "javascript",
level: 1,
completed: true,
};
return <div></div>;
};
export default Interface;Type Alias vs Interface
💡 타입 별칭 vs 인터페이스인터페이스는 객체 타입으로만 선언
타입 별칭은 타입 상관 없음
선언 방식
- 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;
}👉 UserInterface 는 gender 속성 포함 x, gender 속성은 AddInterface에만 포함된다.
클래스
- 클래스 선언문
class 클래스이름 {
속성이름: 속성타입
}
// 예시
class Person {
name: string;
age: number;
}- 생성자
- constructor() 메서드
- 클래스 속성은 사전에 선언되어야 함
class Person {
// 클래스 속성은 사전에 선언되어야 함
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
}
let p1: Person = new Person("gyull", 26);
console.log(p1);
// 실행 결과
Person {name:"gyull", age: 26}접근제한자
-
속성 이름 앞에 접근제한자를 붙일 수 있음
- public, private, protected
-
생략 시, public으로 적용
- paivate 속성 이름 앞에 언더바
_붙임
- paivate 속성 이름 앞에 언더바
class Person {
name: string; // public적용
private _age: number; // paivate 속성 이름 앞에 언더바_ 붙임
}인터페이스 구현
- 주의사항
- 인터페이스는 어떠한 속성이 있는지에 대한 규약
- 해당 속성을 생성해주지는 않음
- 따라서 클래스 내부에서 해당 속성을 정의해야 함
[실습] 인터페이스 구현
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("gyull", 26);
console.log(p1);
// 실행 결과
Person {name:"gyull", age: 26}추상 클래스
- 추상화
- 여러가지 사물/개념에서 공통되는 특성을 묶어 이름을 붙이는 것
- 공통된 메서드, 속성을 묶어 하나의 클래스로 생성
추상 클래스(abstract class)
-
완전하게 구현되어 있지 않은 메서드(추상 메서드)를 갖는 클래스
→ 구현부는 없고 껍데기만 있는 추상 메서드를 가짐
- 추상 클래스를 상속하는 클래스에서 추상 메서드를 구현해야 함
-
추상 클래스는 객체를 생성할 수 없음 📍
- 메서드가 미완성이기 때문
-
목적
- 상속 계층에서 추상적인 개념을 나타내기 위해 사용
-
ex) 동물 상속 계층도
- move() → 껍데기만 있는 추상 메서드
추상 클래스 선언문
abstract <class 클래스이름 {
속성이름: 속성타입
abstract 메서드이름() {}
}일반 메서드는 있어도 되고 없어도 됨!
[실습] 추상 클래스
✍️ 전체 코드
import React from "react";
const AbstractClass = () => {
abstract class AbstractPerson {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
info(): void {
// 일반 메서드
console.log(`name:${this.name}, age : ${this.age}`);
}
abstract say(): void; // 추상 메서드
}
// 추상 클래스 상속
class Person extends AbstractPerson {
// 추상 메서드 구현
say(): void {
console.log("안녕하세요");
}
}
let p1: Person = new Person("gyull", 26);
p1.info();
p1.say();
return <div></div>;
};
export default AbstractClass;
// 실행결과
name : soo , age : 20
안녕하세요새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 9주차 블로그 포스팅
🌱 FE