一道TypeScript题目,快速上手TS(keyof,extends,typeof)

原创

已于 2022-08-03 08:39:51 修改 · 723 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #javascript #开发语言

于 2022-08-03 08:32:00 首次发布

本文介绍了如何通过一道TypeScript题目理解并运用keyof, extends和typeof这三个关键字。作者作为TS初学者，分享了解题过程，并建议读者在阅读前先了解typescript高级用法之infer的相关知识。题目目标是根据特定规则修改Connect类型的connected属性。" 115489707,10850775,Java基础与集合操作详解,"['Java基础', '集合操作', '数据比较', '编程规范']

一道TypeScript题目,快速上手TS(keyof,extends,typeof)

本人为ts初学者,本文题目和答案均来自于typescript高级用法之infer的理解与使用
由于原文并没有对语法部分进行详细说明,在理解后写下自己的步骤
建议阅读前先阅读下typescript高级用法之infer的理解与使用,有益于帮助理解

题目

interface Action<T> {
   
   
  payload?: T;
  type: string;
}

class EffectModule {
   
   
  count = 1;
  message = "hello!";

  delay(input: Promise<number>) {
   
   
    return input.then(i => ({
   
   
      payload: `hello ${
     
     i}!`,
      type: 'delay'
    }));
  }

  setMessage(action: Action<Date>) {
   
   
    return {
   
   
      payload: action.payload!.getMilliseconds(),
      type: "set-message"
    };
  }
}

// 修改 Connect 的类型，让 connected 的类型变成预期的类型
type Connect = (module: EffectModule) => any;

const connect: Connect = m => ({
   
   
  delay: (input: number) => ({
   
   
    type: 'delay',
    payload: `hello 2`
  }),
  setMessage: (action: Date) => ({
   
   
    type: "set-message",
    payload: input.getMilliseconds()
  })
});

//需要推断出的类型
type Connected = {
   
   
  delay(input: number): Action<