TypeScript之初识interface

简介: TypeScript之初识interface

interface的作用

  1. 描述对象的形状
  2. 对类的一部分行为进行抽象

下面的文章主要围绕着上面的两部分进行讲解。

一、描述对象的形状

注意:下面的interface之间的元素是通过分号进行分割的。interface 后面跟的名字大小写都可以。

interface person {
    name: string;
    music: string;
}
let person: person = {
    name: 'justin',
    music: 'test'
}
复制代码
  • 通过interface定义的对象,属性的个数不可多页不可少,如果非要少的话,可以采取下面的这种形式。可选属性
interface person {
    name: string;
    music?: string;
}
let person: person = {
    name: 'justin',
}
复制代码
  • 通过interface定义的对象,如果想出现自由属性,可以通过下面的这种方式。
interface person {
    name: string;
    music?: string;
    [propName: string]: any;
}
let person: person = {
    name: 'justin',
    sex: 'fox'
}
复制代码
  • 通过readonly定义只读属性
interface person {
    readonly id: number;
    name: string;
    music?: string;
    [propName: string]: any;
}
let person: person = {
    id: 123456,
    name: 'justin',
    sex: 'fox'
}
person.id = 666;  // 此处会报错


相关文章
|
JavaScript 前端开发 索引
TypeScript(四)接口interface使用详解
接口是TypeScript中一个非常重要的概念,在其他很多语言中已经有了并且被大量使用。本来这个章节我打算更新其他的内容,但是发现很多东西都依赖接口,所以我们先来学习一下接口相关的知识吧!
578 0
|
6月前
|
JavaScript 索引 前端开发
9.【TypeScript 教程】接口(Interface)
9.【TypeScript 教程】接口(Interface)
64 4
|
6月前
|
JavaScript 安全 前端开发
TypeScript 基础学习笔记:interface 与 type 的异同
TypeScript 基础学习笔记:interface 与 type 的异同
70 0
|
7月前
|
JavaScript
Typescript中 interface 和 type 的区别是什么?
在 TypeScript 中,interface 和 type 都用于定义类型,但它们有一些区别。
208 0
|
JavaScript 索引
TypeScript--接口(interface)
TypeScript--接口(interface)
|
JavaScript
TypeScript 接口协议(interface)详细分析
TypeScript 接口协议(interface)详细分析
168 0
|
JavaScript
typescript(ts) interface 与 type 的异同
接口可以使用 extends 关键字来进行扩展(这个继承是包含关系,如果父级有了,子集不可以声明重复的,会报错的),或者是 implements来进行实现某个接口
typescript(ts) interface 与 type 的异同
|
JavaScript
Typescript的interface接口类型,类的继承,(private,protected,public三种访问类型)
Typescript的interface接口类型,类的继承,(private,protected,public三种访问类型)
|
JavaScript
手摸手一起学习Typescript第二天,interface接口和readonly属性
手摸手一起学习Typescript第二天,interface接口和readonly属性
|
JavaScript
学习TypeScript 之 interface 接口
学习TypeScript 之 interface 接口
128 0