Tip: After the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right
Typescript advanced: use of typeof
Recommended website for essential front-end tools (free picture bed, API, ChatAI and other practical tools):
http://luckycola.com.cn/
Preface
Learning objectives
1. Use typeof in conjunction with objects
2. Use typeof in conjunction with enumerations
3. Use typeof in conjunction with class
4. Use of const assertions
1. Use typeof in combination with objects
The code is as follows (example):
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;
// }
2. Use typeof in combination with enumeration
The code is as follows (example):
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"
3. Use typeof in combination with class
The code is as follows (example):
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" 没有构造签名。
}
4. Use typeof in combination with functions
The code is as follows (example):
// 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]
5. Use of const assertions
The code is as follows (example):
// 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";
// }