TypeScript interface 정리

01.What are interface?

• 데이터 구조의 타입을 지정해둔 것으로 타입스크립트에만 존재하는 문법이다.
• 컴파일타임에만 필요한 문법으로 JS로 변환시 사라진다.

// Person1 인터페이스 생성
interface person1 {
  name: string;
  age: number
}

function hello1(person: person1) : void {
  console.log(`안녕하세요! ${person.name} 입니다.`);
}

const p1: person1 = {
  name: "Mark",
  age: 39,
};

hello1(p1);

02.optional property(1)

• ?를 사용해서 상황에 따라 선택적 프로퍼티 설정 가능

interface person2 {
  name: string; // 필수 속성
  age?: number; // 선택 속성
}

function hello2(person: person2) : void {
  console.log(`안녕하세요! ${person.name} 입니다.`);
}

hello2({name: "Mark", age: 39});
hello2({name: "Anna"});

03.optional property(2)

• [key : KeyType] : PropertyType 형태로 지정이 가능하다.
• 이렇게 지정하면 KeyType의 키로 속성에 접근이 가능하다.
• 참고로 key라는 이름은 임의로 정한 것이다. 아무 이름이나 써도 무방하다.

// indexable type
interface person3 {
  name: string;
  age?: number;
  [index: string]: any; // indexable => perperty 이름을 자유롭게 지정 가능
}

function hello3(person: person3): void {
  console.log(`안녕하세요! ${person.name} 입니다.`);
}

const p31: person3 = {
  name: "Mark",
  age: 39,
};

const p32: person3 = {
  name: "Anna",
  systers: ["Sung", "Chan"],
};

const p33: person3 = {
  name: "Bokdaengi",
   // any이기 때문에 객체도 지정 가능.
  father: p31,
  mother: p32,
};

hello3(p33); // p31, p32 다 가능

04.function in function

interface Person4 {
  name: string;
  age: number;
  hello(): void; // function
}

const p41: Person4 = {
  name: "Mark",
  age: 39,
  // function in function (1)
  hello: function(): void {
    console.log(`안녕하세요~ ${this.name} 입니다.`);
  },
};

const p42: Person4 = {
  name: "Mark",
  age: 39,
  // function in function (2)
  hello(): void {
    console.log(`안녕하세요~ ${this.name} 입니다.`);
  },
};

// const p43: Person4 = {
//     name: 'Mark',
//     age: 39,
//     // 3. arrow 함수 안에서는 this 사용 불가.
//     hello: (this: Person4): void => {
//         console.log(`안녕하세요. ${this.name} 입니다.`);
//     },
// };

p41.hello();
p42.hello();

// node를 사용해서 실행. (VS code 터미널)
$ npx tsc
$ node interface4.js
안녕하세요. Mark 입니다.
안녕하세요. Mark 입니다.

05.class implements interface

interface IPerson1 {
  name: string;
  age?: number;
  hello(): void;
}
// implement => interface 내용을 바탕으로 Person 이라는 클래스 생성 가능
class Person implements IPerson1 {
  name: string;
  age?: number | undefined;

  // name의 초기값 지정
  constructor(name: string) {
    this.name = name;
  }

  hello(): void {
   console.log(`안녕하세요! ${this.name} 입니다.`);
  } 
}

// class 이름보다는 interface이름을 부르는 것 권장
const person: IPerson1 = new Person("Mark");
person.hello();

06.interface extends interface

interface IPerson2 { 
  name: string;
  age?: number;
}
// interface 상속
interface IKorean extends IPerson2 {
   // 새로운 속성 추가
  city: string;
}

const k: IKorean = {
  name: "일상 코딩",
  city: "대구",
};

09.function interface

interface HelloPerson {
  (name: string, age?: number): void;
}

// helloPerson함수의 타입체크는 HelloPerson interface를 적용
// 대입되는 구현체 함수의 매개변수에 age:number 적용 시 오류
const helloPerson: HelloPerson = function(name: string, age?: number) {
  console.log(`안녕하세요! ${name} 입니다,`);
};

// 뒤에 있는 구현체 함수가 아닌 앞에서 타입체크한 interface의 프로퍼티가 적용된다.
helloPerson("Mark", 39);

10.Readonly interface Properties

interface Person8 {
  name: string;
  age?: number;
  readonly gender: string;  // gender 값을 읽기만 하고 변경할 수 없게 하기 위해서 readonly 사용!
}

const p81: Person8 = {
  name: "Mark",
  gender: "male",
};

// 수정불가능하기 때문에 오류 발생..
// p81.gender = "female";

11.type alias vs interface

function

// type alias
type SayHiType = (name: string) => void;

// interface
interface ISayHi{
  (name: string): void;
}

array

// type alias
type PersonList = string[];

// interface
interface IPersonList {
 [index: number]: string;
}

intersection

interface A{}
interface B{}

// type alias
type ABType = A & B;

// interface
interface IAB extends A, B {}

union types

interface Bird{}
interface Fish{}

// type alias만 가능!
type PetType = Bird | Fish;

interface IPet extends PetType {} // 에러, 불가능
class Pet implements PetType {} // 에러, 불가능

Declaration Merging

• 동일한 타입 선언 자동 병합(ex, 인터페이스 확장)

interface 가능

interface A{
  a: string;
}
interface A{
  b: string;
}

let p: A;
p.a // 가능
p.b // 가능

type alias 불가능

type A = {
  a: string;
}
type A ={ // 컴파일 에러 (동일한 타입 선언) 
  b: string;
}

• alias: 타입을 부르는 이름 생성
• interface: 새로운 타입 생성