TypeScript学习笔记（十）—— 泛型工具类型

小徐今天学习了吗
117 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章TypeScript学习笔记（九）—— 泛型约束中，我们学习了TypeScript的相关知识点，包括泛型约束、泛型的多个类型变量、泛型接口等相关知识点。在本篇文章中，我们将学习TypeScript的相关知识点，包括泛型工具类型、如何在React项目中使用 TS等内容。

泛型工具类型

TS 内置了一些常用的工具类型，来简化 TS 中的一些常见操作，这些是泛型工具类型。它们都是基于泛型实现的(泛型适用于多种类型，更加通用)，并且是内置的，可以直接在代码中使用。 这些工具类型有很多，我们主要介绍以下几个:

  1. Partial<Type>
  2. Readonly<Type>
  3. Pick<Type, Keys>

Partial

Partial<Type> 用来构造(创建)一个类型，将 Type 的所有属性设置为可选。在以下例子中，构造出来的新类型 PartialProps 结构和 Props 相同，但所有属性都变为可选的。

type Props =  {
  id: string
  children: number[]
}

type PartialProps = Partial<Props>

Readonly

Readonly<Type> 用来构造一个类型，将 Type 的所有属性都设置为 readonly只读的。在以下例子中，构造出来的新类型 ReadonlyProps 结构和 Props 相同，但所有属性都变为只读的。

type Props =  {
  id: string
  children: number[]
}

type ReadonlyProps = Readonly<Props>

当我们想重新给 id 属性赋值时，就会报错:无法分配到 "id" ，因为它是只读属性。

let props: ReadonlyProps = { id: '1', children: [] }
// 错误演示
props.id = '2'

Pick

Pick<Type, Keys> 从 Type 中选择一组属性来构造新类型。Pick 工具类型有两个类型变量:1 表示选择谁的属性 2 表示选择哪几个属性。其中第二个类型变量，如果只选择一个则只传入该属性名即可。第二个类型变量传入的属性只能是第一个类型变量中存在的属性。构造出来的新类型 PickProps，只有 id 和 title 两个属性类型。

interface Props {
  id: string
  title: string
  children: number[]
}
type PickProps = Pick<Props, 'id' | 'title'>

在 React 项目中使用 TS

创建新项目使用的命令：npx create-react-app my-app --template typescript。在命令行中，添加 --template typescript 表示创建支持 TS 的项目。创建完项目后，我们发现项目目录有一些变化：

  1. 在项目根目录中多了一个文件：tsconfig.json。这是TS的配置文件。
  2. 在 src 目录中，文件的后缀有变化，由原来的 .js 变为 .ts 或 .tsx。.ts 是ts文件的后缀名。.tsx 是在 TS 中使用 React 组件时，需要使用该后缀，只要文件中使用了jsx模板，后缀名必须叫tsx。
  3. 在 src 目录中，多了 react-app-env.d.ts 文件。.d.ts 是类型声明文件，用来指定类型。
avatar
文章
阅读
粉丝