typescript 可空类型-Typescript中间使用接口代码示例合集

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

接口是TypeScript中的一种类型定义方法typescript 可空类型，用于描述对象的形状。

假设我们现在想要实现一些需求。 在一个简单的CMS系统中typescript 可空类型，我们想要实现文章的添加、删除、修改、查询等功能。

为了方便编写代码，即操作对应的socket数据时，我们会写一个对象类型声明，以便开发工具会有提示。

继承类型并快速生成必要的属性，

代码

快速生成属性

生成结果

使用继承类的函数

编写代码时，会提示接口数据属性。

暗示

用例代码

/**
 * 文章对象
 */
interface IArticle {
    /** id */
    id: string
    /** 标题 */
    title: string
    /** 类型ID */
    type_id: string
    /** 文章内容 */
    content: string
    /** 发布时间 */
    publish_datetime: string
}
/**
 * 文章视图对象
 * 继承了IArticle的所有属性，并新增了一个type_title属性。
 */
interface IVArticle extends IArticle {
    // 菜单类型名称
    type_title: string
}

export class SearchService {
    /**
     * 查询数据
     * @param url 接口地址
     * @param data 查询参数
     * @param callBack 返回接口数据
     */
    query = (url: string, data: any, callBack: (res: any) => void): void => {
        // ...
    }
    /**
     * 通用分页查询
     * @param url 接口地址
     * @param data 分页查询条件
     * @param callBack 返回集合数据
     */
    getPaging(url: string, data: IPager, callBack: (datas: T[]) => void): void {
        this.query(url, data, res => callBack(res.List));
    }
}

/**
 * 文章相关服务类
 * 继承了SearchService的一些方法，视图层直接调用即可。
 *  */
export class ArticleService extends SearchService {
    /**
     * 文章类型列表分页
     * @param data 分页查询条件
     * @param callBack 返回文章类型列表
     */
    getArticleTypePaging = (data: IPagerArticleType, callBack: (datas: IArticleType[]) => void): void => {
        // 直接调用 SearchService 中 getPaging。
        // 给视图层返回一个文章类型集合
        this.getPaging('/api/articleType/paging', data, callBack);
    }
    /**
     * 文章列表分页
     * @param data 分页查询条件
     * @param callBack 返回文章列表
     */
    getArticlePaging = (data: IPagerArticle, callBack: (datas: IArticle[]) => void): void => {
        // 直接调用 SearchService 中 getPaging。
        // 给视图层返回一个文章集合
        this.getPaging('/api/article/paging', data, callBack);
    }
    /**
     * 添加文章
     * @param data 文章数据
     * @param callBack 返回调用结果
     */
    addArticle(data: IArticle, callBack: (err: Error | null, data: IApiResult) => void) {
    }
}

可选属性

假设id为空，则调用新函数。 如果 id 有值，则调用更改函数。 也就是说，根据情况，id属性是可有可无的。

/**
 * 文章类型对象 
 */
interface IArticleType {
    id?: string
    title: string
    parent_id: string
}

正如您在代码中看到的，一个“？” id前面添加 标志，表示id属性是可选的。 不过parent_id是必须的，否则开发工具会直接报错。

只读属性

假设我们返回的socket数据中，需要判断文章类型是显示还是隐藏。 你是否遇到过或者看到别人写过类似“if(data.show = '1')”的代码，但是省略了=号？ 代码没有报错，程序可以运行，但是有bug。 健康）状况。 那么只读属性就可以解决这类问题。 当然，这些只是例子。 我们期待您发现更多用途。

不允许使用形式参数

修正前

固定后

动态特性

有时，当我们在页面上渲染数据时，我们需要降低某个自定义属性。