TypeScript自定义Text接口报错：缺少属性问题求助

你遇到的问题根源是：自定义的Text接口和浏览器环境中原生DOM的Text接口重名了。TypeScript会优先识别全局的原生Text类型（对应DOM文本节点的类型），所以才会提示你缺少wholeText、splitText等原生Text接口的属性，而非你自己定义的那几个属性。

解决方法有两种： #

1. 重命名自定义接口

最简单的方式是把你的接口改成其他名称，比如TextMessage：

enum Status {
    SENT = "Sent",
    DELIVERED = "Delivered",
    READ = "Read",
}

interface Require {
    sender: string;
    recipient: string;
    timestamp: number;
    status: Status;
}

// 重命名接口，避开原生Text的命名冲突
interface TextMessage extends Require {
    type: "text";
    content: string;
}

const textMessage: TextMessage = {
    type: "text",
    sender: "Bob",
    recipient: "Alice",
    timestamp: Date.now(),
    content: "Hello this is bob!",
    status : Status.SENT
};

2. 用命名空间/模块隔离自定义类型

如果不想改名称，可以把自定义类型放到命名空间里，和全局类型隔离开：

namespace MessageModels {
    export enum Status {
        SENT = "Sent",
        DELIVERED = "Delivered",
        READ = "Read",
    }

    export interface Require {
        sender: string;
        recipient: string;
        timestamp: number;
        status: Status;
    }

    export interface Text extends Require {
        type: "text";
        content: string;
    }
}

// 使用时通过命名空间访问自定义的Text接口
const textMessage: MessageModels.Text = {
    type: "text",
    sender: "Bob",
    recipient: "Alice",
    timestamp: Date.now(),
    content: "Hello this is bob!",
    status : MessageModels.Status.SENT
};

补充说明 #

在浏览器环境下，TypeScript默认会引入DOM相关的类型定义，像Text、Node、Element这类都是全局的原生类型，自定义类型时尽量避开这些名称，或者通过模块、命名空间的方式隔离，避免冲突。

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