🕹️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 声明全局类型

第三方发布的声明文件包

 

装饰器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...