[Typescript] Typing Class method with this keyword
We have the following code:
class Form<TValues> {
error?: string;
constructor(
public values: TValues,
private validate: (values: TValues) => string | void,
) {}
isInvalid() {
const result = this.validate(this.values);
if (typeof result === "string") {
this.error = result;
return true;
}
this.error = undefined;
return false;
}
}
const form = new Form(
{
username: "",
password: "",
},
(values) => {
if (!values.username) {
return "Username is required";
}
if (!values.password) {
return "Password is required";
}
},
);
if (form.isInvalid()) {
type test1 = Expect<Equal<typeof form.error, string>>; // error: (property) Form<TValues>.error?: string | undefined
} else {
type test2 = Expect<Equal<typeof form.error, string | undefined>>;
}
We want to type isInvalid
function, but somehow it doesn't have any arguement.
One way is using this
:
isInvalid(): this is Form<TValues>
Since it check invalid case, we can do:
isInvalid(): this is Form<TValues> & { error: string } {
This actually solve the issue.
Another way we can do it is:
isInvalid(): this is this & { error: string } {
So second this
is actually the Form<TValues>
.
---
Another example:
import { Equal, Expect } from '../helpers/type-utils';
interface User {
id: string;
}
export class SDK {
loggedInUser?: User;
constructor(loggedInUser?: User) {
this.loggedInUser = loggedInUser;
}
// How do we type this assertion function?
assertIsLoggedIn(): asserts this is this & { loggedInUser: User } {
if (!this.loggedInUser) {
throw new Error('Not logged in');
}
}
createPost(title: string, body: string) {
type test1 = Expect<Equal<typeof this.loggedInUser, User | undefined>>;
this.assertIsLoggedIn();
type test2 = Expect<Equal<typeof this.loggedInUser, User>>;
}
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
2021-02-10 [Typescript] Create Type From Any Given Data in TypeScript
2021-02-10 [Typescript] Ignore Null or Undefined Values with TypeScript Non-Null Assertion Operator
2020-02-10 [Algorithm] 226. Invert Binary Tree
2020-02-10 [Unit Testing] Jasmine Spies
2019-02-10 [HTML5] Build Flexible HTML with HTMLTemplates using Slots and Web Components
2017-02-10 [Typescript] What is a Function Type ? Function Types and Interfaces - Are They Related ?