Web
🕹️TypeScript 进阶
00 分钟
2022-8-18
2022-9-16
type
status
date
slug
summary
tags
category
icon
password
Edited
Sep 16, 2022 03:22 AM
Created
Aug 18, 2022 07:28 AM

进阶

namespace命名空间

TypeScript与ECMAScript 2015一样，任何包含顶级import或者export的文件都被当成一个模块。相反地，如果一个文件不带有顶级的import或者export声明，那么它的内容被视为全局可见的（因此对模块也是可见的）
我们在工作中无法避免全局变量造成的污染，TypeScript提供了namespace 避免这个问题出现
  • 内部模块，主要用于组织代码，避免命名冲突。
  • 命名空间内的类默认私有
  • 通过 export 暴露
  • 通过 namespace 关键字定义
namespace还可以嵌套、合并（同名的namespace）
 

三斜线指令

三斜线指令是包含单个XML标签的单行注释。 注释的内容会做为编译器指令使用。
三斜线指令仅可放在包含它的文件的最顶端。 一个三斜线指令的前面只能出现单行或多行注释，这包括其它的三斜线指令。 如果它们出现在一个语句或声明之后，那么它们会被当做普通的单行注释，并且不具有特殊的涵义
/// <reference path="..." />指令是三斜线指令中最常见的一种。 它用于声明文件间的 依赖
可以把它理解能import，它可以告诉编译器在编译过程中要引入的额外的文件
 

声明文件d.ts

当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能
通常我们会把声明语句放到一个单独的文件（jQuery.d.ts）中，这就是声明文件
声明文件必需以 .d.ts为后缀
  • declare var 声明全局变量
  • declare function 声明全局方法
  • declare class 声明全局类
  • declare enum 声明全局枚举类型
  • declare namespace 声明（含有子属性的）全局对象
  • interface 和 type 声明全局类型

第三方发布的声明文件包

npm
DefinitelyTyped repository testing infrastructure
npm
https://www.npmjs.com/~types?activeTab=packages
npm
 

装饰器Decorator

Decorator 装饰器是一项实验性特性，在未来的版本中可能会发生改变
它们不仅增加了代码的可读性，清晰地表达了意图，而且提供一种方便的手段，增加或修改类的功能

装饰器

装饰器 是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上。
装饰器函数 (继承 ClassDecorate )
给装饰了的函数添加一个方法 getParams
使用：

装饰器工厂

其实也就是一个高阶函数 外层的函数接受值 里层的函数最终接受类的构造函数
 
多个装饰器可以组合使用

方法装饰器

返回三个参数
  1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
  1. 成员的名字。
  1. 成员的属性描述符。

属性装饰器

返回两个参数
  1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
  1. 属性的名字。

参数装饰器

返回三个参数
  1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
  1. 成员的名字。
  1. 参数在函数参数列表中的索引。

示例 → 也是Nestjs底层GET

 

TS编写发布订阅模式

 

Proxy & Reflect

Proxy

Proxy对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）
  • target
      • 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）
  • handler
      • 一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为
      handler.get()：属性读取操作的捕捉器
      handler.set()：属性设置操作的捕捉器

Reflect

Reflect的所有属性和方法都是静态的
  • Reflect.get(target, name, receiver)
      • Reflect.get方法查找并返回target对象的name属性，如果没有该属性返回undefined
  • Reflect.set(target, name, value, receiver)
      • Reflect.set方法设置target对象的name属性等于value
 

Partial & Pick & Readonly & Record & Infer

Partial

将类型全部转为可选
源码：
  • keyof 是干什么的？
      • keyof我们讲过很多遍了 将一个接口对象的全部属性取出来变成联合类型
  • in 是干什么的？
      • in 我们可以理解成for in P 就是key 遍历 keyof T 就是联合类型的每一项
  • ? 是将该属性变为可选属性
      • ？这个操作就是将每一个属性变成可选项
  • T[P] 是干什么的？
      • T[P] 索引访问操作符，与 JavaScript 种访问属性值的操作类似
 

Pick

从类型定义T的属性中，选取指定一组属性，返回一个新的类型定义
源码：
 

Readonly

与Partial类似，只是把 ? 换成了readonly
源码：
 

Record

做到了约束 对象的key 同时约束了 value
源码：
 

Infer

infer 是TypeScript新增到的关键字 充当占位符
例如：
 
参考链接：
  1. (22条消息) typeScript_小满zs的博客-CSDN博客
 
上一篇
Vue + Pinia
下一篇
TypeScript 基础
评论
Loading...