Jacob Ko

Jacob Ko

Everything is Awesome 👍

05.TS Interface

Updated:

TS Interface

1.What are Interface ?

interface Person1 {
  name: string;
  age: number;
}

// interface 사용하지 않고 직접 type 을 지정해준 것
function hello1(person: { name: string; age: number }): void {
  console.log(`안녕하세요! ${person.name} 입니다`);
}

// interface 사용해서 type 을 지정해주는 것임
const p1: Person1 = {
  name: "Jacob",
  age: 80,
};

hello1(p1);

  • 위 코드와 같이 interface 를 이용해서 type 을 간단히 지정해 줄 수 있습니다.

  • 컴파일 하게 되면 JS 에서 아래와 같이 나타 납니다 (interface 없어짐..)

"use strict";
function hello1(person) {
  console.log(
    "\uC548\uB155\uD558\uC138\uC694! " + person.name + " \uC785\uB2C8\uB2E4"
  );
}
// interface 사용해서 type 을 지정해주는 것임
var p1 = {
  name: "Jacob",
  age: 80,
};
hello1(p1);
  • 📌 interface 는 TS 에서만 사용되는 문법입니다. 하지만, 중요하기 때문에 반드시 숙지를 하셔야 합니다.

2.optional property

사용법 1 => ? (물음표를 사용)

// ? 가 없으면 전부 필수 사항이기 때문에 꼭 넣어 야 되는 항목이지만, ? 가 있으면 있어도 되고 없어도 되는 항목이 됨

interface Person1 {
  name: string;
  age: number; // ? 가 없음..
}

interface Person2 {
  name: string;
  age?: number; // ? 기능은 optional 설정 name 은 필수고 age 는 option 이 된것임
}

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

hello2({ name: "Jacob", age: 80 });
hello2({ name: "Emma" }); // age 가 option 항목이기 때문에 값을 안넣어도 error 가 발생 되지 않음

사용법 2 => indexable type

// [index: string] 을 사용한 optional 지정 하는 방법

interface Person3 {
  name: string;
  age?: number; // ? 는 이게 있던지 없던지 option 이면
  [index: string]: any; // [index: string] 은 어떠한 string 타입이 와도 괜찬아 라는 의미임
}

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

const p31: Person3 = {
  name: "Jacob",
  age: 80,
};

const p32: Person3 = {
  name: "Emma",
  sisters: ["kelly", "Sarah"], //
};

const p33: Person3 = {
  name: "John",
  father: p31,
  mother: p32,
};

hello3(p33);

3.function in interface

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

const p41: Person4 = {
  name: "Jacob",
  age: 80,
  hello: function (): void {
    // function 을 쓰는 경우
    console.log(`안녕하세요 ${this.name} 입니다.`);
  },
};

const p42: Person4 = {
  name: "Jacob",
  age: 80,
  hello(): void {
    // function 을 안쓴 경우도 크게 다르지 않는다
    console.log(`안녕하세요 ${this.name} 입니다.`);
  },
};

// const p43: Person4 = { // this 를 안쓰면 사용이 가능함
// name: 'Jacob',
//   age: 80,
//   hello:(): void => { // arrow function 을 쓴 경우, 대신 this 를 사용하지 못함
//     console.log(`안녕하세요 ${this.name} 입니다.`);
//   },
// }

p41.hello();
p42.hello();
  • 실행 결과

스크린샷, 2021-05-11 14-40-51

4.class implements interface

  • 이 방식은 OOP 객체 지향에서 많이 사용되는 방식임니다.
// interface 를 class 에 implements 하는 방법

interface IPerson1 {
  name: string;
  age?: number;
  hello(): void;
}

// class 에 interface 를 가져와서 쓰는 방법
class Person implements IPerson1 {
  name: string;
  age?: number;

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

const person: IPerson1 = new Person("Jacob");

person.hello();

5.interface extends interface

  • interface 를 가져 와서 추가할 interface 만 골라서 추가하는 방식 입니다.

