TIL 53 | Interface
Interface(인터페이스)
-
인터페이스는 상호간에 정의한 약속 혹은 규칙을 뜻한다. (쉽게 설명하면 사용 설명서같은 느낌도 든다.)
-
객체의 속성, 함수의 매개변수 및 리턴값, 배열 및 객체의 접근 방식, 클래스에 대해 인터페이스를 지정할 수 있다. (타입의 틀을 정할 수 있다.)
객체에서의 인터페이스
// 객체 interface Person { name: string; age: number; gender?: string; // ?을 통한 옵션 속성 사용(선택적으로 사용 가능) } // const tomas: Person = { name: "tomas", age: 20, }; // const james: Person = { name: "james", age: 30, gender: "male", }; // 객체의 readonly(읽기 전용 속성) interface Beer { readonly brand: string; } // const cass: Beer = { brand: "Cass", }; // cass.brand = "Hite"; // annot assign to 'brand' because it is a read-only property.
- 위처럼 인터페이스를 활용하여 필요한 속성 개수, 속성명을 정할 수 있다.
- 인터페이스에 정의된 성을 기입할때, 순서를 지킬 필요는 없다.
- 특정 속성명 뒤에
?
를 기입하게 되면, 옵션 속성으로서 해당하는 속성을 선택적으로 사용할 수 있게 된다. readonly
키워드를 사용할 경우, 해당 속성이 가진 값의 수정이 불가능해진다.
배열에서의 인터페이스
const arr: ReadonlyArray<number> = [1, 2, 3, 3, 5]; arr.push(1); // Property 'push' does not exist on type 'readonly number[]'.
-
배열을 선언할때
ReadonlyArray
타입을 통해 배열을 생성하면, 읽기 전용의 배열이 생성된다. -
push
와 같은 메소드를 통해 기존 배열을 수정할 수 없었다.
함수에서의 인터페이스
interface User { (userName: string, userAge: number): boolean; } // const person1: User = (userName: string, userAge: number): boolean => { console.log(userName, userAge); return true; };
- 함수의 인자 및 리턴값들에 대한 타입을 지정해줄 수 있다.
클래스에서의 인터페이스
interface personInfo { name: string; namePerson(person: string): void; } // class Person implements personInfo { name: string = "yongmin"; namePerson(personName: string) { this.name = personName; } }
-
implement
키워드를 통해, 클래스에 인터페이스를 지정할 수 있다. -
클래스 내부의 멤버 변수, 메서드의 인자에 타입을 지정해줄 수 있다.
Reference
-
드림코딩 엘리님의 TS 및 OPP 강의
Author And Source
이 문제에 관하여(TIL 53 | Interface), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dydalsdl1414/TIL-53저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)