[ Typescript] interface

김재민·2021년 12월 3일
0

interface 인터페이스

인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수 , 함수 , 클래스에 사용할 수 있다.
인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다.
인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는것이다.


let person = { name: 'kim', age: 30 };

function PersonAge( obj: { age: number}) {
 	console.log(obj.age) //  30  
};

PersonAge(person);	// 30

위 함수에서 받는 인자의 형태는 age 속성으로 갖는 객체이다. 이렇게 인자를 받을 때 단순한
타입 뿐만 아니라 객체의 속성 타입까지 정의 할 수 있다.
위 코드를 인터페이스를 적용해서 구현해본다면.

interface Age {
	age: number;
};

function PersonAge(obj: Age) {
	console.log(obj.age) // 30
};

let kim = { name: 'kim', age: 30};

PersonAge(kim); // 30

인터페이스를 인자로 받아 사용할 때는 항상 인터페이스의 속성 갯수와 인자로 받는 객체의 속성 갯수를 일치시키지 않아도 된다.
인터페이스에 정의된 속성, 타입의 조건만 만족한다면 객체의 속성 갯수가 더 많아도 상관 없고, 인터페이스에 선언된 속성 순서를 지키지 않아도 된다.

옵션속성

인터페이스를 사용할 때 인터페이스에 정의되어 있는 속성을 모두 다 꼭 사용하지 않아도 된다.

interface 인터페이스명 {
	속성?: 타입;
}
  • 읽기전용 속성

객체를 처음 생성할 때만 값을 할당하고 그 후에는 변경할 수 없는 속성을 의미한다.

interface 인터페이스명 {
	readonly 속성: 타입;
}
  • 읽기전용배열
    배열을 선언할때 ReadonlyArray 타입을 사용하면 읽기전용 배열이 만들어 진다.
  
let arr: ReadonlyArray<number> = [1,2,3]
  

만약에 인터페이스 내에 정의하지 않은 속성들을 추가로 사용하고 싶으면


  interface Person {
    name?: string;
  	[propName: string]: any;
  // 정의되지 않은 속성들을 추가로 사용 가능!
}
  

함수타입

인터페이스는 함수의 타입을 정의할때도 사용할 수 있다.

  interface login {
  (username: string, password: string): boolean;
}
// login 인터페이스는 string 타입의 매개 변수를 받고 boolean 타입을 return 하는 함수만 정의가 가능!

let loginUser: login = function(id: string, pw: string) {
    console.log('로그인 했습니다.');
    return true;
}

let logoutUser: login = function(id: string, pw: string) {
    console.log('로그아웃 했습니다.');
    return true;
}
profile
Junior Front-end engineer

0개의 댓글