[프론트엔드 데브코스 TIL] 2023.11.13 Day40 TS 3일차

SoJuSo·2023년 11월 13일
0

2023.09 ~ 2024.01 TIL

목록 보기
41/105

📚금일 학습 내용 KPT

인터페이스 < T >

🏫데브코스

// function toObj(a: string, b: string): { a: string; b: string };
// function toObj(a: number, b: number): { a: number; b: number };
// function toObj(a: boolean, b: boolean): { a: boolean; b: boolean };
// 코드가 길어지는 문제점이 있다.
// function toObj(
//   a: string | number | boolean,
//   b: string | number | boolean
// ): { a: string | number | boolean; b: string | number | boolean } {
//   return { a, b };
// }

// 바꿔도 되지만 보통 T를 작성한다.
// 이 T 부분을 타입변수라고 한다. 매개변수 처럼

// 인터페이스에서도 사용 가능하다.
interface ToObj<T> {
  a: T;
  b: T;
}

// function toObj<T = string | number | boolean>(a: T, b: T): { a: T; b: T } { //
// function toObj<T>(a: T, b: T): { a: T; b: T } {
function toObj<T extends string | number | boolean>( // extends 키워드로 제약조건을 추가할 수 있다! T의 타입은 저런거밖에 안된다라고 선언하는 것
  a: T,
  b: T
  // ): { a: T; b: T } {
): ToObj<T> {
  // 이렇게 반환값을 인터페이스로 지정해줄 수 있다.
  return { a, b };
}

console.log(
  toObj<string>("A", "B"),
  toObj("A", "B"), // 이렇게 해도 에러가 안난다.
  //   toObj("A", 12), // 하지만 이건 에러가 난다. // 타입 추론 때문이다. 별도로 넣어주는 타입이 없기 때문에 a 매개변수의 타입을 먼저 감지해서 T를 string으로 정의하기 떄문에 문제가 발생한다.
  toObj<number>(1, 2),
  toObj<boolean>(true, false)
);

인터페이스에 대해서 학습했는데.. 꽤나 유용한 개념임은 맞지만 꽤나 어려운 개념이다. 오늘 특별히 이것저것 못했는데 집중력이 저하된 탓도 있으나, 대부분 코드를 이해하고 관련 개념을 찾아보는 데에 시간을 많이 소요했던 이유가 있다.

근데 아쉬운 점은 뭔가 건진게 없다..많이 돌아다녔는데 그게 그 말 같은 그런느낌..

📌Keep

  • 강의 잘 듣기
  • 즐겁게 코딩하기

❗️Problem

  • 의미 없는 시간 더 줄이기.. 반드시
  • 강의 제외 코딩을 잘 안함

📍Try

  • 낼부터 걍 화공키고 살기
  • 내가 좋아하는 코딩 해보기
  • 집중 안되면 찬물세수라도 하기

📖소회

내일도 화이팅!🔥

profile
Junior Frontend Engineer

0개의 댓글