小白学前端之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)
目录
相关文章
|
30天前
|
前端开发 JavaScript Java
【前端学java】Java中的接口和枚举概念(8)
【8月更文挑战第9天】Java中的接口和枚举概念(8)
36 4
|
21天前
|
JavaScript 前端开发 编译器
TypeScript:一场震撼前端开发的效率风暴!颠覆想象,带你领略前所未有的编码传奇!
【8月更文挑战第22天】TypeScript 凭借其强大的静态类型系统和丰富的工具支持,已成为前端开发的优选语言。它通过类型检查帮助开发者早期发现错误,显著提升了代码质量和维护性。例如,定义函数时明确参数类型,能在编译阶段捕获类型不匹配的问题。TypeScript 还提供自动补全功能,加快编码速度。与 Angular、React 和 Vue 等框架的无缝集成进一步提高了开发效率,使 TypeScript 成为现代前端开发中不可或缺的一部分。
26 1
|
29天前
|
前端开发 Java 编译器
【前端学java】java中的Object类和前端中的Object有什么区别(9)
【8月更文挑战第10天】java中的Object类和前端中的Object有什么区别
30 0
【前端学java】java中的Object类和前端中的Object有什么区别(9)
|
30天前
|
存储 前端开发 JavaScript
【前端学java】面向对象编程基础-类的使用(4)
【8月更文挑战第9天】面向对象编程基础-类的使用
10 0
【前端学java】面向对象编程基础-类的使用(4)
|
12天前
|
JavaScript 前端开发 安全
【技术革新】Vue.js + TypeScript:如何让前端开发既高效又安心?
【8月更文挑战第30天】在使用Vue.js构建前端应用时,结合TypeScript能显著提升代码质量和开发效率。TypeScript作为JavaScript的超集,通过添加静态类型检查帮助早期发现错误,减少运行时问题。本文通过具体案例展示如何在Vue.js项目中集成TypeScript,并利用其类型系统提升代码质量。首先,使用Vue CLI创建支持TypeScript的新项目,然后构建一个简单的待办事项应用,通过定义接口描述数据结构并在组件中使用类型注解,确保代码符合预期并提供更好的编辑器支持。
31 0
|
1月前
|
资源调度 JavaScript 前端开发
Vue3+TypeScript前端项目新纪元:揭秘高效事件总线Mitt,轻松驾驭组件间通信的艺术!
【8月更文挑战第3天】Vue3结合TypeScript强化了类型安全与组件化开发。面对大型应用中复杂的组件通信挑战,可通过引入轻量级事件发射器Mitt实现事件总线模式。Mitt易于集成,通过简单几步即可完成安装与配置:安装Mitt、创建事件总线实例、并在组件中使用`emit`与`on`方法发送及监听事件。此外,利用TypeScript的强大类型系统确保事件处理器正确无误。这种方式有助于保持代码整洁、解耦组件,同时提高应用的可维护性和扩展性。不过,在大规模项目中需谨慎使用,以防事件流过于复杂难以管理。
58 1
|
1月前
|
开发框架 JSON 缓存
基于SqlSugar的开发框架循序渐进介绍(22)-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理
基于SqlSugar的开发框架循序渐进介绍(22)-- Vue3+TypeScript的前端工作流模块中实现统一的表单编辑和表单详情查看处理
|
1月前
|
开发框架 前端开发 JavaScript
基于SqlSugar的开发框架循序渐进介绍(18)-- 基于代码生成工具Database2Sharp,快速生成Vue3+TypeScript的前端界面和Winform端界面
基于SqlSugar的开发框架循序渐进介绍(18)-- 基于代码生成工具Database2Sharp,快速生成Vue3+TypeScript的前端界面和Winform端界面
|
1月前
|
开发框架 前端开发 JavaScript
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
|
1月前
|
开发框架 前端开发 JavaScript
在Vue3+TypeScript 前端项目中使用事件总线Mitt
在Vue3+TypeScript 前端项目中使用事件总线Mitt