타입스크립트 - 인터페이스

드엔트론프·2023년 8월 2일
0

typescript

목록 보기
7/12
post-thumbnail
  • 타입에 이름을 지어주는 또 다른 문법. - 객체의 구조를 정의하는데 특화된 문법
  • 거의 type 정의하는거랑 똑같다.
interface Person {
  readonly name: string;
  age?: number;

  //호출 시그니쳐로 해야 오버로딩을 구현할 수 있다.
  sayHi(): void
  sayHi(a: number, b: number): void;

  //화살표로 하면 중복됐다며 안됨,
  // sayHi: () => void;
  // sayHi: (a: number, b: number) => void;
}

const person: Person = {
  name: "kim",
  sayHi: function(){
    console.log('hi')
  }
  };

person.sayHi()
person.sayHi(1,2)
  • 참고로 함수 오버로딩을 하려면 화살표 함수로 정의하면 안된다. 호출 시그니쳐 형태로 해야 한다.

인터페이스 확장

/**
 * 인터페이스 확장
 */

type Animal = {
  name: string;
  age: number;
}

interface Dog extends Animal {
  isBark: string;
}

interface Cat extends Animal {
  isScratch: string;
}

interface DogCat extends Dog, Cat {}

const dogCat: DogCat = {
  name: "",
  age: 1,
  isBark: "w",
  isScratch: "",
};
  • 알던것들이지만, 추가적으로 몰랐던 건 Animal이 interface가 아니라 type이어도 상속 가능하다는거

인터페이스 합침

/**
 * 선언 합침
 */

interface Person {
  name: string;
}

interface Person {
  age: number;
}

const person: Person = {
  name: "aa",
  age: 12,
};
  • type은 같은 이름으로 정의하면 에러가 발생하지만, 인터페이스는 나지 않는다.
  • 단, 예를들어 두 번째 Person 인터페이스에 name을 다시 정의하려고 할 때 타입을 string이 아닌 다른거로 하면 에러가 발생한다. 심지어 string 서브인 리터럴 string 같은거로 해도 에러가 난다.
interface Person {
  name: string;
}

interface Person {
  name: '1'; //후속 속성 선언에 같은 형식이 있어야 합니다. 'name' 속성이 'string' 형식이어야 하는데 여기에는 '"1"' 형식이 있습니다.ts(2717)
						 //chapter2.ts(6, 3): 여기서도 'name'이(가) 선언되었습니다.
  age: number;
}
  • 그래서 뭐 해주려면 같은 타입으로 해야된다는거.
  • 이런 선언 합침은 평소에는 잘 안쓰고, 모듈같은거 쓸 때 간혹 추가적인 일이 필요할 때 사용(모듈 보강 이라고 한다)을 한다고 한다.
  • 예를들어 lib이라는 타입을 사용하고 있었는데, 언젠가 c 라는 게 더 필요할때?
/**
 * 모듈 보강
 */

interface Lib {
  a: number;
  b: number;
}

interface Lib {
  c: string;
}

const lib: Lib = {
  a: 1,
  b: 2,
  c: "hello",
};
profile
왜? 를 깊게 고민하고 해결하는 사람이 되고 싶은 개발자

0개의 댓글