TypeScript基础知识(5) TypeScript接口（可选成员，只读成员）

超级冲天猪

已于 2022-02-14 20:50:41 修改

阅读量640

点赞数 2

分类专栏： TpyeScript 文章标签： typescript javascript 前端

于 2022-02-14 20:49:42 首次发布

本文链接：https://blog.youkuaiyun.com/m0_51207602/article/details/122931505

版权

TpyeScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了TypeScript接口中的可选成员和只读成员概念。可选成员允许对象结构中存在非必需的属性，如`subtitle`，而只读成员如`summary`则确保属性在创建后不能被修改。TypeScript接口主要用于定义对象结构，并在编译后不体现在JavaScript代码中，仅用于类型检查。

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

TypeScript接口（可选成员，只读成员）

interfaces翻译过来就是接口，可以理解成规范或者是契约，可以用来约定对象的结构，我们去使用一个接口就必须要去遵循接口的全部规定。 TypeScript接口最直观的提现就是可以去约定一个对象当中具体有哪些成员，成员的类型又是什么样子。我们看下下面的例子。

interface Post {
    title:string
    content:string

}
function printPost(post:Post){
    console.log(post.title);
    console.log(post.content);
}
printPost({
    title:'Hello TypeScript',
    content:'Good job'
})

编译下以上代码，

"use strict";
function printPost(post) {
    console.log(post.title);
    console.log(post.content);
}
printPost({
    title: 'Hello TypeScript',
    content: 'Good job'
});

我们可以发现js文件中是没有关于接口的代码的，所以说 TypeScript接口只是用来为我们有结构的数据进行类型约束的。所以实际运行接口不会出现在js代码里。

可选成员，只读成员

举个例子

interface Post {
    title:string
    content:string
    subtitle?:string//副标题加个问号表示可有可无（Post.subtitle?: string | undefined）其实就是添加了undefined属性
    readonly summary: string//readonly表示在初始化过后就不能修改了
}
function printPost(post:Post){
    console.log(post.title);
    console.log(post.content);
}
printPost({
    title:'Hello TypeScript',
    content:'Good job',
    summary:'文章摘要'
})