본문 바로가기
프로그래밍 언어/TypeScript

interface

by zieunee 2022. 2. 14.
반응형

타입을 만들어 내는 방식

function hello1(person: { name: string; age: number }): void {
  console.log(`하이 ${person.name} 입니다.`);
}

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

hello1(p1);

{ name: string; age: number } 얘를 조금 더 구조화 시킬 수 있지않을까?

아래처럼 사용하기!

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

function hello1(person: Person1): void {
  console.log(`하이 ${person.name} 입니다.`);
}

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

hello1(p1);

optional property

  1. ?
interface Person2 {
  name: string;
  age?: number;
}

? 는 있을수도 있고 없을 수 도 있다는 의미

  1. []
interface Person2 {
  name: string;
  age?: number;
  [index: string]: any
}
a['index']

a['index'] 어떤 값이던 들어갈 수 있다.

function interface

interface Person4 {
  name: string;
  age: number;
  hello(): void;
}
const p41: Person4 = {
  name: "John",
  age: 42,
  hello: function (): void {
    console.log(`hi ${this.name} 입니다.`);
  },
};
const p42: Person4 = {
  name: "John",
  age: 42,
  hello(): void {
    console.log(`hi ${this.name} 입니다.`);
  },
};

class implements interface

interface IPerson {
  name: string;
  age?: number;
  hello(): void;
}
class Person implements IPerson {
  name: string;
  age?: number | undefined;
  constructor(name: string) {
    this.name = name; //초기값 지정
  }
  hello(): void {
    console.log(`하이 ${this.name} 입니다. `);
  }
}

const person: IPerson = new Person("Mark");

interface extends interface

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

interface IKorean extends IPseron2 {
  city: string;
}

const k: IKorean = {
  name: "jieun",
  city: "서울",
};

function interface

interface HelloPerson {
  (name: string, age?: number): void;
}
const helloPerson: HelloPerson = function (name: string, age?: number) {
  console.log(`안녕 ${name} 입니다.`);
};

helloPerson("mark", 39);

/// or 
interface HelloPerson {
  (name: string, age?: number): void;
}
const helloPerson: HelloPerson = function (name: string) {
  console.log(`안녕 ${name} 입니다.`);
};

helloPerson("mark", 39);

Readonly Interface

interface Person9 {
  name: string;
  age?: number;
  readonly gender: string;
}

const p81: Person9 = {
  name = "mark",
  gender = "male",
};

p82.gender = "female";
//readonly이기 떄문에 오류가 난다.

Interface vs type alias

같은 이름의 인터페이스 사용가능 vs alias 는 불가능 하다.

extends 로 다중상속 vs &으로 가져오기

union type은 interface 로 표현 어려움 vs | 로 union type가능

반응형

'프로그래밍 언어 > TypeScript' 카테고리의 다른 글

basicType  (0) 2022.02.13