인터페이스의 함수 구조 정의와 딕셔너리 패턴

soohyunee·2023년 5월 3일
0

TypeScript

목록 보기
13/20
post-thumbnail

1. 인터페이스의 함수 구조 정의

function getUser(user: User) {
	console.log(user);
}

const capt = {
	age: 13,
	name: 'capt',
};

getUser(capt);
  • 함수의 인자에 인터페이스를 정의해서 사용하는 방법 : 타입스크립트에서 가장 많이 보는 구조
  • api 호출해서 api의 스펙(데이터 구조)를 가져와서 인터페이스에 정의 후 활용

interface SumFunction {
	(a: number, b: number): number;
}

let sum: SumFunction;

sum = function (a: number, b: number): number {
	return a + b;
};
  • 그 외에도 함수의 스펙, 함수의 구조에도 인터페이스 활용 가능
  • 함수를 만들 때, 함수의 규칙을 인터페이스에 정의 가능
  • 규칙에는 인자와 반환 값이 있고, 이들의 타입을 정의할 수 있음
  • 라이브러리를 만들거나, 여러명이 동시에 협업을 할 때 함수의 규칙을 잡을 때 사용

2. 인터페이스 딕셔너리 패턴

interface StringRegexDictionary {
	[key: string]: RegExp;
}

let obj: StringRegexDictionary = {
	cssFile: /\.css$/,
	jsFile: /\.js$/,
};

Object.keys(obj).forEach((v) => v);
  • 딕셔너리 패턴은 인덱싱과 유사하고, 자주 쓰임
  • 대괄호를 이용하여 속성의 타입을 정의
  • 콜론 뒤에는 속성의 값의 타입을 정의
  • 딕셔너리 패턴에 의해 Object를 조작할 때마다 타입 추론을 통해 타입을 미리 정해줌
  • 객체의 키에 접근할 때 오류 검증 기능을 인터페이스를 통해 구현할 수 있음

참고 : 타입스크립트 입문 - 기초부터 실전까지

profile
FrontEnd Developer

0개의 댓글