InflearnTS Chapter 21~23 - YDP-SPLOUNGE-CLUB/typescript-study GitHub Wiki

map λ§Œλ“€κΈ°

map ν•¨μˆ˜λ₯Ό Number 에 μ•Œλ§žλŠ” ν•¨μˆ˜λ‘œ λ§Œλ“€μ–΄ λ³΄μ•˜λ‹€.

const b λŠ” λ°˜λ“œμ‹œ number 의 값을 λ°›κ³  number 값을 내보내도둝 λ§Œλ“€μ—ˆκΈ°μ—

((v: T) => T): T[] 둜 해결이 λœλ‹€.

interface Arr<T> {
  map(callback: (v: T) => T): T[];
}

const a: Arr<number> = [1, 2, 3];

const b = a.map((v) => v + 1); // [2, 3, 4]

ν•˜μ§€λ§Œ v.toString() 같은 λ¬Έμžμ—΄λ‘œ λ°”κΎΈκ²Œ 되면 μœ„ ν•¨μˆ˜λŠ” ν†΅ν•˜μ§€ μ•ŠλŠ”λ‹€.

number[] 이 μ•„λ‹Œ string[] λ₯Ό 내뱉기 떄문이닀.

μ œλ„€λ¦­ ν•¨μˆ˜λ‘œ μΆ”κ°€λ‘œ μž‘μ„±ν•΄λ³΄λ©΄.

interface Arr<T> {
  map<S>(callback: (v: T) => S): S[];
}

const a: Arr<number> = [1, 2, 3];

const b = a.map((v) => v + 1); // [2, 3, 4]
const c = a.map((v) => v.toString()); // ['2', '3', '4'];
const d = a.map((v) => v % 2 === 0); // [false, true, false];

λ§Œμ•½μ— index λ§€κ°œλ³€μˆ˜κ°€ ν•„μš”ν•˜λ‹€λ©΄ map ν•¨μˆ˜μ— μΆ”κ°€ν•΄μ„œ μž‘μ„±ν•΄μ•Όν•œλ‹€.

interface Arr<T> {
  map<S>(callback: (v: T, i: number) => S): S[];
}

const a: Arr<number> = [1, 2, 3];

const b = a.map((v, i) => v + 1); // [2, 3, 4]

filter λ§Œλ“€κΈ°

λ°‘ ν•¨μˆ˜μ˜ bλŠ” λ§ˆμ°¬κ°€μ§€λ‘œ T μžμ²΄λ§Œμ„ 계속 λ‚΄λ³΄λ‚΄λŠ” κ²½μš°λŠ” λ¬Έμ œκ°€ μ—†λ‹€.

ν•˜μ§€λ§Œ λ‹€λ₯Έ νƒ€μž…μ„ λ‚΄λ³΄λ‚΄λŠ” κ²½μš°μ—λŠ” 그렇지 μ•Šλ‹€.

Arr<number | string> 의 κ²½μš°μ—μ„œ string λ§Œμ„ 필터링 ν•΄μ„œ 내보내고 싢은데 ν•„ν„° typeof v === string μ—μ„œμ˜ κ²°κ³ΌλŠ” (number | string)[] 이닀.

ν•΄λ‹Ή 문제λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄μ„œλŠ” μ»€μŠ€ν…€ νƒ€μž… κ°€λ“œλ₯Ό ν†΅ν•΄μ„œ νƒ€μž… 좔둠을 λ³€κ²½μ‹œμΌœμ€˜μ•Ό ν•œλ‹€.

interface Arr<T> {
  filter(callback: (v: T) => boolean): T[];
}

const a: Arr<number> = [1, 2, 3];

const b = a.filter((v) => v % 2 === 0); // [2]

const c: Arr<number | string> = [1, '2', 3, '4', 5];

const d = c.filter((v) => typeof v === string); // ['2', '4'] string[] // μž‘λ™ μ•ˆν•¨

μ»€μŠ€ν…€ νƒ€μž… κ°€λ“œλ₯Ό μ‚¬μš©ν•΄μ„œ v is S λΌλŠ” μ»€μŠ€ν…€ νƒ€μž… κ°€λ“œλ₯Ό λΆ™μ—¬λ³΄μ•˜λ‹€.

ν•˜μ§€λ§Œ μ •μƒμ μœΌλ‘œ μž‘λ™ν•˜μ§€ μ•ŠλŠ”λ‹€. v: T 라고 μ„ μ–Έν•˜μ˜€λŠ”λ° v λŠ” S λ‹€ 라고 λͺ…μ‹œμ μœΌλ‘œ μ„ μ–Έν•œ 것이 νƒ€μž…μŠ€ν¬λ¦½νŠΈκ°€ 받아듀이지 λͺ»ν•˜μ˜€λ‹€.

interface Arr<T> {
  filter<S>(callback: (v: T) => v is S): S[];
  // Error 
  // A type predicate's type must be assignable to its parameter's type.
  // Type 'S' is not assignable to type 'T'.
  // 'T' could be instantiated with an arbitrary type which could be unrelated to 'S'.

}

const a: Arr<number> = [1, 2, 3];

const d = c.filter((v) => typeof v === 'string');

ν•΄λ‹Ή 문제λ₯Ό ν•΄κ²°ν•˜κΈ° μœ„ν•΄μ„œ S λŠ” T에 μ†ν•œλ‹€λŠ” 것을 λͺ…μ‹œν•΄μ€˜μ•Ό ν•œλ‹€. λ˜ν•œ v λŠ” string | number 이기 떄문에 v 에 κ΄€ν•œ 벨λ₯˜λ₯Ό μ»€μŠ€ν…€ νƒ€μž…κ°€λ“œλ‘œ λͺ…μ‹œν•΄μ€˜μ•Ό ν•œλ‹€.

interface Arr<T> {
  filter<S >(callback: (v: T) => v is S): S[];
}

const a: Arr<number | string> = [1, 2, 3, '4', '5'];

const d = c.filter((v): v is string => typeof v === 'string');

곡변성, λ°˜κ³΅λ³€μ„±

ν•¨μˆ˜κ°„μ— μ„œλ‘œ λŒ€μž…μ΄ κ°€λŠ₯ν•œκ°€? 에 λŒ€ν•œ ꡬ별법

μ˜ˆμ‹œ μ½”λ“œ

function a(x: string): number {
  return +x;
};

a('1'); // 1

type B = (x: string) => number | string;

const b: B = a; // OK

function a λŠ” number λ₯Ό λ°˜ν™˜κ°’μœΌλ‘œ μ„€μ •ν–ˆμ§€λ§Œ

type B λŠ” number | string 을 λ°˜ν™˜κ°’μœΌλ‘œ λ°›κ³ μžˆλ‹€.

그런데 const b λŠ” a λΌλŠ” λŒ€μž…μ„ ν•˜μ˜€μ„ λ–„ μ •μƒμ μœΌλ‘œ μž‘λ™ν•œλ‹€.

리턴값은 더 넓은 νƒ€μž…μœΌλ‘œ λŒ€μž…μ΄ κ°€λŠ₯ν•˜λ‹€.

주의점이 μžˆλ‹€. λ§€κ°œλ³€μˆ˜μ• μ„œλŠ” μ΄λŸ¬ν•œ 상황이 역전이 λœλ‹€.

function a(x: string | number): number {
  return 0;
}

type B = (x: string) => number;
let b: B = a;
⚠️ **GitHub.com Fallback** ⚠️