小白学前端之TypeScript的接口和类

简介: 和 Java 一样,TypeScript 的接口也是用关键字 interface 来声明的

网络异常,图片无法展示
|


接口

和 Java 一样,TypeScript 的接口也是用关键字 interface 来声明的

interface IUser{
}

使用:

interface IUser{
    name:string
    age:number
    sayHi():void
}
var zhansan:IUser = {
    name: '张三',
    age: 20,
    sayHi(){
        console.log('我是',this.name,',今年',this.age,'岁')
    }
}
zhansan.sayHi()

接口继承

接口可以使用 extends 关键字继承其他接口。

interface IAction {
    run():void
}
interface IUser extends IAction {
    name:string
    age:number
    sayHi():void
}
var zhansan:IUser = {
    name: '张三',
    age: 20,
    sayHi(){
        console.log('我是',this.name,',今年',this.age,'岁')
    },
    run(){
        console.log('我会跑')
    }
}

类的结构

类用关键字 class 来定义一个类,类里面有字段、构造函数、方法等信息

class LiLei {
    public name:string;
    public constructor(name:string){
        this.name = name;
    }
    public hello(){
        console.log('你好!')
    }
}
// 使用
var lei = new LiLei('李雷')
lei.hello()

上面的代码中,变量字段和方法都用了 public 修饰符来修饰

在 TypeScript 中,可以用访问控制符来保护对类、变量、方法和构造方法的访问

  • public(默认) : 公有,可以在任何地方被访问。在使用中可以省略此字段
  • protected : 受保护,可以被其自身以及其子类和父类访问。
  • private : 私有,只能被其定义所在的类访问。

类的继承

extends 关键字来继承另外一个类,不支持同时继承多个类

class Papa {
}
class Son extends Papa{
}

静态方法

使用 static 关键字来声明类的静态方法或静态变量,静态方法或静态变量可以直接通过类名来访问

class Papa {
    static age:number = 30;
    static hello() {
        console.log('this is mama')
    }
}
// 不用实例化 直接访问
Papa.hello()
console.log(Papa.age)

类和接口

使用 implements 来实现接口,支持同时实现多个接口,实现多个接口时,接口直接用 , 符号隔开

interface IUser{
    name:string;
    sayHi():void;
}
class ZhangSan implements IUser{
    name:string;
    constructor(name:string){
        this.name = name;
    }
    sayHi(){
        console.log("你好,我叫",this.name)
    }
}
// 实例化
var zs = new ZhangSan("张三");
zs.sayHi()

实现多个接口

interface IUser{
}
interface IAction{
}
class ZhangSan implements IUser,IAction{ 
}

instanceof 运算符

如果要判断一个对象是否是由某个对象实例化而来的可以用 instanceof 关键字来判断

class ZhangSan{
}
var zs = new ZhangSan()
// 输出 true
console.log(zs instanceof ZhangSan)
目录
相关文章
|
4月前
|
JavaScript
typeScript基础(5)_对象的类型-interfaces接口
本文介绍了TypeScript中接口(interfaces)的基本概念和用法,包括如何定义接口、接口的简单使用、自定义属性、以及如何使用`readonly`关键字定义只读属性。接口在TypeScript中是定义对象形状的重要方式,可以规定对象的必有属性、可选属性、自定义属性和只读属性。
48 1
|
5月前
|
前端开发 JavaScript Java
【前端学java】Java中的接口和枚举概念(8)
【8月更文挑战第9天】Java中的接口和枚举概念(8)
55 4
|
18天前
|
前端开发 JavaScript 开发者
前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
|
2月前
|
JavaScript 前端开发 安全
2024年前端开发新趋势:TypeScript、Deno与性能优化
2024年前端开发迎来新趋势:TypeScript 5.0引入装饰器正式支持、const类型参数及枚举改进;Deno 1.42版推出JSR包注册表、增强Node.js兼容性并优化性能;性能优化策略涵盖代码分割、懒加载及现代构建工具的应用。这些变化推动前端开发向更高效率和安全性发展。
|
3月前
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
|
3月前
|
JavaScript 前端开发 Java
TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第10天】TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
3月前
|
JavaScript 前端开发
Vue2整合TypeScript:借助vue-property-decorator以类模式编写组件
Vue2整合TypeScript:借助vue-property-decorator以类模式编写组件
211 3
|
3月前
|
人工智能 前端开发 JavaScript
前端大模型入门(二):掌握langchain的核心Runnable接口
Langchain.js 是 Langchain 框架的 JavaScript 版本,专为前端和后端 JavaScript 环境设计。最新 v0.3 版本引入了强大的 Runnable 接口,支持灵活的执行方式和异步操作,方便与不同模型和逻辑集成。本文将详细介绍 Runnable 接口,并通过实现自定义 Runnable 来帮助前端人员快速上手。
|
3月前
|
JSON 缓存 前端开发
SpringBoot的 ResponseEntity类讲解(具体讲解返回给前端的一些事情)
本文讲解了SpringBoot中的`ResponseEntity`类,展示了如何使用它来自定义HTTP响应,包括状态码、响应头和响应体,以及如何将图片从MinIO读取并返回给前端。
167 3
|
4月前
|
数据采集 JavaScript 前端开发
使用 TypeScript 接口优化数据结构
使用 TypeScript 接口优化数据结构