[TIL] 내배캠4기-Typescript-81일차

프로젝트 전날이다.. 마지막으로 복습하며 편안하게 점검할 수 있는 날이란 뜻이다...
계획은 항상 짱짱하게 세우지만 중간중간 에러를 만나거나 깃 때문에 구글링을 한다거나, 잡담을...했다던가 하는 이유로 절반 정도 했나 싶다.
하지만 밤을 세워서라도 끝내고 프로젝트를 들어가야 마음이 편할 것 같다. 이번은 왠지 그렇다.

타입스크립트 쪽지시험 오답 정리
쇼핑카트 클론코딩
리액트 mount, unmount 라이프사이클 복습- useEffect

ES5/ ES6 차이점

https://hbsowo58.tistory.com/407

class User {
  // default: public 속성
  email: string;
  private name: string;
  readonly city: string = "";
  constructor(email: string, name: string) {
    this.email = email;
    this.name = name;
  }
}

타스 제네릭 타입 이해가 어려워서 여러번 듣고 있다.
다시 정리..

Generic

const stringEcho = (arg: string): string => arg;
// 제네릭 타입
// 어떤 함수에도 상호작용 할 수 있는 타입
// 아무 타입을 패스하고 리턴할 수 있다.
const echo = <T>(arg: T): T => arg;

const isObj = <T>(arg: T): boolean => {
  return typeof arg === "object" && !Array.isArray(arg) && arg !== null;
};
console.log(isObj(true)); // false
console.log(isObj("john")); // false
console.log(isObj([1, 2, 3])); // false
console.log(isObj({ name: "john" })); // true
console.log(isObj(null)); //false

Narrowing Generic type

// narrowing generics with extends
interface HasID {
  id: number;
}
const processUser = <T extends HasID>(user: T): T => {
  // 로직~~~
  return user;
};
console.log(processUser({ id: 1, name: "john" }));
// console.log(processUser({ name:"john"})) //error!!

class와 generic

class StateObject<T> {
  private data: T;
  constructor(value: T) {
    this.data = value;
  }
  get state(): T {
    return this.data;
  }
  set state(value: T) {
    this.data = value;
  }
}

const store = new StateObject("john");
console.log(store.state); //john
store.state = "Dave";
console.log(store.state); //Dave
// store.state = 12; //error

const myState = new StateObject<(string | number | boolean)[]>([15]);
myState.state = ["Dave", 42];
console.log(myState.state); // ["Dave", 42]