typescript速学：新闻实体对象、接口

最新推荐文章于 2025-01-20 14:38:33 发布

学习笔记666

最新推荐文章于 2025-01-20 14:38:33 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript魔鬼课程

本文链接：https://blog.youkuaiyun.com/github_26672553/article/details/72818253

JavaScript魔鬼课程专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何使用TypeScript的接口来规范JavaScript代码，确保对象结构的一致性和提高代码质量。通过实例展示了接口的基本用法和复杂类型的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天我们要来学一下『接口』
https://tslang.cn/docs/handbook/interfaces.html

1、我们来设计一个新闻实体类；设计一个函数来添加新

下面是传统的做法：

let NewsEntity = {
    "title":"新闻标题",
    "content":"新闻内容"
}

let addNews = function (news) {
    console.log(news.title);
}

addNews(NewsEntity)

上面代码，我们执行的时候是会正常打印出：新闻标题。那是因为我们确实给addNews()传递的参数对象中有title这个属性，可以想象如果我们传错了就会导致整个代码错误。

JavaScript在写代码的时候并没有一定的强制规范，所以导致有些错误很难调试。
所以我们使用TypeScript给我们一个强制的规范。

我们通过TS中的接口，来约束：

// 定义新闻实体类接口
// title是字符串 content是可选的字符串
interface NEInterface {
    title:String,
    content:string
}

// 定义函数接口
// 参数是NEInterface类型的 无返回值的
interface NEFunction {
    (xxx:NEInterface):void
}

然后我们的新闻实体类和函数都要继承相关的接口：

let NewsEntity:NEInterface = {
    "title":"新闻标题",
    "content":"新闻内容"
}

let addNews:NEFunction = function (news) {
    console.log(news.title);
}

有了这一层约束，在写代码的时候编辑器就会报错提示我们啦
这里写图片描述

比较难理解的混合类型

interface NEInterface {
    title:String,
    content?:string
}

interface NEFunction {
    (news:NEInterface):void,
    addNews():void,
    updateNews():void,
    version:string
}

// 返回一个实现了NEFunction的函数
function NewsFunction(news:NEInterface):NEFunction{
    let func = <NEFunction>function (news:NEInterface) {
        this.getNews = news;
    };
    func(news);

    func.addNews = ()=>{
        console.log(this.getNews.title+"新增成功");
    }
    func.updateNews = ()=>{
        console.log(this.getNews.title+"更新成功");
    }
    func.version = "version 1.0";


    return func;
}

// 调用函数
let News:NEInterface = {
    "title":"我是标题",
    "content":"我的内容"
}
NewsFunction(News).addNews();
NewsFunction(News).updateNews();
console.log(NewsFunction(News).version);