首页 > 其他分享 >[ts]typescript高阶之typeof使用

[ts]typescript高阶之typeof使用

时间:2023-06-17 23:46:11浏览次数:52  
标签:typescript const name number ts HttpMethod typeof type


LcukyCola前端工具官网:
https://luckycola.com.cn/public/dist/#/

前言

学习目标
1、typeof与对象结合使用
2、typeof与枚举结合使用
3、typeof与class类结合使用
4、const断言的使用


一、typeof与对象结合使用

代码如下(示例):

let lolo = {
  name: 'zhanhsan',
  age: 18,
  child: {
    name: 'zhangsansan',
    like: true,
    age: 12
  }
};

type Lolo = typeof lolo;
// {
//   name: string;
//   age: number;
//   child: {
//       name: string;
//       like: boolean;
//       age: number;
//   };
// }

type Lolochild = typeof lolo.child;
// {
//   name: string;
//   like: boolean;
//   age: number;
// }

二、typeof与枚举结合使用

代码如下(示例):

enum HttpMethod {
  Get,
  Post
};

// 注意枚举类型之间的转换关系 如下
// 上面ts枚举类型写法等价于es5中的写法:
// "strict"
// var HttpMethod;
// (function (HttpMethod) {
//   HttpMethod[HttpMethod['Get' = 0]] = 'Get';
//   HttpMethod[HttpMethod['Post' = 1]] = 'Post';
// })(HttpMethod || HttpMethod = {});


type Methods = typeof HttpMethod;
const meth: Methods = {
  Get: 0,
  Post: 1
}

type Meth = keyof typeof HttpMethod;//  "Get" | "Post"

三、typeof与class类结合使用

代码如下(示例):

class Ponit {
  x: number;
  y: number;
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
};

// 工厂函数
// 这里 typeof Point ------> new (x: number, y: number) => number;
function getInstance(PointClass: typeof Ponit, x: number, y: number) {
  return new PointClass(x, y);
}
// 下面写法将报错
function getInstance2(PointClass: Ponit, x: number, y: number) {
  return new PointClass(x, y);// 报错 此表达式不可构造。类型 "Ponit" 没有构造签名。
}

四、typeof与函数结合使用

代码如下(示例):

//  typeof与函数结合使用
function add(a: number, b: number): number {
  return a + b;
};

type AddType = typeof add;//  (a: number, b: number) => number
type AddReturnType = ReturnType<AddType>;// number
type AddParamsType = Parameters<AddType>;// [a: number, b: number]

五、const断言的使用

代码如下(示例):


// 5 const断言可以是类型推断更加准确
let requestMethod = 'get'; // string
let requestMethod2 = 'get' as const; // "get"
let requestMethod3 = <const>'get'; // "get"

let user9 = {
  id: 333,
  name: 'lisi'
}

type User9 = typeof user9;
// {
//   id: number;
//   name: string;
// }



let user92 = {
  id: 333,
  name: 'lisi'
} as const;
type User92 = typeof user92;
// {
//   readonly id: 333;
//   readonly name: "lisi";
// }


总结

标签:typescript,const,name,number,ts,HttpMethod,typeof,type
From: https://www.cnblogs.com/luckycola2023/p/17488487.html

相关文章

  • 一次Mybaits查询的源码分析
    很好奇Mybaits是怎么将xml和mapper对应起来的,用一段比较简单的demo去debug追踪一下源码看看先用xml配置的方式,看懂了再去看注解的方式是怎么实现的获取MapperMybaits是如何从xml中加载到mapper的<?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEconfigurationPUB......
  • 使用Echarts时报 Implementation of registerMap doesn't exists 错误解决办法
    最新的echarts在使用时,如果使用按需加载的方式引入依赖。在使用registerMap函数时会报错如果出现这两个错误:ImplementationofregisterMapdoesn'texists.或者Mapxxxnotexists.TheGeoJSONofthemapmustbeprovided.那么大概率是因为echarts升级后导致的不兼......
  • IOT硬件&芯片安全检测工具--BTS1002多接口精密触发故障注入仪
    注1:该软硬件产品均为湖南底网安全信息技术有限公司自主研发,已申请1个发明专利,2个实用新型专利,1个软著,转载请注明出处注2:详细内容详见产品技术手册、用户手册,官网下载地址:注3:诚招区域独家代理合作伙伴,欢迎洽谈合作,湖南底网安全竭诚为您服务1.产品背景没有网络安全,就没有国家安全,“......
  • Training-WWW-Robots
    Training-WWW-Robots进行翻译发现robots.txt,进行访问发现fl0g.php,访问它,获取flag......
  • python unitest 测试套件TestSuite()
    unittest框架提供了多种测试套件的使用方法,用于组织和执行测试用例。以下是一些常见的测试套件使用方法及其示例:1.使用unittest.TestSuite()创建测试套件,然后使用addTest()方法添加测试用例。importunittestclassMyTestCase(unittest.TestCase):deftest_addition(self):......
  • HotSpare 9361Raid卡热备盘的设置过程
    HotSpare9361Raid卡热备盘的设置过程摘要公司最近一批服务器到位(去年生产)插满24盘位的960G的SSD的超融合服务器.(硬盘是镁光的!-_-!)想着Raid6虽然数据保护比较好,但是写入是在是太垃圾了.所以想可以增加两块热备的Raid5这样的话虽然比raid6还要多损失一块960G的容......
  • 【GStreamer rtsp】gstreamer-rtsp-server开发环境搭建
    1.安装gstreamer基础库sudoapt-getinstalllibgl1-mesa-devsudoapt-getinstallgstreamer1.0-libavsudoapt-getinstallgstreamer1.0-plugins-badsudoapt-getinstallgstreamer1.0-plugins-basesudoapt-getinstallgstreamer1.0-plugins-uglysudoapt-getinstall......
  • JavaScript & TypeScript 学习总结
    @目录JavaScriptJavaScriptBOM对象JavaScriptDocument对象JavaScript事件处理JavaScript变量JavaScript函数基础JavaScript流程控制JavaScript数据类型JavaScript数组JavaScript运算符JavaScript正则表达式JavaScript字符串函数TypeScript简单示例JavaScriptJavaScriptBOM对......
  • Vue进阶(幺贰陆):表格复用 TypeError: _self.$scopedSlots.default is not a function解
    (文章目录)一、前言在使用elementUI的el-table组件时,表头应用v-if判断来动态显示,正常来说这样的操作是没有问题的,但是如果在这基础上使用<templateslot-scope="scope">操作的话,表头一旦切换就会报错,错误信息如下:_self.$scopedSlots.defaultisnotafunction二、解决方......
  • SpringBoot集成Swagger报错:Failed to start bean 'documentationPluginsBootstrapper'
    本文章向大家介绍SpringBoot集成Swagger报错:Failedtostartbean'documentationPluginsBootstrapper';,主要包括SpringBoot集成Swagger报错:Failedtostartbean'documentationPluginsBootstrapper';使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需......