26일차

🍘

26일차

 

Part 4. TypeScript Essentials

Ch 5. Interfaces

 

---

 

Ch 5. Interfaces

 

 

외부적으로 드러나는 객체의 사용 방식이 적혀있는 타입

 

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 

interface Person3 {
  name: string;
  age?: number; // optional property
  [index: string]: any; // optional property
}

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",
  father: p31,
  mother: p32,
};

hello3(p33);

 

 🔗 Function In Interface 

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

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

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

// this를 사용하기 때문에 이 코드에선 적용 불가
// const p43: Person4 = {
//   name: "Mark",
//   age: 39,
//   hello: (): void => {
//     console.log(`안녕하세요! ${this.name} 입니다.`);
//   },
// };

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

 

 🔗 Class Implements Interface 

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

class Person implements Iperson1 {
  name: string;
  age?: number | undefined;

  constructor(name: string) {
    this.name = name;
  }

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

const person: Iperson1 = new Person("Mark");
person.hello();

 

 🔗 Interface Extends Interface 

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

interface IKorean extends Iperson2 {
  city: string;
}

const kL: IKorean = {
  name: "이웅재",
  city: "서울",
};

 

 🔗 Function Interface 

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

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

helloPerson("Mark", 39);

 

 🔗 Readonly Interface Properties 

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

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

p81.gender = "female"; // Error 변경 불가 (read only)

 

 🔗 Type Alias vs Interface 

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

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

 

 🔗 Declaration Merging - Interface 

interface MergingInterface {
  a: string;
}

interface MergingInterface {
  b: string;
}

let mi: MergingInterface;
mi.a; // a b 둘 다 가능 (Declaration Merging)
mi.b;