728x90
변수를 정의하는 인터페이스
interface User{
age: number;
name: string;
}
//변수에 인터페이스를 적용하는 방법
var seho: User ={ //반복되는 타입에 대해서 하나의 인터페이스를 정의해서 동작시킬 수 있다.
age: 33,
name: '세호'
}
- 인터페이스를 정의해, 공통적으로 동작해야 하는 클래스의 정의를 할 수 있다.
- 변수에 인터페이스를 정의하면, eslint에서 해당 인터페이스의 필드 값을 구현하라고 알려준다.
함수의 인자를 정의하는 인터페이스
//함수에 인터페이스 활용
function getUser(user:User){ //이 함수는 특정 형식을 중시하는 데이터만 받겠다
console.log(user)
}
const usr = {
name: '캡틴',
age: 100
}
getUser(usr); //usr 같은 경우 정의했던 User 타입이어야 오류가 나지 않는다
- getUser를 호출하는 파라미터의 타입은 반드시 User 타입이어야 한다.
함수 구조를 정의하는 인터페이스
//함수의 스펙(구조)에 인터페이스를 활용
interface SumFunction{
//함수의 전체 모습까지 인터페이스로 정의해서 제한을 할 수 있다.
(a: number, b: number): number; //숫자 2개를 받아 숫자를 리턴한다
}
var sum: SumFunction;
sum = function (a: number, b: number){
return a + b;
}
- 함수의 전체 모습의 인터페이스로 정의하여 제한을 할 수 있다.
- 숫자 두 개를 파라미터로 받아 숫자를 반환한다.
인덱싱 방식을 정의하는 인터페이스
//인덱싱
interface StringArray {
[index: number]: string //index는 숫자, 반환음 숫자
}
var arr: StringArray = ['a', 'b', 'c']
//arr[0] = 10 //특정 인덱스로 접근해서 작업을 할 때, 타입이 string 이므로 오류가 발생한다.
- 배열과 같이, 인덱싱에 대한 정의를 제한할 수 있다.
- 반환 값은 string, 내부 index는 int로 제약을 걸어 arr[0] = 10과 같이 숫자 값을 대입하려고 하면 오류가 발생한다.
딕셔너리 패턴
//인터페이스 딕션너리 패턴
interface StringRegexDictionary {
[key: string]: RegExp //key=string, value=RegExp
}
var obj: StringRegexDictionary = {
//sth: /abc/
cssFile: /\.css$/,
jsFile: /\.js$/,
}
//obj['cssFile'] = 'a' //오류가 발생, value에 정규식이 오지 않았기 떄문
Object.keys(obj).forEach(
function (value){ //타입 추론 기능 또한 사용할 수 있다.
}
)
- 딕셔너리 패턴을 활용하여, json 내부에 사용되는 프로퍼티의 타입을 제약할 수 있다.
- 타입 추론 기능 또한 사용 가능하므로 편리하다.
인터페이스 확장(상속)
//인터페이스 확장
interface Person {
name: string;
age: number;
}
interface Developer extends Person { //중복되는 프로퍼티를 상속 받을 수 있다
language: string;
}
var capt: Developer = {
language: 'hi', //name, age까지 구현해야 오류가 안난다.
age: 100,
name: '캡틴'
}
- 중복되는 프로퍼티 값은 상속을 사용할 수 있다.
- 상속을 통해 구현된 인터페이스를 사용하는 곳에서는 부모의 것 또한 구현해주어야 에러가 발생하지 않는다.
- Developer 같은 경우 language 프로퍼티밖에 없지만, Person을 상속받았기에 age, name 또한 구현해야 한다
728x90