관리 메뉴

Life goes slowly...

[TypeScript] 타입스크립트의 인터페이스란? 본문

프로그래밍/Javascript

[TypeScript] 타입스크립트의 인터페이스란?

빨강소 2023. 12. 6. 14:25
728x90
반응형

 

타입스크립트(TypeScript) 코드의 인터페이스는 객체 내의 프로퍼티를 정의하는 방법입니다. 변수를 선언할 때마다 각각 타입을 지정하는 방법보다 인터페이스를 사용하는 방법이 편하고 재사용도 가능하기에 자주 사용하는 문법입니다.

 

타입스크립트(TypeScript) 인터페이스란?

 

프로그래밍 코드에서 상호간에 정의한 약속 혹은 규칙을 인터페이스라고 합니다. 타입스크립트(TypeScript)에서 인터페이스는 다음과 같은 범위에서의 약속을 정의가 가능합니다. 인터페이스를 통하여 값이 따라야 할 제약을 타입으로 표현 가능하며, 인터페이스 타입을 통하여 값의 형태를 서술이 가능합니다.

 

1. 클래스

2. 배열과 객체를 접근하는 방법

3. 함수의 파라미터

4. 객체의 스펙(속성과 속성의 타입)

5. 함수의 스펙(파라미터, 반환 타입)

 

//옵션 속성
interface 인터페이스_name {
	속성?: 타입;
}

//예제
interface InterfaceName {
	name: string;
        age: number;
}

//읽기전용
interface UserName {
	name: string;
    	readonly age: number;
}

//함수 인터페이스
interface GetUser {
	(user, user): string;
}

//클래스 타입 인터페이스
interface WorldName {
  name: string;
  nameTest(test: string): void;
}

class myWorld implements WorldName {
  name: string = 'redcow7';
  nameTest(b: string) {
    this.name = b;
  }
  constructor() {}
}

 

이외에도 인터페이스 간 확장되는 인터페이스 확장 형태와 자바스크립트의 유연하고 동적인 타입 특성에 따라 인터페이스 여러 가지 타입을 조합 가능한 하이브리드 타입 형태 인터페이스가 있습니다.

 

//인터페이스 확장
interface User {
  name: string;
}
interface LoginUser extends User {
  id: string;
}
let fe = {} as LoginUser;
fe.name = 'redcow7';
fe.id = 'abcd';


//하이브리드 타입 인터페이스
interface LoginUser {
  (name: string): string;
  id: string;
  password(): void;
}

function myUser(): LoginUser {
  let my = (function(name: string) {}) as LoginUser;
  my.id = 'abcd';
  my.password = function() {};
  return my;
}

let loginStatus = myUser ();
loginStatus('redcow7');
loginStatus.id = 'bbbbb';
loginStatus.password();
728x90
반응형
Comments