前端 TS 快速入门之二:接口

1. 接口有什么用

通过 interface 定义接口。

检测对象的属性,不会去检查属性的顺序,只要相应的属性存在并且类型也是对的就可以。

javascript 复制代码
interface IPerson {
  name: string;
  age: number;
}
function say(person: IPerson): void {
  console.log(`my name is ${person.name}, and age is ${person.age}`);
}
let me = {
  name: "funlee",
  age: 18,
};
say(me); // my name is funlee, and age is 18

2. 可选属性

属性后面加一个 ? 符号,表示该属性可选。

javascript 复制代码
interface IPerson {
  name: string;
  age: number;
  // love 可选
  love?: string;
}

3. 只读属性

属性名前加 readonly,表示该属性只读。

javascript 复制代码
interface IPerson {
  // name 只读
  readonly name: string;
  age: number;
  love?: string;
}
let me: IPerson = {
  name: "funlee",
  age: 18,
};
// name 不允许被赋值
me.name = "new name"; // error!

4. 函数接口

接口可以描述函数类型,它定义了函数的参数列表和返回值类型,参数列表里的每个参数都需要名字和类型,函数的参数名不需要与接口里定义的名字相匹配,只需要类型兼容就可以了。

javascript 复制代码
interface GetArea {
  (width: number, height: number): number;
}
let getArea: GetArea = function (w: number, h: number) {
  return w * h;
};
getArea(5, 6); // 30

5. 继承接口

一个接口可以继承多个接口,创建出多个接口的合成接口,如:

javascript 复制代码
interface Shape {
  color: string;
}
interface PenStroke {
  penWidth: number;
}
interface Square extends Shape, PenStroke {
  sideLength;
}
const square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

6. 混合类型

让对象同时作为函数和对象使用,并带有额外的属性,如:

javascript 复制代码
interface MixedDemo {
  (str: string): void;
  defaultStr: string;
}

function foo(): MixedDemo {
  let x = <MixedDemo>function (str: string) {
    console.log(str);
  };
  x.defaultStr = "Hello, world";
  return x;
}

let c = foo();
c("This is a function"); // 'This is a function'
c.defaultStr; // 'Hello, world'
相关推荐
你的人类朋友3 小时前
【Node】Node.js 多进程与多线程:Cluster 与 Worker Threads 入门
前端·后端·node.js
闲人编程3 小时前
使用Celery处理Python Web应用中的异步任务
开发语言·前端·python·web·异步·celery
excel3 小时前
前端读取文件夹并通过 SSH 上传:完整实现方案 ✅
前端
谢尔登3 小时前
【Nest】日志记录
javascript·中间件·node.js
双向334 小时前
【征文计划】基于Rokid CXR-M SDK 打造AI 实时会议助手:从连接到自定义界面的完整实践
前端
Lei活在当下4 小时前
【业务场景架构实战】6. 从业务痛点到通用能力:Android 优先级分页加载器设计
前端·后端·架构
你的人类朋友4 小时前
什么是基础设施中间件
前端·后端
知识分享小能手4 小时前
微信小程序入门学习教程,从入门到精通,WXML(WeiXin Markup Language)语法基础(8)
前端·学习·react.js·微信小程序·小程序·vue·个人开发
海绵宝龙5 小时前
将若依(RuoYi)项目创建为私有Gitee仓库的完整步骤
前端·gitee
Andytoms5 小时前
Android geckoview 集成,JS交互,官方demo
android·javascript·交互