[ts]typescript高阶之typeof使用

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


前端必备工具推荐网站(免费图床、API和ChatAI等实用工具):
http://luckycola.com.cn/

前言

学习目标
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";
// }


总结

  • 5
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
TypeScript 中的函数是指接收一个或多个函数作为参数或者返回一个函数的函数。这些函数可以用于函数的组合、柯里化、函数的延迟执行等场景。 以下是一个简单的 TypeScript 函数示例: ```typescript function add(x: number): (y: number) => number { return function(y: number) { return x + y; }; } const addFive = add(5); console.log(addFive(3)); // 输出 8 ``` 在上面的示例中,`add` 函数接收一个数字参数 `x`,并返回一个函数,这个函数接收一个数字参数 `y`,并返回 `x + y` 的结果。我们可以使用 `add(5)` 来创建一个新的函数 `addFive`,这个函数接收一个数字参数 `y`,并返回 `5 + y` 的结果。这就是一个简单的柯里化函数,可以用于多次重复调用。 除了柯里化之外,函数还可以用于函数的组合,例如将多个函数组合成一个新的函数: ```typescript function compose<A, B, C>(f: (arg: A) => B, g: (arg: B) => C): (arg: A) => C { return function(x: A) { return g(f(x)); }; } function toUpperCase(s: string): string { return s.toUpperCase(); } function exclaim(s: string): string { return s + '!'; } const shout = compose(toUpperCase, exclaim); console.log(shout('hello world')); // 输出 "HELLO WORLD!" ``` 在上面的示例中,`compose` 函数接收两个函数 `f` 和 `g`,并返回一个新的函数,这个新的函数接收一个参数 `x`,将 `x` 作为参数传递给 `f` 函数,将 `f(x)` 的结果作为参数传递给 `g` 函数,最后返回 `g(f(x))` 的结果。我们可以使用 `compose(toUpperCase, exclaim)` 来创建一个新的函数 `shout`,这个函数会将输入字符串转换为大写字母并在末尾添加感叹号。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LuckyCola2023

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值