zrch TS youtube 2-2

28/07/2022

readonly

• 값 보호(바뀌는 거 막기)
  

index signature

• 어떤 key 든 상관없이 다 string이고 값은 string인 타입만들기
  https://dmitripavlutin.com/typescript-index-signatures/
  
  

mapped type - key 값 좁히기

https://www.typescriptlang.org/docs/handbook/2/mapped-types.html

interface에서는 | (or) 과 & (and) 사용 불가!

class 만들기

• impelenets, private, protected 사용!
• 클래스는 interface를 구현(implements)할 수 있음!
• 클래스의 모양을 인터페이스로 control 할 수 있음
  

private vs protected (vs public)

• private 속성은 클래스 안에서만 접근 가능 (바깥에서 못씀)
• protected 마찬가지로 바깥에서는 못쓰지만! private 과 차이점 => 상속 받은 instance에서는 사용가능함!
• C는 B를 상속 받았기 때문에 C에서 private인a는 사용할 수 없지만 C에서 protected인b는 사용가능함
  
  -line 4-6인 instance에서는(=> new C에서는 private 과 protected 둘 다 못씀!)

• js 변환을 하고 나면! private과 protected 는 다 사라짐!

-zrcho님은 굳이 interface 에 implements 안한다고 함 => readonly 다 쓸 수 있으니께

• 아래처럼 class B만 활용해도 좋음
• JS에서 인터페이스는 사라지지만 class는 남아있음!
  

1:20:00

Generic

line 2-3만 가능하고 line 5-6(human error등의 이유)은 막으려면 어떻게 해야하나

방법1

<T> 로 적어놓고 실제로 사용할 때 뭘 넣을지 결정한다!

• 근데 이것도 너무 범위가 넓으니, extends + 타입으로 제한해줄 수 있음

• generic 타입을 여러개 만들어서 각각 제한 두기 가능
  

generic 실제 사용 분석

---

🧐 forEach 분석

• interface,type, class 모두 generic 사용가능 이름 바로 뒤에 <T> 붙이기
  

• 타입스크립트가 알아서 잘 추론하고 있음 how?
  

---

🧐 map 분석

line 3

• 여기서 잠깐 JS => map과 forEach의 차이는? return값이 있냐없냐!
  
• 분석하기 어려우면 아는 부분은 type을 고쳐서 바꿔보면서 생각해보기
• T는 number 이고 U는 toString()을 해준 리턴값이니까 string!
  

---

🧐 filter 분석

line 4-5 filter 함수 2개 분석

1. line 8을 보면서 input 값과 return 값을 보면서 line 4-5 의 타입 T 나 S를 실제에 대응하는 값으로 바꿔주면서 분석하기!

2. 함수가 2개이면 어떤게 쓰이는 게 reasonable한지 보기

• => 리턴값이 S 인지 unknown 인지? => S는 extends number 로 narrowing 되어 있음! S로 보는 것이 합리적!
  

extends로 제한걸기

• <T extends string[]> => 문자열만 들어올 수 있음 line 3
• <T extends (a:string) => number> T는 콜백함수로 문자열 받아서 숫자 리턴함/ 콜백함수 형태 잡아줌