Typescript 일반 소개 (필수 사항)

Photo by Anas Alshanti (Unsplash)
만약 당신이 Typescript 개발자이고 아직 범용을 사용하기 시작하지 않았다면, 당신은 놓쳤을 것입니다!이 단어 자체가 무섭지만,🧟범용👻. 하지만 두려워하지 마세요. 정말 간단하고 유용해요!

이게 뭐야 *! #@범형이 무슨 소용이 있습니까?

JavaScript는 동적 언어이기 때문에 범주화는 그곳에서 하나의 일이 아니다.모든 것이 범용적이다.
C#, Java 또는 Tyescript에서 범용 정의와 용례를 찾아야 합니다.
범형이 우리를 도와주고 있다to create a component that can work over a variety of types rather than a single one.(이 줄은 Typescript 문서에서 나온 것입니다. 나중에 그곳에 가서 진정으로 깊이 파고들어야 합니다...)
예를 들어 함수를 만들 때, 어떤 함수가 서로 다른 유형과 함께 작업할 수 있다면, 그것들은 매우 좋을 것이다.어떤 장르든지!물론 이것은 매우 쉽다. 그곳에서 마법을 조금만 사용하면 함수는 통용된다.정당하다

범용 함수는 많은 유형을 받아들이고 유형 정보를 보존합니다!

예를 들어 보세요!

The code can be found here
만약 우리의 게임 응용 프로그램에 간단한 인터페이스가 있다고 가정하면, 보기에 이렇다

interface IScore {
    playerName: string;
    kills: number;
    deaths: number;
}

현재 우리는 이 인터페이스 대상을 가진 그룹의 평균값을 계산하는 몇 가지 방법이 필요하다.우리는 이런 내용을 썼다.

function avg(items:IScore[], getter: (t:IScore) => number) {
  const sum = items.reduce((acc, curr) => getter(curr) + acc, 0)
  return sum / items.length
}

간단하게 말하자면, 우리는 분수수 그룹을 첫 번째 매개 변수로 하고, 두 번째 매개 변수는 하나의 함수이며, 이것은 평균값을 계산하는 데 쓰이는 디지털 속성을 얻을 것이다.
그러나 이 함수는 한 가지 유형:any에만 적용된다.이것은 결코 멋있지 않다. 이 함수도 다른 유형에 사용할 수 있다.범용 함수로서 우리는 이렇게 할 수 있다. 그렇지?

function avg(items:any[], getter: (t:any) => number){/*...*/}

다행이다. 이제 글씨체의 IScore 유형을 사용할 수 있다.하지만, 잠깐만요.Typescript의 모든 목적은 그렇지 않습니까?동적 무서운 일이 발생할 수 있습니다. 만약 우리가 인터페이스 :any 에서 속성을 삭제한다면, getter가 속성 이름을 찾지 못할 때, 오류가 우리를 괴롭힐 것입니다.

범용 입력(실제 유형)

이 함수를 범용 함수로 만들고 형식 검사를 추가하려면 함수의 서명을 변경하기만 하면 됩니다.범용 유형은 함수 매개변수 앞에 <> 기호를 사용하여 주석합니다.이렇게

function avg<T>(...

T 섹션은 범용 유형의 이름입니다.이것은 거의 모든 유형이 될 수 있다. 흔히 볼 수 있는 (적어도 내가 본 적이 있는) 것은 단지 하나의 유형만 있는 상황에서 T를 사용하는 것이다.예, T는 유형을 나타냅니다.만약 한 함수에서 여러 개의 범용 유형을 사용한다면, 예를 들면 Cannot read property X of..., 더욱 구체적으로 건의할 것이다
다음 단계는 <TFriend, TEnemy> 섹션을 :any 섹션으로 간단히 교체하여 기능을 공통으로 사용하도록 하는 것입니다.

function avg<T>(items:T[], getter: (t:T) => number){/*...*/}

지금 우리는 이렇게 할 수 있다

const deathAvg = avg<IScore>(scores, x => x.deaths)

심지어 다음과 같다.

const deathAvg = avg(scores, x => x.deaths)

Typescript는 범용 함수에 사용할 유형을 추정하고 자동으로 사용합니다.

추가 학점

이 함수는 실제로 주어진 모든 유형 (문자열 수조는 모든 단어의 평균 문자 길이를 계산할 수 있음) 을 사용할 수 있지만, 예시를 위해서, 우리는 이 함수를 대상 수조만 받아들일 수 있도록 제한할 수 있다.이것은 범용 유형의 구속이라고 할 것이다.
즉, 범용 유형은 어떤 유형도 될 수 없다.그것은 반드시 몇 가지 규칙을 만족시켜야 한다.이 정보는 일반 서명에 키워드:T를 추가합니다.주어진 유형 extends 은 일부 내용을 확장해야 한다고 말했습니다.우리의 예에서 T.그래서 우리는 화제를 바꾸기만 하면 된다.

function avg<T extends object>(items:T[]...

예를 하나 더 들까요?

유형을 범주로 설정할 수도 있습니다.많은 API 노드 응답 유형에는 동일한 기본 형태가 있습니다.그것들은 데이터베이스에 있는 항목의 총수, 응답, 그리고 더 많은 데이터를 얻을 수 있는지에 대한 정보를 포함한다.물론 프로젝트 리스트도 있습니다.그래서 나는 이런 것들을 위해 유형 집합을 쓸 수 있다.

interface IUsersCollection {
  values: IUser[];
  totalInDatabase: number;
  totalInResponse: number;
  isLast: boolean
}

interface IDatabaseCollection {
  values: IDatabase[];
  totalInDatabase: number;
  totalInResponse: number;
  isLast: boolean
}

이거 하나도 재미없어.하나도 안 그래.만약 우리가 응답에 속성을 추가한다면, 생각하세요...
이렇게 하기만 하면

interface ICollection<TType> {
  values: TType[];
  totalInDatabase: number;
  totalInResponse: number;
  isLast: boolean
}
interface IUsersCollection extends ICollection<IUser> {}

interface IDatabaseCollection extends ICollection<IDatabase> {}

여기에도 적용됩니다 object:

type Collection<TType> = {
  values: TType[];
  /* etc. */
}

너는 직접 너의 유형을 거기에 정의할 수 있다

type UsersCollection = Collection<{
  id: number;
  name: string;
  /* etc.*/
}>

총결산

따라서 범주형은 더 스마트한 유형/인터페이스를 만들고 유형의 안전성을 실현하는 데 시간을 절약할 수 있습니다. 그렇지 않으면 그 속에서 소란을 피울 뿐입니다type.
이게 다가 아니야.범형은 다른 몇 가지 재미있고 유용한 방법에 사용할 수 있다!