TS 스터디 회고록 - 3

⌨️서론

이번에도 계속해서 TypeScript와 관련되어 필자가 헷갈리는 부분을 적어보고자 한다. Javascript에 있는 내용일 수도 있지만 최대한 겹치는 부분은 피하면서 적을 예정이다. 🙇‍♂️
이번엔 Interface, Class, Generic에 관해서 집중적으로 다뤄보고자 한다.📖
지난번 회고에서도 적었듯이 최대한 정확한 정보로 작성하고는 있지만 불가피하게 잘못 된 정보를 적을 수도 있다는 점 미리 양해바란다.

---

Interface

interface란?

타입에 이름을 지어주는 또 다른 문법, 객체의 구조를 정의하는데 특화된 문법(상속, 합침 등의 특수한 기능을 제공한다)이다.

⭐️타입과 차이점?

• 인터페이스 자체에서 유니온이나 인터섹션을 만들 수는 없다. 꼭 이용해야한다면 타입 별칭이나 타입 주석에 따로 해줘야한다.
• 선언 합침 => 인터페이스의 경우에는 동일한 이름으로 하고 선언해도 문제가 되지 않는데, 나중에 다 합쳐져 있기 때문이다.
  (중복선언 가능, 선언 merge가 된다.) 하지만 재선언을 할 수는 없다.. 하더라도 동일한 타입만 적용이 가능하기 때문

interface 상속하는 방법

interface Animal {
  name: string;
  color: string;
}

interface Dog extends Animal {
  breed: string;
}

interface Cat extends Animal {
  isScratch: boolean;
}

interface Chicken extends Animal {
  isFly: boolean;
}

🚨Point🚨
프로퍼티에 재 정의가 가능하지만, 다시 정의하는 타입이 슈퍼타입 동일한 이름의 원본 프로퍼티의 하위여야 한다.
(쉽게 말해서 Animal name에 string을 해놨는데 Dog name에 number로 재설정을 할 수가 없다는 뜻!)
다중확장도 가능하다. 예를 들어 extends Dog,Cat일 경우에는 Dog, Cat에 해당하는 프로퍼티를 모두 갖게 되는 것이다.

Class

예전에 Class기록한 곳
class constructor나 상속과 같은 Class 기본적인 부분은 다루지 않을 것이다. 위의 링크에서도 일부만 다뤘는데 그 이유는 다른 문법에서도 이 Part는 OOP부분으로 비슷하게 나오기 때문에 작성하지 않는 점 양해바란다.
https://www.typescriptlang.org/docs/handbook/2/classes.html
⬆️ 이 사이트에 가면 공식적으로 나와 있기 때문에 참고하면 좋을 것 같다.

Interface & Class

Class Character implements CharacterInterface {
interface부분이 설계도같은 느낌이 된다.
그러고 Interface에 있는 부분을 다 넣어주면 되고 constructor도 만들어줄 수 있다.
interface는 무조건 public만 지정을 해줄 수 있다
}

예시코드

abstract class User{constructor(protected firstName:string,
protected lastName:string){}
abstract sayHi(name:string):string
abstract fullName():string}

class Player extends User{fullName(){return `${this.firstName}`}
sayHi(name:string){return `Hello ${name}.My name is ${this.fullName()}`}}

//추상 클래스는 이것으로부터 인스턴스를 만드는 것을 허용하지 않는다. new User이런거 안됨
//추상 클래스를 인터페이스로 바꾸기

interface User{firstName:string,
lastName:string,
sayHi(name:string):string
fullName():string}
//extends는 JS의 용어이기 때문에 implements라는 용어를 쓸 것이다.
//인터페이스를 상속할 때에는 property를 private으로 만들 수 없다.(무조건 public만 가능!)
class Player implements User{constructor(public firstName:string,
public lastName:string){}
fullName(){return `${this.firstName}`}
sayHi(name:string){return `Hello ${name}.My name is ${this.fullName()}`}
}

/*인터페이스는 고유한 사용처가 있다.클래스의 모양을 알려준다.인터페이스도 타입으로 쓸 수 있고
여러 개의 인터페이스 상속 받는 것도 가능하다*/

Generic

사용법

func<T> Type을 저장하는 변수라는 뜻 매개변수랑 반환값도 T로 바꿔줘야 한다.
함수를 호출했을 때 Type이 추론된다.
예시코드

function func<T>(value: T): T {
  return value;
}

let num = func(10);
// number 타입
// 튜플처럼 만들고 싶다면? Func<[number, number, number]>([1,2,3]); 

❗️알아두면 좋은 것 ❗️
<T,U>(a : T , b : U) => 여러 개 선언해서 사용이 가능하다.
제네릭으로 배열을 할당하고 0번째 index를 호출하고 싶다면? 그러면 매개변수에 T[]로 해주면 된다.
그러면 어떤 타입인지는 몰라도 그 타입의 형태가 배열일것이다 라고 추론을 하게 된다. 혹은 매개변수에 [T, …unknown[]] 이렇게 하기(이 경우에는 0번째 index말고는 다른 곳의 type은 필요없을 때만 활용이 가능하다.)
타입은 몰라도 length를 알고 싶다면? <T extends {length : number}> ⬅️ 이러면 length라는 프로퍼티를 가지는 타입만 추론이 가능하게 된다.

제네릭 인터페이스 와 제네릭 타입 별칭

코드예시

interface KeyPair<K, V>{
key : K;
Value : V;
}
//타입을 직접 할당을 해줘야 에러가 안 일어난다!
const keyPair : KeyPair<string, number> = { key : “key”, value : 0,}

인덱스 시그니처를 제네릭과 조합하여 더 유연하게 활용이 가능하다.

예시는 두 개의 타입 변수를 활용한 코드이다.

interface Map<V> {[key : string] : V;} 
interface MainPlaylistProps<V, U>{
    [key : string] : V | U;
}

const exampleMap :MainPlaylistProps<number,string> = {
  type: "playlist",
  playlistIdx: 3,
  playlistName: "test",
  backgroundIdx: 1,
  userIdx: 0,
  imageIdx: 2,
}

❗️type에 따라서 다르게 지정하는 제네릭 인터페이스의 활용 예시❗️

interface User {name : string, profile : Student | Developer;}
제네릭을 활용할 시 ➡️ interface User{name : string, profile : T}
이를 활용하고 싶다면 ➡️ User<Developer> User<Student> 이렇게 지정을 해줘야한다.

제네릭 클래스

기존 클래스와의 차이점?

기존의 클래스의 경우, number[]와 string[]가 동시에 필요하다면 두 개의 별도의 class를 만들어야 하는 비효율 발생하게 된다.
이를 제네릭 클래스를 활용할 경우에는 이러한 비효율을 방지할 수 있다.

  //제네릭 클래스 활용 예시
  class List<T>{constructor(private list : T[]){} push(data : T){this.list.push(data)}}

---

📚참고문헌
https://nomadcoders.co/typescript-for-beginners
https://www.inflearn.com/course/한입-크기-타입스크립트/dashboard
https://www.typescriptlang.org/docs/handbook/2/classes.html