TypeScript系列学习笔记-接口(interface)

接口简介:

原则:对值所具有的结构进行类型检查(核心原则之一)。 它有时被称做“鸭式辨型法”或“结构性子类型化;

作用:为这些类型命名和为你的代码或第三方代码定义契约。

语法:声明关键字,interface ,代码实例如下:声明一个接口 IPerson,定义属性字段:name,age和可选属性字段:sex,同时定义一个SayHi()方法,在定义一个Student类实现(关键字:implements)IPerson接口。

  

隐式接口:

//声明接口
interface Count{
    num1: number;
    num2: number;
}
function Add(para:Count) { 
    return para.num1 + para.num2;
}
//对比,para参数为接口类型(隐式接口)
function Add2(para:{
    num1: number;
    num2: number;
}) { 
    return para.num1 + para.num2;
}

当接口中只包含一个方法时,接口可以当作方法类型实现:

//接口声明
interface Count{
    (num1: number, num2: number): number; //匿名函数类型,形参number,返回值number
}
//接口实现
let add: Count = function (a,b) {
    return a + b;
}

使用<接口类型>{}隐式声明一个匿名对象实现接口:

//声明接口  
interface Count{  
    num1: number;  
    num2: number;  
} 
//隐式声明一个匿名对象,实现接口
let myCount = <Count>{};
myCount.num1 = 10;
myCount.num2 = 20;

接口支持多继承(关键字:extends),接口之间也可以相互继承,创建出多个接口的合成接口;

//声明接口
interface Shape {
    color: string;
}
//接口继承接口
interface Square extends Shape {
    sideLength: number;
}
//隐式匿名对象实现接口Square
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
//声明接口
interface Shape {
    color: string;
}
//声明接口
interface PenStroke {
    penWidth: number;
}
//声明接口,继承多个接口
interface Square extends Shape, PenStroke {
    sideLength: number;
}
//隐式匿名对象实现接口Square
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

混合类型一个对象可以同时做为函数和对象使用,并带有额外的属性。

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = <Counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

关于readonly vsconst:当声明变量为常量时使用 const,当声明只读属性时使用 readonly。

总结:

1.在接口中可以包含属性、方法;

2.使用关键字 interface 定义接口;

3.属性可以使用符号"?"标识为可空类型;

4.TS支持隐式接口;

5.接口支持多继承;

6.可以使用符号"<接口类型>{}"来隐式声明匿名对象实现接口;

### Typescript 学习资料与教程 #### 1. 类型系统与基本概念 TypeScript 的类型系统是其核心特性之一。在日常开发中,`number`、`string` 和 `boolean` 是常见的基础类型声明[^1]。这些类型通常以小写形式使用,而非大写的 `Number`、`String` 或 `Boolean`,后者主要用于创建包装对象,在实际开发中较少使用。 此外,TypeScript 支持类型兼容性。例如,`number` 类型可以作为 `number|string` 类型的子类型进行赋值操作[^2]。这种灵活性使得 TypeScript 在处理复杂数据结构时更加便捷。 #### 2. 接口与类型定义 接口Interface)是 TypeScript 中用于描述对象或函数结构的重要工具。通过接口,开发者可以为变量定义清晰的结构约束[^3]。例如: ```typescript interface ISumFunc { (x: number, y: number): number; } const sum: ISumFunc = (x, y) => { return x + y; }; ``` 需要注意的是,接口无法直接描述传统 `function` 关键字声明的函数类型,仍需使用传统方式定义。 #### 3. 类型推断 TypeScript 的类型推断功能能够自动识别变量的类型,减少显式类型声明的需求[^4]。例如: ```typescript let num = 2; // 类型推断为 number console.log("num 变量的值为 " + num); // 编译错误:类型不匹配 num = "12"; ``` 类型推断不仅提高了代码的简洁性,还能够在潜在错误发生前提供编译期检查。 #### 4. 面向对象编程与继承 TypeScript 支持面向对象编程的核心特性,如类(Class)、继承(Inheritance)和接口Interface)。通过继承,子类可以扩展父类的功能,同时也可以实现多态[^5]。例如: ```typescript class Door { open() { console.log("门已打开"); } } class SecurityDoor extends Door { alarm() { console.log("防盗门报警!"); } } ``` 此外,接口可以用来提取公共行为,使不同类之间共享相同的特性。例如: ```typescript interface Alarm { alarm(): void; } class Car implements Alarm { alarm() { console.log("汽车报警!"); } } ``` #### 5. 学习资源推荐 以下是几种常见的 TypeScript 学习资源: - **官方文档**:TypeScript 官方文档是最权威的学习资料,涵盖了从基础到高级的所有内容。 - **在线教程**:如 MDN Web Docs 和 TypeScript Handbook 提供了详细的讲解和示例。 - **视频课程**:平台如 Bilibili、YouTube 上有许多免费的 TypeScript 入门与进阶课程。 - **书籍**:《TypeScript Deep Dive》是一本经典的开源书籍,适合希望深入理解 TypeScript 的开发者。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ChaITSimpleLove

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值