TypeScript를 효과적으로 배우는 방법은 무엇입니까?

TypeScript는 특히 객체 지향 프로그래밍(OOP)에 익숙하지 않거나 경험이 없는 프로그래머에게 가파른 학습 곡선으로 유명합니다. 또한 OOP에 익숙하더라도 Javascript에는 많은 예외가 있습니다.

문제는 TypeScript를 효과적으로 배울 수 있는 방법입니다.

어떤 유형인지 어떻게 알 수 있습니까?

TypeScript를 처음 배우려고 할 때 길을 잃은 느낌이 들 수 있습니다. 그것이 내가 어떤 유형인지 알아 내려고 노력하는 방법입니다.

IDE에서 도움 받기

저는 지금 Visual Code를 사용하고 있으며 TypeScript와 완벽하게 통합됩니다. 스크립트에서 변수를 가리키면 TypeScript에서 생성된 유형을 볼 수 있습니다.



그렇지 않은 경우 마우스를 가져가면 right click -> to see type definition . 그런 다음 VSCode는 유형 정의가 있는 파일을 표시해야 합니다.




입력한 후 VSCode는 객체에 대한 자동 완성 기능도 가질 수 있습니다! 놀라운!

최후의 수단:명확히 입력됨

React와 같은 일부 애플리케이션의 경우 DefinitelyTyped repo에 자체 유형이 있습니다. 예를 들어 React가 <a>를 정의한 방법을 찾으려면 DefinitelyTyped/types/react/index.d.ts에서 검색하면 React.AnchorHTMLAttributes에 있습니다.

어떻게 사용할 수 있습니까? 간단합니다. 시도해 볼 수 있습니다.

interface Link extends React.AnchorHTMLAttributes<HTMLElement> {
  ...yourProps
}

소품을 정의하지 않았더라도 TypeScript linting 오류 없이 Link 구성 요소를 계속 사용할 수 있습니다.

<Link href="<YOUR-LINK>">My first link</Link>

이미 React에서 타입 정의를 확장했기 때문에 직접 정의하지 않고도 사용할 수 있습니다.

자신의 유형을 작성하는 방법?

TypeScript를 배울 때 기술을 향상시키는 가장 좋은 방법은 더 많이 연습하는 것입니다. TypeScript documentation은 좋은 출발점이 될 것입니다.

유형을 작성하려고 할 때 다음 방법이 작업 흐름에 매우 유용하고 생산적이라고 생각합니다.

조합 유형

type Button = {
  variant: 'primary' | 'secondary';
};

유니온 유형은 예를 들어 위의 Button 구성 요소에서 변형 소품에 대해 string를 작성할 수 있는 등 입력을 추가로 제한하는 데 도움이 됩니다. 이는 원하는 문자열을 입력할 수 있음을 의미합니다(코드가 손상되거나 손상되지 않을 수 있음). Union type을 구현한 후에는 primary 또는 secondary 만 입력할 수 있습니다.
primary 또는 secondary 이외의 문자열을 입력하려고 하면 TypeScript가 차단합니다!

교차로 유형

다른 유형을 하나로 결합할 수도 있습니다.

type Button = {
  variant: 'primary' | 'secondary';
};

type Link = {
  href: string;
};

type ButtonWithLink = Button & Link;

위의 예에서 ButtonWithLink에는 Button 및 Link 유형의 속성이 모두 있습니다. 즉, 동일한 소품을 사용할 수 있습니다. variant 또는 href 이 새로운 유형입니다.

유형

예를 들어 다음과 같이 복잡한 응용 프로그램에 큰 개체가 있는 것은 일반적입니다.

const jsonObj = {
  type: 'test',
  variant: 'test',
  value: 3,
  disabled: false
  purchase: {
    name: 'T-shirt';
    qty: 200
    type: {
      size: 'XL',
      color: 'white'
      ...
    }
    ...
  }
};

type JsonType = typeof jsonObj;

// Equals to
// type JsonType = {
//   type: string,
//   variant: string,
//   value: number,
//   disabled: boolean,
//   purchase: {
//   name: string;
//   type: {
//     size: string;
//     color: string;
//     ...
//   }
//   ...
// }
// }

위의 샘플 데이터는 간단한 데이터 구조로 되어 있으며 여전히 수동으로 입력할 수 있습니다. 그러나 중첩된 개체 또는 배열이 있는 JSON 개체를 만나면 typeof 함수가 매우 유용해집니다.

열쇠

동일한 근거가 keyof 에 적용되며 개체의 모든 키를 가져옵니다.

const jsonObj = {
  type: 'test',
  variant: 'test',
  value: 3,
  disabled: false
  color: {
    red: '#f44336',
    purple: '#9c27b0',
    pink: '#e91e63'
  }
};

type Color = keyof typeof jsonObj.color;
// Equals to
// type Color = "red" | "purple" | "pink"

부분적

Partial는 유형에 하나의 필드만 필요할 때 유용합니다. 예를 들어:

type Person = {
  name: string;
  age: number;
  email: string;
};

const updateData = (userData: Partial<Person>) => {
  // so you can just update one field
};

Partial 내부적으로는 모든 필드가 선택 사항이므로 사용할 때 필수 필드가 필요하지 않은지 확인하십시오.

type Partial<T> = {
  [P in keyof T]?: T[P];
};
// all fields are optional in Partial

If you want to know more, you can view the official documentation.

나의 여행

TypeScript는 처음에는 무섭게 보입니다.

TypeScript를 사용하고 있는 Angular를 1년 전에 억지로 사용하여 TypeScript를 스스로 배우려고 했습니다. 그러나 Angular에서 장난감 프로젝트를 마친 후에도 TypeScript를 조금 배우는 것 같습니다. 몇 달 전에 회사에서 TypeScript를 사용하기 시작했는데, 다른 사람들이 TypeScript로 어떻게 쓰는지 보고 갑자기 keyof , typeof , Partial , Pick 등 사용법을 많이 배웁니다.

주요 키는 많이 쓰고 항상 타이핑을 수행하는 가장 좋은 방법을 찾는 것입니다(즉, 게을러지는 가장 좋은 방법을 찾으십시오!).

제 TypeScript 학습 여정이 여러분에게도 도움이 되었으면 합니다!

더 읽어보기

TypeScript Documentation

Introduction - TypeScript Deep Dive

Conditional types in TypeScript