  • 즉, interface 끼리 상속 받아서 사용하는 방식 입니다

interface Iperson2 {
  name: string;
  age?: number;
}

interface IKorean extends Iperson2 {
  city: string;
}

const k: IKorean = {
  name: "고태현",
  city: "서울",
};

// HTMLDivElement 를 사용할 때 유용하게 사용 됩니다.

6.function interface

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

const helloPerson: HelloPerson = function (name: string, age: number) {
  console.log(`안녕하세요! ${name} 입니다.`);
};

helloPerson("Jacob", 80);

// error 가 나는 이유는 interface 에 ? 사용해서 age 를 넣을 수도 있고 않넣을수도 있지만,
// 실제 function 안에서는 age 항상 있는걸로 만 표현 되기 때문에 error 가 발생
// 즉, function 안에 있는 것을 interface 의 type 형태와 동일하게 맞춰 줘야 함

스크린샷, 2021-05-12 10-54-46

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

const helloPerson: HelloPerson = function (name: string) {
  console.log(`안녕하세요! ${name} 입니다.`);
};

helloPerson("Jacob", 80);

// function 에 age 가 없는 걸로 하면 error 가 발생되지 않음
// 왜냐면, interface 에서 age 는 있어도 되고 없어도 되는걸로 설정했는데, 실제 function 에서 없는 걸로 표현했기 때문에 true

7.readonly interface properties

interface Person8 {
  name: string;
  age: number;
  readonly gender: string;
}

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

p81.gender = "female";

// gender 를 readonly 가 적용되어 있기 때문에 마지막 부분에 female 로 바꾸려고 하면 error 가 발생됨
// 만약 어떤 property 가 한번 만들고 바뀌지 않는 값을 설정 할 때는 readonly 를 붙여줘서 나중에 complie 할때, error 를 막아 줌

// TS 를 사용하는 가장 큰 이유는 code 에 의도를 담아서 이렇게 하면 안되요! 라고 명시 하기 위해 사용하는 게 크기 때문에
// 그래서 변경이 되지 않는 readonly 가 유용하게 쓰일 수 있다

스크린샷, 2021-05-12 11-03-42

8.type alias vs interface

8-1.function 를 사용시 차이점

// type alias
type EatType = (food: string) => void;

// interface
interface IEat {
  (food: string): void;
}

8-2.arry 를 사용시 차이점

// type alias
type PersonList = string[];

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

8-3.intersection 를 사용시 차이점

interface ErrorHandling {
  success: boolean;
  error?: { message: string };
}

interface ArtistsData {
  artists: { name: string }[];
}

// type alias
type ArtistsResponseType = ArtistsData & ErrorHandling;

// interface
interface IArtistsResponse extends ArtistsData, ErrorHandling {}

let art: ArtistsResponseType;
let iart: IArtistsResponse;

8-4.union types 를 사용시 차이점

  • interface 는 union type 에 사용할 수 없음
interface Bird {
  fly(): void;
  layEggs(): void;
}

interface Fish {
  swim(): void;
  layEggs(): void;
}

type PetType = Bird | Fish;

interface Ipet extends PetType {} // error ts(2312): An interface can only extend an object type or intersection of object types with statically known members.

class Pet extends PetType {} // error ts(2422): 'PetType' only refers to a type, but is being used as a value here.

8-5.Delacration Merging - interface

-type alias 에서는 없는 기능 입니다.

// 똑같은 부분의 interface 를 사용하더라도, 나중에 사용할 때는 하나로 합치게 됨.
interface MergingInterface {
  a: string;
}

interface MergingInterface {
  b: string;
}

let mi: MergingInterface;
mi.

// 같은 이름으로 interface 가 작성 되었기 때문에 mergign 되었기 때문에, 골라서 사용이 가능하다

스크린샷, 2021-05-12 11-39-37

  • 기존에 사용한 interface 에 추가해서 사용하고 싶을 때 선언하면 자동으로 합쳐져서 나중에 골라서 사용할 수 있습니다

  • 🔶 type alias: 단순히 어떤 Type 을 부르는 이름이라고 생각하면 됩니다.

  • 🔷 interface: 새로운 Type 을 만들어 낸다고 생각하면 됩니다.

🔶 🔷 📌 🔑

Reference

Leave a comment

You may also enjoy