Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- googleColaboratory
- 계산맞추기 게임
- node.js로 로그인하기
- Concurrently
- JS 개념
- node.js 설치
- props
- 노드에 리액트 추가하기
- Do it 자바스크립트 + 제이쿼리 입문
- Colaboratory 글자 깨짐
- intellij
- 웹 게임을 만들며 배우는 리액트
- 따라하며 배우는 노드 리액트 기본 강의
- 타자 게임 만들기
- DB Browser
- 모두의 파이썬
- 자바스크립트
- 리액트
- spring-boot
- 인프런
- You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"
- 거북이 대포 게임
- Python
- react오류
- Spring-Framework
- react
- 모던자바스크립트
- intllij 내 Bean을 찾지 못해서 발생하는 오류
- ReactDOM.render is no longer supported in React 18. Use createRoot instead
- vs code 내 node
Archives
- Today
- Total
프로그래밍 삽질 중
[TS] forEach, map, filter 제네릭 분석 본문
출처 : https://github.com/ZeroCho/ts-all-in-one
* forEach, map, filter에 대한 interface<T> 부분
https://github.com/microsoft/TypeScript/blob/main/lib/lib.es5.d.ts
제네릭에 대해 타입을 변수처럼 만든다는 것은 알겠음
▶ 실제로는 어떻게 이용되는 것인가?
* forEach
//forEach
[1,2,3].forEach((item) => {console.log(item)}); //1 2 3
//item : number로 표시됨
[1,2,3].forEach((item) => {console.log(item)});
//item : string로 표시됨
['1','2','3'].forEach((item) => {console.log(item)});
//item: boolean으로 표시됨
[true,false,true].forEach((item) => {console.log(item)})
//위의 forEach 예제들의 item의 값들이 저렇게 표시되는 이유 : 제네릭 덕분(JS에서는 사라짐)
interface Array<T> {//T자리에 뭐가 올지 모름(자리만 만듦)
forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg? :any): void
}//하나가 정해지면 나머지도 숫자, 문자열로 따라감
//콜백함수 : callbackfn: (value: T, index: number, array: T[]) => void == 위의 forEach 예제들의 (item) => {console.log(item)}
//value = 위의 forEach 예제들의 item
* 그런데 꼭 제네릭을 써야 하나? 그 자리에 해당되는 값들만 넣어주면 되지 않나?
▶ 그럴 경우 생기는 문제 : 여러 타입이 존재 시 같은 타입들만 사용하는 게 아니라 다른 타입인데도 같이 사용되는 오류들 발생
function add(x: string | number, y: string | number) {}
add(1, '2') //오류도 맞다고 표시됨
add('1', 2) //오류도 맞다고 표시됨
//위의 사례를 막고 타입이 일치하는 것들만 가능하도록 하게 함 = 제네릭 사용
add(1, 2)
add('1', '2')
add(true, false)
//여러 T 중 하나라도 타입이 정해지면 다른 것들도 동일하다고 생각함
function add<T>(x: T, y: T): T {return x}
add(1, 2) //x가 number면 y도 number로 생각함
//타입 파라미터 : add<number>(1, 2)도 가능함
add('1', '2') //x가 string이면 y도 string으로 생각
* map
//map
interface Array<T> {
map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg? :any): U[]
}
//const strings = string[] 추론
//예시
const strings = [1, 2, 3].map((item) => item.toString())
//위의 Array<T> = 예시의 number, 위의 U = 예시의 item.toString() => string값
//따라서 map 함수의 전체 리턴값 string[]
* filter
interface Array<T> {
filter<S extends T>(predicate: (value: T, index: number, array: readonly T[]) => value is S, thisArg?: any): S[];
filter(predicate: (value: T, index: number, array: readonly T[]) => unknown, thisArg?: any): T[];
}
//const filtered = number[]
const filtered = [1, 2, 3, 4, 5].filter((value) => value %2);
//T는 number, S도 number
//value % 2 = number
//filtered는 number[]
//문제
//string[]이어야 하는데 (string | number)[]로 나옴
const filtered2 = ['1', 2, '3', 4, '5'].filter((value) => typeof value === "string");
//T는 string | number, S는 string | number 결과도 string | number
//string[]만 나오게 하려면?
//(predicate: (value: T, index: number, array: readonly T[]) => value is S, thisArg?: any)
const predicate = (value: string | number): value is string => typeof value === "string";
const filtered3 = ['1', 2, '3', 4, '5'].filter(predicate);
////number[]만 나오게 하려면?
const checkNum = (value: string | number): value is number => typeof value === "number";
const filtered4 = ['1', 2, '3', 4, '5'].filter(checkNum);
'과거 프로그래밍 자료들 > Javascript&typescript' 카테고리의 다른 글
[TS] 에러 처리법(interface, class 차이 비교) (0) | 2022.09.18 |
---|---|
[TS] 공변성, 반공변성, 오버로딩 (0) | 2022.09.18 |
TypeScript 개념 - 3 (0) | 2022.09.16 |
TypeScript 개념 - 2 (0) | 2022.09.16 |
TypeScript 개념 - 1 (0) | 2022.09.15 |