typescript map转对象_typescript修炼指南（四）

大纲

本章主要是一些ts的类型工具以及模块化和相关实践，涉及以下内容：

- 类型编程

- module和namespace

- 小技巧

- ts在react中的实践

这篇稍微有点零碎，建议多查阅文档或相关的文章进行更多的了解，代码示例以告知 QAQ

往期推荐：

- typescript修炼指南(一)

- typescript修炼指南(二)

- typescript修炼指南(三)

---

类型编程

• 索引类型（假定我们要取出如下对象的name属性对应的值）

const 

• 索引类型查询操作符

class 

• 索引访问操作符 T[K][], 之前也提到过

function 

• 映射类型 [K in keyof T]

interface 

• 截获函数返回值类型 ---- ReturnType

interface 

• 类型递归

interface 

• 工具类型 ’+‘号 ’-‘号 这两个关键字用于映射类型中给属性添加修饰符,比如-?就代表将可选属性变为必选,-readonly代表将只读属性变为非只读。比如TS就内置了一个类型工具Required,它的作用是将传入的属性变为必选项:

Required 将传入的属性变为必选项：

type 

Exclude 的作用是从 T 中排除出可分配给 U的元素. T extends U指T是否可分配给U：

type 

Omit：

type 

Merge Merge的作用是将两个对象的属性合并:

// type Merge<Obj1, obj2> = Compute<A> + Omit<U, T>

Intersection Intersection是Extract与Pick的结合,Intersection = Extract + Pick：

type 

Overwrite顾名思义,是用U的属性覆盖T的相同属性：.

type 

module和namespace

• 全局变量 比如在1.ts定义：const a = 1， 2.ts定义： const a = 2 这样全局中定义的变量会报错 因为重复声明了 避免全局变量
• 导出类型

export 

• 导出多个类型

// 导出多个类型

• 重命名

export 

• 引入

import 

• namespace 其实一个命名空间本质上一个对象，它的作用是将一系列相关的全局变量组织到一个对象的属性 如果一个命名空间在一个单独的 TypeScript 文件中，则应使用三斜杠 /// 引用它，语法格式如下：

// index.ts

小技巧

• 注释,利于智能提示快速定位代码

interface 

• 类型推导

function 

• 巧用Omit 有时候我们需要复用一个类型，但是又不需要此类型内的全部属性，因此需要剔除某些属性，这个时候 Omit 就派上用场了。

interface 

• Record 高级类型 Record 允许从 Union 类型中创建新类型，Union 类型中的值用作新类型的属性。有利于类型安全

type 

react实践

• 编写一个无状态的组件

写法1：

// 定义一个接口

写法2：

type 

• 编写状态组件 避免状态被显示改变 所以 需要赋 readonly

const 

• ref

interface 

• 默认属性传递

interface 

• promise类型问题

// promise类型问题

至此，系列文章基本完结啦~ 近期也在整理一些 ts 实践性的文章，主要以react框架和ts类型编程技巧为主，过段时间会陆续上传，如果对大家有帮助记得点个赞~ ， 如有错误请指正， 我们一起解决，一起进步。