TypeScript(7)-Implements vs Extends, Keyof operator

Extends

Extends 키워드는 자바스크립트에서도 사용할 수 있으며 부모 클래스에 있는 프로퍼티나 메소드를 상속해서 사용할 수 있게 만들어준다.

Implements

Implements 키워드는 새로운 클래스의 타입체크를 위해서 사용되며, 그 클래스의 모양을 정의할때 사용한다.
(부모 클래스의 프로퍼티와 메소드를 상속받아서 사용하는게 아님!!!!)

class Car{
  mileage =0 ;
  price =100;
  color ='white';
  
  drive(){
    return 'drive!';
  }
  brake(){
    return 'brake';
  }
}

class Ford extends Car{
  
}

const myFordCar = new Ford();
myFordCar.color

여기서 아래부분을 implement로 바꿔주면

class Ford implements Car{
  
}

오류가 뜬다
처리하려면 -> Ford 클래스에도 Car클래스에 있는 속성들을 넣어주면 된다.

class Ford implements Car{
  mileage =0 ;
  price =100;
  color ='white';
  
  drive(){
    return 'drive!';
  }
  brake(){
    return 'brake';
  }
}
const myFordCar = new Ford();

keyof operator

keyof 연산자는 제공된 타입의 키를 추출하여 새로운 union 유형으로 반환한다.

interface IUser {
  name:string;
  age:number;
  address:string;
}

type UserKeys = keyof IUser;
//'name' | 'age' | 'address'

typeof keyof

typeof 연산자와 함께 사용하면 keyof연산자는 객체의 모든 키에 대한 union형식을 반환한다.

const user =  {
  name:'john';
  age:20;
  address:'seoul';
}

type UserKeys = keyof typeof user;
//'name' | 'age' | 'address'

user는 type이 아니라 object이기 때문에 먼저 typeof를 사용해서 객체의 타입을 가져온 다음에 keyof를 사용해서 해당 키를 추출하는거!!!

enum 에서의 keyof

enum에서 모든 키를 추출하려면 keyof연산자와 typeof연산자의 조합으로 사용해야한다.

enum UserRole{
  admin,
  manager,
}
type UserRoleKeys = keyof typeof UserRole;
// 'admin' | 'manager';

-> keyof 는 type에서 키를 추출할때 유용하다