[Type-Challenges] 296. Permutation

🫧 문제

주어진 유니언 타입을 순열 배열로 바꾸는 Permutation 타입을 구현하세요.

 

type perm = Permutation<'A' | 'B' | 'C'>; // ['A', 'B', 'C'] | ['A', 'C', 'B'] | ['B', 'A', 'C'] | ['B', 'C', 'A'] | ['C', 'A', 'B'] | ['C', 'B', 'A']

 

🛠️ 테스트 케이스

type cases = [
  Expect<Equal<Permutation<'A'>, ['A']>>,
  Expect<Equal<Permutation<'A' | 'B' | 'C'>, ['A', 'B', 'C'] | ['A', 'C', 'B'] | ['B', 'A', 'C'] | ['B', 'C', 'A'] | ['C', 'A', 'B'] | ['C', 'B', 'A']>>,
  Expect<Equal<Permutation<'B' | 'A' | 'C'>, ['A', 'B', 'C'] | ['A', 'C', 'B'] | ['B', 'A', 'C'] | ['B', 'C', 'A'] | ['C', 'A', 'B'] | ['C', 'B', 'A']>>,
  Expect<Equal<Permutation<boolean>, [false, true] | [true, false]>>,
  Expect<Equal<Permutation<never>, []>>,
]

 

🎱 정답

type Permutation<T, K=T> =
    [T] extends [never]
      ? []
      : K extends K
        ? [K, ...Permutation<Exclude<T, K>>]
        : never

 

💭 해설

1. [T] extends [never]의 부분은 T가 never 타입인지 확인합니다. never 타입은 불가능한 타입을 나타내며, 빈 배열을 반환합니다.
2. K extends K의 부분은 K가 K 타입에 할당 가능한지 확인합니다. 항상 true이므로 이 조건은 항상 만족됩니다.
3. 위 두 가지 조건이 모두 만족되지 않으면 never 타입을 반환합니다
4. k extends k가 만족되는 경우에는 K와 순열을 계산한 후에 K를 추가하는 것을 의미합니다. Exclude<T, K>는 T 타입에서 K를 제외한 타입을 구합니다. 따라서 Permutation을 재귀적으로 호출하여 이 타입에 대한 순열을 계산합니다.
5. 이렇게 재귀적으로 호출하면 Permutation은 T의 모든 가능한 순열을 계산하게 됩니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

aria-describedby와 title은 둘 다 웹 요소에 대한 추가 정보를 제공하는 데 사용되지만, 몇 가지 차이점이 있습니다.

 

1. 사용목적

• title: title 속성은 요소에 대한 간단한 툴팁을 제공하는 데 사용됩니다. 마우스를 해당 요소 위에 올리면 툴팁이 표시됩니다. title은 주로 비교적 간단한 정보를 제공하거나 요소에 대한 간단한 설명을 제공하는 데 사용됩니다.
• aria-describedby: aria-describedby 속성은 웹 요소에 대한 상세한 설명이나 오류 메시지, 추가 정보 등과 같은 복잡한 내용을 제공하는 데 사용됩니다. 주로 스크린리더를 사용하는 사용자에게 추가 정보를 전달하는 데 활용됩니다.

 

 

2. 접근성

• title: title 속성의 툴팁은 일반적으로 마우스 호버에 의존하며, 스크린리더 사용자에게는 쉽게 접근할 수 없을 수 있습니다. 따라서 title 속성은 주로 시각적인 사용자를 위해 제공됩니다.
• aria-describedby: aria-describedby 속성은 스크린리더 사용자에게 추가 정보를 전달하기 위해 사용되며, 보다 접근성을 높일 수 있는 방법입니다. 스크린리더는 aria-describedby 속성을 사용하여 연결된 요소의 내용을 읽어줄 수 있습니다.

 

3. 사용 방식

• title: title 속성은 주로 HTML 요소에 직접 포함되어 사용됩니다.
• aria-describedby: aria-describedby 속성은 주로 <input>, <button>, <img> 등의 요소에 사용되며, 연결된 요소를 통해 추가 정보를 제공합니다.

 

따라서, title 속성은 간단한 툴팁과 요소에 대한 간단한 설명을 제공하는 데 주로 사용되며, aria-describedby 속성은 상세한 설명이나 오류 메시지와 같은 복잡한 내용을 스크린리더 사용자에게 제공하기 위해 사용됩니다.