카테고리 없음
[TS]인터페이스
JoyYellow
2022. 11. 22. 15:15
인터페이스: 상호 간에 정의한 약속 혹은 규칙
// 인터페이스에 정의된 속성, 타입의 조건만 만족한다면 객체의 속성 갯수가 더 많아도 상관없음
// 인터페이스에 선언된 속성 순서를 지키지 않아도 된다.
interface personAge {
age: number;
}
function logAge(obj: personAge) {
console.log(obj.age);
}
let person = { name: 'Capt', age: 28 };
logAge(person);
약속정의
- 객체의 스팩(속성과 속성의 타입)
- 함수의 파라미터
1. 옵션 속성
// 속성 끝에 ?를 붙이면 해당 속성은 작성하지 않아도 된다.
inerface CraftBeer {
name: string;
hop?: number;
}
let myBeer = {
name: 'Sporo';
}
function brewBeer(beer: CraftBeer) {
console.log(beer.name); // Saporo
}
brewBeer(myBeer);
장점: 인터페이스의 속성을 선택적으로 적용할 수 있고 인터페이스에 정의되지 않은 속성에 대해 인지시켜 줄 수 있다.
2. 읽기 전용 속성
인터페이스 객체를 처음 생성 할 때만 값을 할당하고 이후에는 변경 할 수 없음
interface CraftBeer {
readonly brand: string;
}
let myBeer: CraftBeer = {
brand: 'Belgian Monk';
}
ntBeer.brand = 'Korean Carpenter'; // error!
3. 읽기 전용 배열
ReadonlyArray[T]로 선언하면 선언한 시점에만 값을 정의할 수 있다.
let arr: ReadonlyArray<number> = [1, 2, 3];
arr.splice(0, 1); // error
arr.push(4); // error
arr[0] = 100; // error
4. 객체 선언과 관련된 타입 체킹
interface CraftBeer {
brand?: string;
}
function brewBeer(beer: CraftBeer) {
console.log(beer.brand);
}
brewBeer({ brandon: 'what' }); // error
// 타입 추론을 무시하고 싶다면
let myBeer = { brand: 'what'};
brewBeer(myBeer as CraftBeer);
// 인터페이스에 추가하지 않은 속성을 추가하고 싶을 때
interface CraftBeer {
brand?: string;
[promptName: string]: any;
}
5. 함수 타입
interface login {
(username: string, password: string): boolean;
}
let loginUser: login;
loginUser = function(id: string, pw: string) {
console.log('로그인 했습니다');
return true;
}
6. 클래스 타입
interface CraftBeer {
beerName: string,
nameBeer(beer: string): void;
}
class myBeer implements CraftBeer {
beerName: string = 'Baby Guinness';
nameBeer(b: string) {
this.beerName = b;
}
constructor() {}
}
9. 인터페이스 확장
interface Person {
name: string;
}
interface Developer extends Person {
skill: string;
}
let fe = {} as Developer;
fe.name = 'josh';
fe.skill = 'Typescript';
10. 하이브리드 타입
interface CraftBeer {
(beer: string): string;
brand: string;
brew(): void;
}
function myBeer(): CraftBeer {
let my = (function(beer: string) {}) as CraftBeer;
}