小白学前端之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)
相关文章
|
5天前
|
JavaScript 编译器
TypeScript中泛型在函数和类中的应用
【4月更文挑战第23天】TypeScript的泛型在函数和类中提供了灵活性,允许处理多种数据类型。了解泛型是掌握TypeScript类型系统的关键。
|
3天前
|
JavaScript 前端开发 IDE
TypeScript在前端项目的渐进式采用策略
该文介绍了渐进式采用TypeScript在前端项目中的策略。首先,通过将JS文件扩展名改为TS并添加类型注解,如在`utils.js`中添加类型。接着,配置`tsconfig.json`,包括目标版本、模块系统、输出目录等。高级配置涉及路径别名、JSON导入、库文件等。然后,集成TypeScript到构建流程,如Webpack,安装`ts-loader`并调整配置。利用类型定义,包括安装第三方库的类型定义包,自定义类型定义或使用社区定义。最后,逐步迁移其他模块至TypeScript,强化类型检查,并确保IDE支持。
5 0
|
3天前
|
前端开发 JavaScript
前端 TS 快速入门之三:class 类
前端 TS 快速入门之三:class 类
6 1
|
3天前
|
前端开发
前端 TS 快速入门之二:接口
前端 TS 快速入门之二:接口
6 0
|
3天前
|
前端开发 JavaScript
前端 js 经典:class 类
前端 js 经典:class 类
7 2
|
4天前
|
JavaScript 前端开发 IDE
TypeScript:前端世界的“甜蜜烦恼”——究竟该不该用?
TypeScript:前端世界的“甜蜜烦恼”——究竟该不该用?
|
5天前
|
前端开发 小程序 测试技术
前端后端测试接口mork神器,Apifox使用一分钟入门
前端后端测试接口mork神器,Apifox使用一分钟入门
13 0
|
5天前
|
JavaScript 前端开发 开发者
【Web 前端】TypeScript 中的接口是什么?
【5月更文挑战第1天】【Web 前端】TypeScript 中的接口是什么?
|
5天前
|
JavaScript 前端开发 开发者
【Web 前端】TypeScript 的内置数据类型有哪些?
【5月更文挑战第1天】【Web 前端】TypeScript 的内置数据类型有哪些?
|
5天前
|
JavaScript 前端开发 安全
【Web 前端】使用 TypeScript 有什么好处?
【5月更文挑战第1天】【Web 前端】使用 TypeScript 有什么好处?