● 5월 31일/ Section 4 / Unit5 - [TypeScript] 기초

● 오늘 공부 한 것

[기본 타입]

 

❍ Enum

열거형을 알고는 있었지만, 어떻게 써야할지에 대해서 고민을 했던 것 같습니다. 오늘 공부를 하면서 타입의 '쓰임새'에 집중하다보니 좀 더 쉽게 이해할 수 있었던 것 같습니다. Enum같은 경우에는 상수화하여 상수들의 네임스페이스화?를 활용할 때 쓰기 좋을 것 같다고 생각했습니다. 또한 기존 자바스크립트는 키를 통해서만 값에 접근할 수 있었는데, enum같은 경우에는 키와 값이 서로 접근이 가능하다는 것도 편리한 기능이라고 생각했습니다.

• 키와 값이 서로 접근이 가능하다.
• 값의 상수화를 시켜 사용하기 좋다.
• Enum은 서로 호환이 되지 않는다.

enum Status { Ready, Waiting };
enum Color { Red, Blue, Green };

let status = Status.Ready;
status = Color.Green;  // Error

 

❍ interface

인터페이스 같은 경우에는 객체를 구조화 시키는 기능이라고 생각했는데, 함수도 구조화 시킬 수 있다는 것을 알 수 있었습니다.

interface Daeun {
	(name:string) : string;
}

let func : Daeun = (name : string )=> { return name }

 

• interface는 extends 할 수 있다.
• implement 개념은 클래스가 interface 형식을 준수할 때 쓰인다.
• extends는 같은 형식에서만 서로 쓰일 수 있다. (interface extends interface) / (class extends class)

 

❍ Type Aliase

타입 별칭 같은 경우, 타입을 명확히 지정하고 싶을 때 사용 할 수 있다.

type Daeun = string | number;

let str: Daeun = 'kim';

 

가장 크게 들었던 의문점은 왜 인터페이스를 쓸까? Type Aliase랑 서로 무슨 차이가있을까에 대한 고민을 했었는데, 이는 확장성에서 가장 큰 차이점을 들 수 있다. interface같은 경우 extends를 할 수 있지만, Type Aliase는 extends를 할 수 없다.

• interface는 확장할 수 있고, Type Aliase는 확장할 수 없다.
• interface는 객체를 구조화할 수 있고, Type Aliase는 interface보다는 더 포괄적인 개념이다.
• VS code에서도 차이를 보인다.

객체를 구조화할 때는 interface가 더 좋은 것 같긴한데, 또 vs code에서는 객체의 프로퍼티를 명확히 보여주는건 type이기때문에 .. 약간 서로의 장단점이 있는 것 같다. 뭐가 더 좋고 옳다가 아니라 상황에 따라 쓰임새를 판단해야될 것 같다.

 

❍ Class 

클래스를 많이 쓰일 일이 있을까? 싶긴 했지만 . . 오늘 유어클래스에서 배운 class를 정의내릴 때에는

class Person {
	name: string;
    constructor(thename: string){
    	this.name = thename;
    }
}

위와 같이 name을 초기화하는 멤버들은 전부 상단에서 정의를 해줘야 한다고 배웠으나, 코드 중복이 있기 때문에 이를 해결하는 다른 방법도 있었습니다.

class Developer {
    name: string;
    constructor(theName: string) {
        this.name = theName;
    }
}

class Developer {
	name: string;
  constructor(name: string) {
  }
}

아래와 같이 수정하면 빠르게 초기화 할 수 있습니다.

 

❍ interface와 추상클래스의 차이점

그럼 클래스는 interface를 implement하면 interface를 준수하여 클래스를 작성해야하는데, 추상클래스를 extends한 것과는 어떤 차이가 잇나 그런 생각이 들엇읍니다..

abstract class Developer {
  abstract coding(): void; // 'abstract'가 붙으면 상속 받은 클래스에서 무조건 구현해야 함
  drink(): void {
    console.log('drink sth');
  }
}

class FrontEndDeveloper extends Developer {
  coding(): void {
    // Developer 클래스를 상속 받은 클래스에서 무조건 정의해야 하는 메서드
    console.log('develop web');
  }
  design(): void {
    console.log('design web');
  }
}
const dev = new Developer(); // error: cannot create an instance of an abstract class
const josh = new FrontEndDeveloper();
josh.coding(); // develop web
josh.drink(); // extends했기 댐무내 FrontEndDeveloper에 구현되지 않은 메서드를 사용할 수 있다.
josh.design(); // design web

 

• 클래스가 interface를 implement한다면 그럼 interface의 구조 그대로 프로퍼티와 메서드를 구현해야합니다.
• 하지만 추상클래스를 extends한 클래스는 추상클래스에서 abstract가 붙여진 것들은 직접 구현해야합니다.
• 붙여지지 않은 프로퍼티들은 그대로 상속하여 사용할 수 있습니다.

 

❍ 새로 알게된 점

• interface, type, 추상클래스는 자바스크립트 코드로 컴파일되지 않습니다.

 

● 공부 이외의 한 것 

• 알고리즘 문제풀기
• 솔로 프로젝트 typescript 로 리팩토링

 

● 리팩토링 하면서 알게된 것

•  tailwind-styled-components props
  • tw 모듈은 동적으로 클래스를 어떻게 할당할 수 있을지에 대해 헤매고 있었는데 링크를 통해서 동적 클래스 할당하는 방법을 알 수 있게 되었습니다.

코드 수정 전

const Image = tw.img`
  w-${(props) => props.width}
  h-${(props) => props.height}
  cursor-pointer
`

코드 수정 후

interface ImageProps {
  width: number;
  height: number;
}

const Image = tw.img<ImageProps>`
  w-${(props) => props.width}
  h-${(props) => props.height}
  cursor-pointer
`

 

• action-payload type지정
  • 타입지정을 하지 않으면 any로 타입이 지정이 되어서, action-payload의 타입을 지정하게 되었습니다.
  • @reduxjs/toolkit에서 PayloadAction을 지원하고 있었으며, 이 모듈을 통해 쉽게 action-payload의 타입을 지정할 수 있었습니다.
  • 이는 Redux Toolkit 공식문서에서 확인할 수 있었습니다.