TypeScript 인터페이스 정의하고 사용하기
By Frontier(프런티어)
조회수 | 1675
2024-07-03 14:08
이번 시간에는 타입스크립트의 인터페이스 사용 목적 및 구현 방법에 대해 안내합니다.
D:\TypeScript\3-TS-Core 폴더내에 interface.ts파일을 생성 합니다.
1) 인터페이스 기반 타입 정의법 코딩하고 실행하기
-하기 코드와 같이 코딩을 진행합니다.
-자세한 내용은 주석을 참고바랍니다.
-interface.ts
//Case1)인터페이스 개념 이해하기
//인터페이스는 = 없이 사용하고 {로 시작하고 속성구분을;로 구분
interface User {
name: string;
age: number;
}
//type Alias와 비교하기예시
type MemberType = {
name: string;
age: number;
};
function greet(user: User): string {
return `Hello, ${user.name}!`;
}
let user = { name: "Alice", age: 20 };
console.log(greet(user)); // "Hello, Alice!"
//CASE2)인터페이스의 확장(속성추가와 상속)
interface Person {
name: string;
}
//한번 정의된 인터페이스 속성을 나중에 추가정의해도 사용가능
interface Person {
address: string;
}
interface Group {
group: string;
}
//Person 인터페이스를 상속받아 Employee 인터페이스를 정의
//인터페이스가 다른 인터페이스를 상속받아 속성/기능을 확장 -extends
//여러 인터페이스를 이용해 확장 가능
interface Employee extends Person, Group {
department: string;
}
let employee: Employee = {
name: "Alice",
department: "Engineering",
address: "Seoul",
group: "IT",
};
console.log("인터페이스 상속 데이터", employee);
//Case3)클래스 구현시 인터페이스를 상속받은 클래스는 인터페이스의 모든 속성과 기능을 구현해야하는 제약기능 -implements
interface Movable {
speed: number;
move(): void;
}
//인터페이스를 상속받은 클래스는 인터페이스에 정의된 기능과 속성을 반드시 구현해야함
class Car implements Movable {
speed: number;
constructor(speed: number) {
this.speed = speed;
}
move() {
console.log(`The car is moving at ${this.speed} km/h`);
}
}
let myCar = new Car(50);
myCar.move(); // "The car is moving."
//타입스크립트 컴파일과 JS모듈 파일 실행하기
//tsc --strictNullChecks interface.ts
//node interface.js
-코딩을 모두 진행 저장하고 아래 명령어를 통해 터미널창에서 ts파일을 컴파일하고 컴파일 결과.js파일을 실행합니다.
D:\TypeScript\3-TS-Core
tsc --strictNullChecks objeinterfacect.ts
node interface.js
2)코딩 핵심 내용 설명
-Interface 정의는 속성명에 = 없이 :를 사용하고 {로 시작하고 속성구분을;로 구분합니다.
-한번 정의된 인터페이스는 최초 정의한 이후에도 속성을 추가할수 있다.
-인터페이스를 사용하는 이유는 다른 인터페이스의 기능과 속성을 확장하거나 인터페이스를 상속받은 클래스의 기능과 속성을 제약하기 위함입니다.
-인터페이스는 다른 여러 인턴페이스를 상속받아 속성과 기능을 확장(extends)할수 있다.
-인터페이스를 상속받은 클래스는 반드시 해당 인터페이스에서 제공하는 기능과 속성을 구현해야합니다.
-특정 인터페이스에서 현재 인터페이스의 기능을 확장할때는 extents 키워드를 사용합니다.
interface Employee extends Person, Group {
}
-특정 인터페이스를 상속받아 클래스를 구현할때는 implements 키워드를 사용합니다.
class Car implements Movable {
}
다음 주제로 이동합니다.