TS7053错误排查：Slate编辑器isFormatActive函数类型问题

问题背景 #

参照Slate官方示例开发时，IDE抛出TS7053错误：

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Omit<BaseText, "text">'. No index signature with a parameter of type 'string' was found on type 'Omit<BaseText, "text">'.

问题出在isFormatActive函数中，format参数为string类型，TS无法确认该字符串是Slate文本节点的合法属性键。

解决方案 #

步骤1：定义合法的格式键类型 #

从Slate导入BaseText类型，提取其中除text外的所有键，作为格式键的合法类型：

import { BaseText, Editor, ReactEditor } from 'slate';

// 提取BaseText中除text外的属性作为合法格式键
type FormatKey = Exclude<keyof BaseText, 'text'>;

如果你的项目自定义了文本节点类型（比如新增了underline、strikethrough等格式），替换为自定义类型即可：

// 自定义文本节点类型
type CustomText = BaseText & {
  underline?: boolean;
  strikethrough?: boolean;
};

type FormatKey = Exclude<keyof CustomText, 'text'>;

步骤2：修改函数参数类型 #

将isFormatActive的format参数类型改为FormatKey，TS就能确认该键属于文本节点的合法属性：

const isFormatActive = (editor: ReactEditor, format: FormatKey) => {
  const [match] = Editor.nodes(editor, {
    match: node => node[format] === true,
    mode: "all",
  });
  return !!match;
};

原理说明 #

原代码中format的string类型过于宽泛，TS无法验证任意字符串是否为文本节点的有效属性。通过将format限制为文本节点的合法格式键类型，TS可以准确推断节点属性的存在性，消除类型错误。

内容的提问来源于stack exchange，提问作者HappyKoala