TypeScript 高级类型检查

标签 typescript

请检查代码中的注释。是否可以得到我想要的或者TS没有这样的功能?

我需要对我的 addToRegistry 函数进行类型检查。

TypeScript playground with code

type MessageHandler<T> = ((data: T) => void) | ((data: T) => Promise<void>);

interface AuthPayload {
    id: string;
}

class HandlersRegistry {
    auth?: MessageHandler<AuthPayload>;
    test?: MessageHandler<number>;
}

const registry = new HandlersRegistry();

// handler type should ref on HandlersRegistry[key] by eventType
// function addToRegistry<T>(eventType: keyof HandlersRegistry, handler: ???) {
function addToRegistry<T>(eventType: keyof HandlersRegistry, handler: MessageHandler<T>) {
    registry[eventType] = handler; // should not be an error
}

const authHandler: MessageHandler<AuthPayload> = (data: AuthPayload) => null;

// correct
addToRegistry('auth', authHandler);
// correct, shows error, but I don't want to provide type of payload every time
addToRegistry<number>('test', authHandler);
// should show error, but doesn't
addToRegistry('test', authHandler);

感谢您的回答!

最佳答案

您可以使用泛型类型来保存键的类型,并使用类型查询来指定参数必须与字段类型相同:

type MessageHandler<T> = ((data: T) => void) | ((data: T) => Promise<void>);

interface AuthPayload {
    id: string;
}

class HandlersRegistry {
    auth?: MessageHandler<AuthPayload>;
    test?: MessageHandler<number>;
}

const registry = new HandlersRegistry();

// handler type should ref on HandlersRegistry[key] by eventType
// function addToRegistry<T>(eventType: keyof HandlersRegistry, handler: ???) {
function addToRegistry<K extends keyof HandlersRegistry>(eventType: K, handler: HandlersRegistry[K]) {
    registry[eventType] = handler; // should not be an error
}

const authHandler: MessageHandler<AuthPayload> = (data: AuthPayload) => null;

// correct
addToRegistry('auth', authHandler);
// correct, shows error, but I don't want to provide type of payload every time
addToRegistry<number>('test', authHandler);
// show error as expected
addToRegistry('test', authHandler); 

关于TypeScript 高级类型检查,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51337212/

相关文章:

angular - 来回改变路线后可观察到的数据消失了

javascript - 在一台电脑中使用 new 关键字而在另一台电脑中不使用 new 时,typescript nodejs 出现错误

javascript - 有没有办法启用 VS Code WebView 的搜索功能?

Angular 2+ : Get child element of @ViewChild()

typescript - 如何将 Firebase 参数化配置与 Typescript 一起用于 Cloud Functions?

typescript - 无法导入 CSS/SCSS 模块。 typescript 说 "Cannot Find Module"

typescript - typescript 中函数返回类型的扩展是什么

javascript - React Context 和 Provider 数据未按预期传递

javascript - 突出显示 HTML 中的特定单词

javascript - 用于删除除数字以外的字符并仅在 Angular 6 中允许单个小数点的正则表达式