Typescript(2) - interface

이번 포스팅에서는 typescript의 interface에 대해서 포스팅 해보겠습니다.

interface?🤔

TypeScript의 interface는 객체의 구조를 정의하는 역할을 합니다. 즉, 인터페이스는 객체의 속성과 메서드를 설명하고, 해당 객체가 어떤 형태를 가져야 하는지를 정의하는 일종의 계약이라고 할 수 있습니다.

interface를 사용하면 객체가 특정한 구조와 멤버를 갖도록 강제할 수 있으며, 이를 통해 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.

interface의 사용으로 객체 구조안의 타입의 강제성을 부여

interface 예제

interface를 사용하지 않은 객체

let user:object;

user = {
    name: 'kang',
      age: 22,
}

console.log(user.name) // 'kang'

user의 타입은 추론이 가능하지만 user안의 변수들에 대하여
타입의 추론이 어렵기 때문에
interface를 사용하여 객체안 타입에 강제성을 부여

interface를 사용한 객체

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

let user:User = {
    name: 'kang',
      age: 22
}

이런식으로 선언이 가능합니다.
user:User 로써 저희가 만든 User라는 interface를,
user라는 변수에 지정해줍니다.

이로써 user 객체에 타입을 강제적으로 부여할 수 있습니다.

예를 들어, age에 string 타입이 들어가면 오류가 날 것 입니다.

readonly

interface User {
    name: string;
      age: number;
      readonly birth : string;
}

let user:User = {
    name: 'kang',
      age: 22,
      birth: '2023-06-02',
}

user.birth = '2023-06-01' // error

readonly는 수정할 수 없는 변수를 의미합니다.
마지막줄에 user.birth = ~~ 처럼 수정시 에러를 발생합니다.

interface 예제 2

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

const add : Add = function(x,y){
  return x + y;
}

add(10,20) // 30

interface Add 로 두개를 더한 값을 return하는 함수를 생성

interface 예제 3

interface IsAdult {
    (age:number):boolean;
}

const isAdult: IsAdult = (age) => {
    return age > 19
}

isAdult(33) // true

마찬가지로 age:number로 정수를 입력받고,
결과값은 boolean으로 나오도록 구성되어 있습니다.

interface 예제 4

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

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

const kang = new Benz('black');

implements로 class에 Car타입을 부여합니다.

interface 예제 5

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

interface Toy {
    name: string;
}

interface ToyCar extends Car,Toy {
    price:number;
}

이 부분이 의아할 수 있습니다.
결론적으로 ToyCar는 Car와 Toy안의 정의된 변수타입들을
모두 사용할 수 있습니다.
그리고 추가적으로 price라는 변수까지 확장해서 사용할 수 있는
interface입니다.

그럼 총 6개의 지정된 변수 타입을 사용 할 수 있을 것 같습니다.

다음 포스팅에서는 함수에 대해서 본격적으로 들어가 보도록 하겠습니다.