Typescript 일반 유형 - 기본 개념

Typescript 프로젝트 작업이 처음이라면 제네릭 형식이 두려울 수 있습니다. 다른 모든 일반 유형을 다루는 것은 이미 복잡합니다. 일반 유형을 사용하면 Javascript가 아닌 다른 다른 언어로 작업하는 것처럼 보입니다.

정의된 유형 값으로 유형을 선언하는 방법

제네릭 형식에 대해 이야기하기 위해 Typescript에서 정의된 형식 값을 사용하여 형식을 선언하는 방법의 예를 살펴보겠습니다.

type A = number[]

interface AB {
  a: A
  b: string
}

우리는 숫자 배열인 유형 A와 속성 a 및 b를 갖는 인터페이스 B를 선언했습니다. 아주 간단하고 명확하죠?

그러나 이제 문자열 배열이 될 또 다른 유형과 이 유형을 포함할 또 다른 인터페이스가 필요한 경우 어떻게 해야 합니까? 물론 다른 유형을 만들 수도 있습니다.

type C = string[]

interface CD {
  c: C 
  d: string
}

제네릭 형식을 선언하는 방법

하지만 소프트웨어 개발의 원칙 중 하나가 "반복하지 말라"라는 것을 기억하지 않습니까? 이 경우 Typescript 일반 유형이 구출됩니다. 제네릭 형식의 목적은 재사용 가능한 형식을 만드는 것입니다. 친숙하게 들리나요? 함수가 재사용 가능한 코드를 만드는 데도 사용된다는 말을 들었을 것입니다. 그들은 꽤 비슷하다는 것이 밝혀졌습니다. 제네릭 형식을 만드는 방법을 살펴보겠습니다.

type A<T> = T[]

interface AB<T> {
  a: A<T>
  b: string
}

일반 유형과 일반 유형의 차이점은 일반 유형에 꺾쇠 괄호가 있다는 것입니다. 또한 이와 같은 유형을 선언할 때type A = number[] 유형이 숫자 배열이라는 것을 알지만 제네릭 유형을 선언할 때 어떤 유형인지 아직 알지 못합니다. 모든 유형이 될 수 있기 때문에 제네릭 유형이라고 합니다.

앞에서 말했듯이 제네릭 형식과 함수는 매우 유사합니다. 이렇게 생각할 수 있습니다. 여기서 유형 A를 선언하고 여기에 매개변수 T를 전달한 다음 T의 배열 유형을 반환합니다. 따라서 제네릭 유형을 사용할 때 인수를 전달해야 합니다.

type A<T> = T[]

const a:A<number> = [1, 2, 3] // Correct.

const a:A<string> = ['1', '2', '3'] // Correct.

const a:A<number | string> = ['1','2', 3] //Correct

const a:A<number> = ['1','2','3'] //Error. Type 'string' is not assignable to type 'number'

const ab:AB<number> = {
  a:[1, 2, 3], // Correct
  b:'b'
}

const ab:AB<string> = {
  a:['1', '2', '3'], // Correct
  b:'b'
}

const ab:AB<number> = {
  a:['1','2','3'], // Error. Type 'string' is not assignable to type 'number'.
  b:'b'
}

이러한 방식으로 동일한 구조를 공유하는 한 원하는 유형을 만들 수 있습니다. 사람들이 일반 유형 매개변수로 T, U 및 K를 사용하는 것을 종종 볼 수 있지만 원하는 대로 이름을 지정할 수 있습니다. 의미론적 단어가 좋은 생각일 수 있습니다.

기본 유형으로 제네릭 유형 선언

함수와 마찬가지로 일반 유형에 기본 유형을 전달할 수도 있습니다. 유형을 전달하지 않으면 기본 유형으로 설정됩니다.

type A<T = string> = T[]

interface AB<T = number> {
  a: A<T>
  b: string
}


const a: A = ['1','2','3'] // Correct

const a: A = [ 1, 2, 3] // Error. Type 'number' is not assignable to type 'string'.

const ab: AB = {
  a:[ 1, 2, 3], // Correct
  b:'b'
}

const ab: AB = {
  a:[ '1', '2', '3'], // Error. Type 'string' is not assignable to type 'number'.
  b:'b'
}

둘 이상의 매개변수 사용

위의 예에서 단일 매개변수를 사용하여 제네릭 유형을 생성하는 방법을 살펴보았지만 실제로는 함수처럼 원하는 만큼 많은 매개변수를 사용할 수 있습니다.

interface AB<T,U> {
  a: T[]
  b: U
}

const ab:AB<number, string> = {
  a: [1,2,3],
  b: '123'
} // Correct

const ab:AB<number, string> = {
  a: ['1','2','3'], // Error. Type 'string' is not assignable to type 'number'.
  b: 123 // Error. Type 'number' is not assignable to type 'string'.
} 

또한 기본 유형을 여러 매개변수와 결합할 수 있지만 선택적 유형 매개변수를 필수 매개변수 앞에 추가할 수 없는 한 가지 조건이 있습니다.

interface AB<T = number, U = string> { // Correct.
  a: T[]
  b: U
}

interface AB<T, U = string> { // Correct.
  a: T[]
  b: U
}

interface AB<T = number ,U> { // Error. Required type parameters may not follow optional type parameters.
  a: T[]
  b: U
}