4. interface

객체의 구조를 정의하는 방법이다.

 

function getStudentDetails(studentID: number): {
  studentID: number;
  studentName: string;
  age: number;
  gender: string;
  subject: string;
  cousrseCompleted: boolean;
} {
  return null;
}

객체의 return타입을 object로 하고싶다면 이렇게 해주면 된다.

하지만 이렇게 하면 지저분해보일뿐더러 다시 사용할 때 똑같이 적어주어야 하는 번거로움이 생긴다.

object를 만든다고해서 타입을 object라고 적으면안된다. interface를사용해야한다! 

그래서 우리는 interface를 사용하여 좀 더 편리하게 코드를 작성할 수 있다.

 

 

TS에서의 이름짓기 규칙은 I를 적지않고 첫글자를 대문자로 적어주는 것이다.

interface Student {
  studentID: number;
  studentName: string;
  age: number;
  gender: string;
  subject: string;
  cousrseCompleted: boolean;
}

function getStudentDetails(studentID: number): Student {
  return {
    studentID: 123456,
    studentName: "taehyeki",
    age: 5,
    gender: "male",
    subject: "typescript",
    cousrseCompleted: true,
  };
}

이렇게 해줄 수 있다. interface의 프로퍼티를 다 입력해주어야한다. 하나라도 입력하지 않으면 오류 !!

하지만 interface에 정의되어있는 값중 age 하나를 생략하고 싶을땐 어떻게 하면 될까? 

콜론( : ) 앞에 ?를 붙여주면 해결된다.

 

또한 readonly라는 프로퍼티를 설정하게 된다면 읽기 전용이므로 객체 생성시 할달된 프로퍼티의 값을 바꿀 수 없다.

interface Student {
  readonly studentID: number;
  studentName: string;
  age?: number;
  gender: string;
  subject: string;
  cousrseCompleted: boolean;
}

function getStudentDetails(student:Student):void{
  
  student.studentID = 13;
}

또한 readonly라는 프로퍼티를 설정하게 된다면 읽기 전용이므로

객체 생성시 할달된 프로퍼티의 값을 바꿀 수 없다. 최초에 생성할때만 할당이 가능하다.

 

 

값을 바꾸려고 한다면

읽기 전용 속성이므로 'studentID'에 할당할 수 없습니다.ts(2540)이라는 오류메시지가 뜬다

 

[grade:string]:number

string을 key로 하고 number를 밸류로 받는 프로퍼티를 여러개 만들 수도 있다. 

 

 

 

그리고 여기서 gender에는 'male'과 'female'만 오게 하고싶다면 어떻게 하면될까 ??

방법은 크게 2가지가 있다.

1. enum을 활용하는 방법

2. 리터럴을 활용하는 방법

먼저 enum을 사용해보자

 

enum GenderType {
  Male = "Male",
  Female = "Female",
}

"Male","Female"이라는 값을 설정해주지 않으면 숫자 열거형으로 된다. GenderType.Male = 0, GenderType[0] = 'Male'

string 값을 넣어주면 (GenderType[0]을 사용못함) GenderType.Male or GenderType['Male'] = "Male" 이라는 값을 도출 할 수 있다.

interface Student {
  readonly studentID: number;
  studentName: string;
  age?: number;
  gender: GenderType;
  subject: string;
  cousrseCompleted: boolean;
}

function getStudentDetails(student: Student): void {
  student.gender = GenderType.Female;
}

 gender에 type을 enum GenderType으로 지정해준 뒤

값을 지정할 때 enum을통해서 지정하면 된다.

 

다음은 리터럴타입인데 정말 간단하다. 설명없이 코드만 보고도 이해가 될 것이다.

interface Student {
  readonly studentID: number;
  studentName: string;
  age?: number;
  gender: "Male" | "Female";
  subject: string;
  cousrseCompleted: boolean;
}

function getStudentDetails(student: Student): void {
  student.gender = "Male";
}

함수또한 interface로 정의할 수 있는데

interface Add {
  (num1: number, num2: number): number;
}

const add: Add = (x, y) => x + y;

console.log(add(1, 4));

interface 인터페이스명 {

 (매개변수:타입...):리턴타입 }이렇게 정의해주면된다. 

 

interface Car {
  color: string;
  wheels: number;
  start(): void;
}

class Bmw implements Car {
  color: string;
  wheels = 4;
  constructor(color: string) {
    this.color = color;
  }
  start() {
    console.log("go");
  }
}

implements를 활용하여 클래스또한 인터페이스로 타입을 지정할 수 있다.

 

 

interface A {
	color: string;
    wheels: number;
    }
    
interface B extends A {
    speed:number;
    }
    
const Car:B = {
  color: 'white',
  wheels: 4,
  speed: 100}

extends를 활용하여 기존의 interface의 내용을 추가할 수도 있다.

이 경우에는 포함하고 있는 내용 또한 다 초기화를 해줘야 합니다.

 

interface A {
    color:string;
    wheels:number;
}
interface B{
	name:string;
    }
    
interface C extends A,B {
   price:number;
}

extends를 두개이상 해서 만들 수도 있다..

 

너무 많아서 헷갈리는데 두고두고 보면서 공부해야겠다..ㅠㅠ

 

그리고 interface는 자바스크립트로 compile할 때 코드에서 그냥 지워버립니다.

app.ts에서 app.js를 보았을 때 interface를 찾아도 안보입니다!!)