TypeScript -- interface 接口

了解接口 -- interface

typescript 复制代码
1. 使用在变量前声明'interface'
2. 简单案例:
声明一个interface,接口一般首字母大写:
interface Person {
  name: string;
  age: number;
}
然后就可以使用这个interface来限制一个对象的类型:
let tom: Person = {
  name: 'Tom',
  age: 12
}

3. 注意:不允许添加接口未定义的属性
  • 定义最基本的信息名字和性别,实现时必须按照这个规范来创建
typescript 复制代码
interface Baseinfo {
  name:string,
  sex:string
}

function pesonInfo(parmasinfo: Baseinfo) {
  console.log(`姓名:${parmasinfo.name }性别:${parmasinfo.sex}`)
}

let paramsinfo = {name:'Tom',age:12, sex:'男'} 
pesonInfo(paramsinfo) // 姓名:Tom性别:男

可选类型 -- 用'?'号修饰

复制代码
有时我们希望不要完全匹配一个接口,那么可以用可选属性,'TS' 提供了
一种'?' 来修饰,被问号修饰的参数就是可以选传,不是必须参数
typescript 复制代码
interface Baseinfo {
  name:string,
  sex?:string
}
function printPesonInfo(parmasinfo: Baseinfo) {
  console.log(`姓名:${parmasinfo.name }`)
}
let paramsinfo = {name:'Tom'} 
printPesonInfo(paramsinfo) // 姓名:Tom

索引签名 -- 任意属性

复制代码
1.刚才的'可选类型 '?'号修饰'让我们可以选填一些参数,那么如果需要增加一些不确定参数就
  需要使用 '索引签名'(任意属性)
2.需要注意的是:一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集
  • 案例一
typescript 复制代码
interface Baseinfo {
  name:string,
  sex?:string,
  [other:string]:any
}

function printPesonInfo(parmasinfo: Baseinfo) {
  console.log(`姓名:${parmasinfo.name }`)
}

// 接口中的索引签名other 就会收到age
printPesonInfo( {name:'Tom',age:13})
  • 案例二的错误示范
typescript 复制代码
// 错误示范
interface Person {
  name: string;
  age?: number;
  [propName: string]: string;
}

let tom: Person = {
  name: 'Tom',
  age: 25,
  gender: 'male'
};
// 任意属性的值允许是 string类型,但是可选属性 age 的值却是 number,
// number 不是 string 的子属性,所以报错了

限制接口中的参数是只读 -- readonly

复制代码
readonly 和 const 都是只读,但两者如何用区别在哪里,首先'readonly '是'TS' 在接口提出,
只针对接口中的参数赋值后就禁止更改,而const 是es6 提出的针对变量,不让变量进行更改
  • 简单例子
typescript 复制代码
interface Person{
  readonly x: number;
  readonly y: number;
}
// tom 是接口Person类型
let tom: Point = { x: 10, y: 20 };
tom.x = 5; // error! 已经设置了readonly 属性所以禁止更改

接口 数组 和只读

复制代码
我们还可以利用接口定义数组位置的类型,和元组不同,元组不仅限制了类型也
限制了最开始赋值时候的长度,所以元组可以利用在一些简单点的数组,对于一
些复杂的数组可以用接口定义相对灵活一些
  • 简单例子
typescript 复制代码
interface IArguments {
  [index: number]: any;
  length: number;
  callee: Function;
}

let args: IArguments = [{
  index: 1,
  length: 5,
  callee: function (){}
}]
  • 接口 数组,只读
typescript 复制代码
// 定义了一个数组接口,数组第一位必须数字并且只读,第二位是字符串
interface IArguments {
  readonly 0:number,
  1:string
}

let arr: IArguments = [1,"w"]
arr[0] = 5 // erro 只读类型禁止改变

接口定义函数

复制代码
接口不止能定义变量值也可以定义函数
typescript 复制代码
//  定义了一个信息接口,里面有姓名,年龄和一个吃的方法返回的类型是string类型
interface BaseInfo{
  name:string,
  age:number,
  eat(food: string):string
}
const personInfo:BaseInfo = {
  name:'wang',
  age:99,
  eat(parmas){
    return parmas
  }
}
  • 只定义 方法的接口

    对于函数类型的类型检查来说,函数的参数名不需要与接口里定义的名字相匹配
    函数的参数会逐个进行检查,要求对应位置上的参数类型是相同的

typescript 复制代码
interface SearchFunc {
  (source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
  let result = src.search(sub);
  return result > -1;
}
相关推荐
swipe13 小时前
从 0 到 1 实现大文件上传:分片、秒传、断点续传、暂停、重试与服务端合并
前端·javascript·面试
kyriewen15 小时前
AI 生成的代码能跑就行?这 5 个坑迟早炸
前端·javascript·ai编程
kisshyshy15 小时前
🍦 雪糕、食堂、火车厢:三幅漫画吃透栈、队列与链表
javascript·算法
胡志辉15 小时前
从v8源码和react深入浅出理解 JavaScript 作用域链与闭包
前端·javascript
Bolt16 小时前
TypeScript 7.0 来了:当 tsc 用 Go 重写之后
javascript·typescript·go
阳火锅17 小时前
😭测试小姐姐终于不骂我了!这个提BUG神器太香了...
前端·javascript·面试
林希_Rachel_傻希希19 小时前
js里面的proxy理解。以及vue3响应式数据设计底层
前端·javascript·面试
阿黎梨梨20 小时前
AI Loop:告别“人肉写提示词”,让代码替你“鞭策”AI
javascript·人工智能
竹林8181 天前
用 wagmi v2 + viem 监听链上事件,我踩了三天坑终于搞懂了实时日志与历史补全
javascript
只一1 天前
😭从回调地狱到 async/await:一文打通 Ajax 与 JS 异步编程
javascript