TypeScript入门-接口_网络技术_宿州市腾雀网络科技有限公司

TypeScript入门-接口

发布时间 - 2026-01-11 00:26:06 点击率：次

大致介绍

在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

接口

例子：

  function printLabel(labelledObj: { label: string }) {
   console.log(labelledObj.label);
  }
  let myObj = { size: 10, label: "Size 10 Object" };
  printLabel(myObj);

printLabel函数有一个参数，要求这个参数是个对象，并且有一个属性名为label的类型为string的属性

有时我们会传入多个参数，但是只检测指定的参数有没有

用接口来实现上面的例子：

interface LabelledValue {
   label: string;
  }
  function printLabel(labelledObj: LabelledValue) {
   console.log(labelledObj.label);
  }
  let myObj = {size: 10, label: "Size 10 Object"};
  printLabel(myObj);

注意：要用到关键字 interface

可选属性

有时接口里的属性不是必须的是可选的，那么只要加个？就可以了

interface SquareConfig {
   color?: string;
   width?: number;
  }
  function createSquare(config: SquareConfig): {color: string; area: number} {
   let newSquare = {color: "white", area: 100};
   if (config.color) {
    newSquare.color = config.color;
   }
   if (config.width) {
    newSquare.area = config.width * config.width;
   }
   return newSquare;
  }
  let mySquare = createSquare({color: "black"});

上面的代码中 config:SquareConfig规定了函数参数， {color: string;area: numner}规定了函数返回值的类型

使用可选属性的好处：

1、可以对可能存在的属性进行定义

2、可以捕获访问不存在的属性时的错误

只读属性

如果向让一个值只读，不可以修改就可以使用readonly

interface Point {
    readonly x: number;
    readonly y: number;
  }
  let p1: Point = { x: 10, y: 20 };
  p1.x = 5; // error!

TypeScript具有ReadonlyArray<number>类型，它与Array<T>相似，只是把怕有可变方法去掉了，因此可以确保数组创建后再也不能被修改：

  let a: number[] = [1, 2, 3, 4];
  let ro: ReadonlyArray<number> = a;
  ro[0] = 12; // error!
  ro.push(5); // error!
  ro.length = 100; // error!
  a = ro; // error!

额外的属性检查

看一个例子：

interface SquareConfig {
    color?: string;
    width?: number;
  }
  function createSquare(config: SquareConfig): { color: string; area: number } {
    // ...
  }
  let mySquare = createSquare({ colour: "red", width: 100 });

起初会认为这个是对的，接口定义了两个可选属性color和width。函数实际传入了width属性和一个接口没有定义的colour属性，但是这段代码会报错。

对象字面量会被特殊对待而且会经过额外属性检查，当将它们赋值给变量或作为参数传递的时候。如果一个对象字面量存在任何“目标类型”不包含的属性时，你会得到一个错误。

最好的解决办法就是添加一个字符串索引签名

  interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: any;
  }

函数类型

例子：

interface SearchFunc {
   (source: string, subString: string): boolean;
  }
  let mySearch: SearchFunc;
  mySearch = function(src, sub) {
    let result = src.search(sub);
    if (result == -1) {
      return false;
    }
    else {
      return true;
    }
  }

可索引的类型

可索引类型比如a[10]或obj['a']。可索引类型具有一个索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。

interface StringArray {
   [index: number]: string;
  }
  let myArray: StringArray;
  myArray = ["Bob", "Fred"];
  let myStr: string = myArray[0];

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# typescript # 接口 # TypeScript 接口继承的具体使用 # TypeScript中的接口和泛型你了解吗 # typeScript 核心基础之接口interface # typeScript 泛型使用和泛型接口结合 # TypeScript接口介绍 # 基于Typescript与Axios的接口请求管理详解 # TypeScript定义接口(interface)案例教程 # TypeScript 中接口详解 # TypeScript接口使用介绍 # 可选 # 就可以 # 有一个 # 返回值 # 的是 # 是个 # 最好的 # 多个 # 你会 # 规定了 # 不可以 # 这段 # 要用 # 不存在 # 掉了 # 报错 # 第三方 # 来实现 # 以对 # 解决办法

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：搜狗搜索怎么查看搜索历史记录_搜狗搜索历史查询与管理方法【说

下一篇：Linux监控怎么实现_Linux系统监控工具与方法汇总

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：搜狗搜索怎么查看搜索历史记录_搜狗搜索历史查询与管理方法【说

下一篇：Linux监控怎么实现_Linux系统监控工具与方法汇总