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";
// }