inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편

filter 제네릭 분석

filter 함수 타입추론과 관련하여 질문이 있습니다.

해결된 질문

642

asdf1234

작성한 질문수 1

1

//1번 filter인터페이스
filter<S extends T>(predicate: (value: T, index: number, array: T[]) => value is S, thisArg?: any): S[];
//2번 filter인터페이스
filter(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): T[];

//1번 예제
const filtered1 = ['1',2].filter((value)=>typeof value === 'string');

//2번 예제
const filtered2 = ['1',2].filter<string>((value)=>typeof value === 'string');

//3번 예제 (2번 예제 개선)
const filtered3 = ['1',2].filter<string>((value): value is string => typeof value === 'string');

위 코드를 기반으로, 궁금한 점이 있었습니다.
[질문1]
1번, 2번 예제코드 모두 똑같이 filter의 콜백함수의 반환 타입을 value is string 으로 명시하지 않았는데, 2번은 오류가 발생하고 1번은 오류가 발생하지 않는지?
[질문2]
왜 2번 예제처럼 제네릭 타입을 명시해줬을 때, filter의 콜백함수의 반환 타입을 value is string으로 따로 명시해줘야하는지?
그리고 이유를 생각해봤습니다. 제가 생각한 이유가 정확한지 모르겠어서 질문드립니다.

[질문1에 대한 생각]
1번 예제는 타입추론 시 2번 인터페이스를 따르기 때문에 filter 콜백의 반환 타입을 명시하지 않아도 오류가 뜨지 않는 것으로 생각했습니다. (타입 추론은 정확히 되지 않지만)
[질문2에 대한 생각]
2번 예제는 <string>으로 제네릭을 선언한 순간 1번 filter인터페이스를 따라야 합니다. 이때 filter의 콜백함수의 반환 타입을 value is string으로 명시하지 않으면 반환 타입이 boolean으로 추론되고, 이는 인터페이스와 맞지 않기 때문에 오류가 발생하는 것으로 이해했습니다. 따라서 3번 예제처럼 반환 타입을 타입 가드로 지정해 줬을 때는 오류가 뜨지 않았습니다. 수업내용 처럼 predicate를 따로 빼서 정의해서 사용하지 않아도 3번 예제처럼 작성해도 문제는 없는 걸까요?

typescript

답변 1

1

제로초(조현영)

네 생각하신 게 맞습니다. 또한 인라인으로 value is string을 표시해주는 것도 가능한 방법입니다.

데코레이터가 현재도 자주 쓰이는 문법인가요?

0

81

2

유틸리티 타입 실제로 구현은 못해도 하나씩 외우면 실무할 때 지장 없겠죠?

0

66

1

매핑 타입은 type에서밖에 안된다고 하네요?

0

65

2

자바에서의 오버로딩과 같은 개념이라고 생각해도 되나요?

0

69

2

filter 함수 반환 타입 네로잉 질문

0

74

2

map<U>(callbackfn: ....) 할때 U는 왜 여기 있는거에요??

0

47

2

ts 컴파일을 위한 type 라벨링 부분

0

46

1

concat 함수 타입 구현 중 질문 있습니다!

0

100

2

filter 메소드 질문

0

53

1

forEach 제네릭 관련 문의

0

60

1

타입 추론 시 가장 넓은 범위로 추론이 되는 건가요?

0

165

1

enum이 javascript로 트랜스파일링될때 사라진다하셨는데요

0

207

1

함수 파라미터 타입 정의 시 ...args: any[]와 ...args: any 의 차이

0

223

1

Flat type에서 ReadonlyArray 타입을 사용하는 이유?

0

157

1

bind type 질문

1

149

1

Lowercase type 관련 질문

0

152

1

key-value 타입 자동추론 질문드립니다

0

266

1

타입스크립트 교과서, p131

0

266

1

타입스크립트 교과서 p122 forEach 메서드 질문

0

232

1

타입스크립트 교과서 p116 , 코드에러남

1

269

1

타입스크립트 교과서 p112 , 코드가 안읽힙니다..

0

266

1

타입스크립트 교과서 p83

1

184

1

타입스크립트교과서 p39 쪽 코드가 이해가 안되요

1

227

1

class 에서 ts의 private vs js의 private field( # )

0

339

1