[TS]인터페이스

인터페이스: 상호 간에 정의한 약속 혹은 규칙

// 인터페이스에 정의된 속성, 타입의 조건만 만족한다면 객체의 속성 갯수가 더 많아도 상관없음
// 인터페이스에 선언된 속성 순서를 지키지 않아도 된다.
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;
}