TypeScript에서 알아야 할 7가지 방법에 대한 간략한 토론

이 기사에서는 여러분이 알아야 할 TypeScript의 7가지 방법을 공유하겠습니다. 여러분에게 도움이 되기를 바랍니다.

TypeScript의 유형 시스템은 매우 강력합니다. 이는 유형 안전성을 제공합니다. 유형 시스템이 사랑받는 것처럼, 유형과 인터페이스를 계획하고 디자인하지 않으면 코드를 복잡하게 만들고 읽을 수 없게 만들 수도 있습니다.

Generics

코드 중복을 피하고 재사용 가능한 유형을 만드는 것은 간결한 코드를 작성하는 데 중요한 부분입니다. 제네릭은 재사용 가능한 유형을 작성할 수 있게 해주는 TypeScript의 기능입니다. 다음 예를 보세요:

type Add<T> = (a: T, b: T) => T

const addNumbers: Add<number> = (a, b) => {
  return a + b
}

const addStrings: Add<string> = (a, b) => {
  return a + b
}

두 숫자의 추가 또는 두 문자열의 연결을 설명하는 데 사용할 수 있는 Add의 일반 유형에 올바른 유형을 입력하세요. 각 함수에 대한 유형을 작성하는 대신 제네릭을 사용하여 한 번만 작성하면 됩니다. 이렇게 하면 노력이 절약될 뿐만 아니라 코드가 더 깔끔해지고 오류 발생 가능성도 줄어듭니다. Add的泛型中，它可以被用来描述两个数字的相加或两个字符串的连接。我们不需要为每个函数写一个类型，而只需要用泛型做一次。这不仅节省了我们的精力，而且还使我们的代码更加简洁，更不容易出错。

实用类型

TypeScript 原生提供了几个有用的实用类型来帮助我们进行一些常见的类型转换。这些实用类型是全局可用的，它们都使用了泛型。

下面这7个是我经常用到的。

1. Pick<type keys></type>

Pick会从 Type 中挑选属性集 Keys 来创建一个新的类型，Keys 可以是一个字符串字面或字符串字面的联合。Keys 的值必须是 Type 的键，否则TypeScript编译器会抱怨。当你想通过从有很多属性的对象中挑选某些属性来创建更轻的对象时，这个实用类型特别有用。

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type BasicUser = Pick<User, "name" | "age">

// type BasicUser = {
//   name: string;
//   age: number;
// }

2. Omit<type keys></type>

Omit与Pick相反。 Keys 不是说要保留哪些属性，而是指要省略的属性键集。 当我们只想从对象中删除某些属性并保留其他属性时，这个会更有用。

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type BasicUser = Omit<User, "address" | "occupation">

// type BasicUser = {
//   name: string;
//   age: number;
// }

3. Partial<type></type>

Partial 构造了一个类型，其所有的类型属性都设置为可选。当我们在编写一个对象的更新逻辑时，这个可能非常有用。

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type PartialUser = Partial<User>

// type PartialUser = {
//   name?: string;
//   age?: number;
//   address?: string;
//   occupation?: string;
// }

4. Required<type></type>

Required与Partial相反。它构造了一个类型的所有属性都是必填的类型。它可以被用来确保在一个类型中没有可选属性出现。

type PartialUser = {
  name: string
  age: number
  address?: string
  occupation?: string
}

type User = Required<PartialUser>

// type User = {
//   name: string;
//   age: number;
//   address: string;
//   occupation: string;
// }

5. Readonly<type></type>

Readonly 构建了一个类型，其类型的所有属性被设置为只读。重新分配新的值 TS 就会报错。

type User = {
  name: string
  age: number
  address: string
  occupation: string
}

type ReadOnlyUser = Readonly<User>

const user: ReadOnlyUser = {
  name: "小智",
  age: 24,
  address: "厦门",
  occupation: "大迁世界"
}

user.name = "王大冶"
// Cannot assign to &#39;name&#39; because it is a read-only property.

6. ReturnType<type></type>

ReturnType

유틸리티 유형

TypeScript는 몇 가지 일반적인 유형 변환을 수행하는 데 도움이 되는 몇 가지 유용한 유틸리티 유형을 기본적으로 제공합니다. 이러한 유틸리티 유형은 전 세계적으로 사용 가능하며 모두 제네릭을 사용합니다.

다음 7가지가 제가 자주 사용하는 것들이에요.

1. Pick<type keys></type>

Pick은 Type에서 Keys 속성 세트를 선택하여 새로운 유형의 조합이 될 수 있습니다. 리터럴 또는 문자열 리터럴. Keys 값은 Type 의 키여야 합니다. 그렇지 않으면 TypeScript 컴파일러가 오류를 발생시킵니다. 이 유틸리티 유형은 속성이 많은 개체에서 특정 속성을 선택하여 더 가벼운 개체를 만들려는 경우 특히 유용합니다.

import axios from 'axios'

type Response = ReturnType<typeof axios>

function callAPI(): Response{
  return axios("url")
}

2. 생략

생략은 선택의 반대입니다. 키는 유지할 속성이 아니라 생략할 속성 키 집합을 의미합니다. 이는 객체에서 특정 속성을 제거하고 다른 속성을 유지하려는 경우에 더 유용합니다. 🎜rrreee🎜🎜3. Partial<type></type>🎜🎜🎜Partial은 모든 유형 속성이 선택사항으로 설정된 유형을 구성합니다. 이는 객체에 대한 업데이트 논리를 작성할 때 매우 유용할 수 있습니다. 🎜rrreee🎜🎜4. 필수🎜🎜🎜필수는 부분의 반대입니다. 모든 속성이 필요한 유형을 구성합니다. 유형에 선택적 속성이 없는지 확인하는 데 사용할 수 있습니다. 🎜rrreee🎜🎜5. Readonly<type></type>🎜🎜🎜Readonly 유형의 모든 속성이 읽기 전용으로 설정된 유형을 구성합니다. 새 값 TS를 다시 할당하면 오류가 발생합니다. 🎜rrreee🎜🎜6. ReturnType<type></type>🎜🎜🎜ReturnType 함수 유형의 반환 유형에서 유형을 구성합니다. 외부 라이브러리의 함수 유형을 처리하고 이를 기반으로 사용자 정의 유형을 구축하려는 경우 매우 유용합니다. 🎜rrreee🎜위에서 언급한 것 외에도 더 깔끔한 코드를 작성하는 데 도움이 되는 다른 유틸리티 유형이 있습니다. 유틸리티 유형에 대한 TypeScript 문서 링크는 여기에서 찾을 수 있습니다. 🎜🎜🎜https://www.typescriptlang.org/docs/handbook/utility-types.html🎜🎜🎜유틸리티 유형은 TypeScript에서 제공하는 매우 유용한 기능입니다. 개발자는 하드코딩 유형을 피하기 위해 이를 활용해야 합니다. 동료들보다 더 좋아 보이나요? 알아야 할 사항은 다음과 같습니다! 🎜🎜🎜이 기사는 https://segmentfault.com/a/1190000040574488🎜🎜🎜에서 재인쇄되었습니다. 프로그래밍 관련 지식을 더 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 TypeScript에서 알아야 할 7가지 방법에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!