[TypeScript]_Interface

hanseungjune·2023년 3월 4일
0

비전공자의 IT준비

목록 보기
49/68
post-thumbnail

📌 코드 해석

type Score = 'A' | 'B' | 'C' | 'F'

interface User {
  name : string;
  age : number;
  gender? : string;
  readonly birthYear : number;
  [grade:number] : Score;
}

let user : User = {
  name : 'xx',
  age : 30,
  birthYear : 2000,
  1 : 'A',
  2 : 'B'
}
  • Score라는 문자열 리터럴 타입을 정의하고, 이 타입은 'A', 'B', 'C', 'F' 중 하나의 값을 갖습니다.
  • User라는 인터페이스를 정의하고, 이 인터페이스는 다음과 같은 속성을 가집니다.
    • name: string 타입
    • age: number 타입
    • gender?: string 타입 (선택적 속성)
    • birthYear: number 타입, 읽기 전용 속성
    • [grade:number]: Score 타입, 인덱서(indexer)로서 number 타입의 속성 이름을 가지고, 해당 속성의 값은 Score 타입입니다.
  • user 변수를 User 타입으로 선언하고, User 인터페이스의 속성에 값을 할당합니다. 이때, User 인터페이스에 정의된 인덱서를 사용하여 1과 2라는 이름의 속성에 각각 'A'와 'B'를 할당합니다.

위의 코드는 유저 정보를 담고 있는 인터페이스를 정의하고, 인덱서를 사용하여 유저의 등급을 저장할 수 있는 코드입니다. 이를 통해 다양한 등급 값을 저장하고, 필요한 등급 값을 손쉽게 조회할 수 있습니다.

// Dictionary 인터페이스 정의
interface Dictionary<T> {
  [key: string]: T; // 인덱서(indexer)로서, string 타입의 속성 이름을 가지고, 해당 속성의 값은 T 타입입니다.
}

// Dictionary<number> 타입의 변수 dict를 선언하고, 값을 할당합니다.
let dict: Dictionary<number> = { a: 1, b: 2, c: 3 };

// dict 객체의 'b' 속성 값을 출력합니다. 출력 결과는 2가 됩니다.
console.log(dict['b']);

위 코드는 Dictionary<T> 인터페이스를 정의하고, 이를 이용해 dict 변수를 선언하고 초기값을 할당합니다. dict 변수는 Dictionary<number> 타입을 가지므로, 인덱서를 이용해 string 타입의 키로 number 타입의 값을 할당할 수 있습니다. 마지막으로, dict 객체의 'b' 속성 값을 출력하면 2가 출력됩니다.

// Add 인터페이스 정의
interface Add {
  (num1:number, num2:number): number;
}

// Add 인터페이스를 이용해 add 함수를 정의
const add : Add = function(x, y){
  return x + y; 
}

// add 함수 호출
add(10, 20);

// IsAdult 인터페이스 정의
interface IsAdult {
  (age:number):boolean; 
}

// IsAdult 인터페이스를 이용해 a 함수를 정의
const a:IsAdult = (age) => {
  return age > 19;
}

// a 함수 호출
a(33);

AddIsAdult라는 두 개의 인터페이스를 정의하고, 이를 이용해 각각 adda라는 함수를 정의하고 있습니다.

  • Add 인터페이스는 (num1: number, num2: number) => number 타입의 함수 시그니처를 가지고 있습니다. 즉, num1num2라는 두 개의 숫자 타입 인자를 받아서, 숫자 타입을 반환하는 함수입니다.

  • IsAdult 인터페이스는 (age: number) => boolean 타입의 함수 시그니처를 가지고 있습니다. age라는 숫자 타입 인자를 받아서, boolean 타입 값을 반환하는 함수입니다.
    각각의 인터페이스를 이용해서 adda라는 두 함수를 정의하고 있습니다.

  • add 함수는 Add 인터페이스를 이용해서 정의한 것으로, 두 개의 숫자를 더한 결과를 반환합니다.

  • a 함수는 IsAdult 인터페이스를 이용해서 정의한 것으로, age 인자가 19보다 큰 경우 true를 반환하고, 그렇지 않은 경우 false를 반환합니다.

// Car 인터페이스 정의
interface Car {
  color: string;
  wheels: number;
  start(): void;
}

// BMW 클래스 정의, Car 인터페이스를 구현(implement)함
class BMW implements Car {
  color: string;
  wheels = 4;
  constructor(c:string){
    this.color = c;
  }
  start() {
  	console.log('go...')
  }
}

// BMW 클래스 인스턴스 생성
const b = new BMW('green');
console.log(b);
b.start();

// Toy 인터페이스 정의
interface Toy {
  name: string;
}

// ToyCar 인터페이스 정의, Car 인터페이스와 Toy 인터페이스를 확장(extend)함
interface ToyCar extends Car, Toy {
  price: number;
}

주어진 코드에서는 Car 인터페이스를 정의하고, BMW 클래스를 이용해 Car 인터페이스를 구현하고 있습니다. 이 클래스는 colorwheels 프로퍼티를 가지고 있으며, start() 메소드를 구현하고 있습니다.

Toy 인터페이스도 정의되어 있으며, ToyCar 인터페이스는 Car 인터페이스와 Toy 인터페이스를 확장하고(extend), price 프로퍼티를 추가로 가지고 있습니다. 이렇게 정의된 ToyCar 인터페이스를 이용하면, 자동차와 관련된 속성 뿐 아니라, 장난감 자동차와 관련된 속성까지 모두 다룰 수 있는 유용한 인터페이스를 만들 수 있습니다.

profile
필요하다면 공부하는 개발자, 한승준

0개의 댓글