小白学前端之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 前端开发 编译器
Vue与TypeScript:如何实现更强大的前端开发
Vue.js 以其简洁的语法和灵活的架构在前端开发中广受欢迎,而 TypeScript 作为一种静态类型语言,为 JavaScript 提供了强大的类型系统和编译时检查。将 Vue.js 与 TypeScript 结合使用,不仅可以提升代码的可维护性和可扩展性,还能减少运行时错误,提高开发效率。本文将介绍如何在 Vue.js 项目中使用 TypeScript,并通过一些代码示例展示其强大功能。
200 22
|
12月前
|
JavaScript
typeScript基础(5)_对象的类型-interfaces接口
本文介绍了TypeScript中接口(interfaces)的基本概念和用法,包括如何定义接口、接口的简单使用、自定义属性、以及如何使用`readonly`关键字定义只读属性。接口在TypeScript中是定义对象形状的重要方式,可以规定对象的必有属性、可选属性、自定义属性和只读属性。
127 1
|
7月前
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
307 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
|
7月前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
308 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
9月前
|
前端开发 JavaScript 开发者
前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
前端项目代码规范工具 (ESLint. Prettier. Stylelint. TypeScript)
551 4
|
10月前
|
JavaScript 前端开发 安全
2024年前端开发新趋势:TypeScript、Deno与性能优化
2024年前端开发迎来新趋势:TypeScript 5.0引入装饰器正式支持、const类型参数及枚举改进;Deno 1.42版推出JSR包注册表、增强Node.js兼容性并优化性能;性能优化策略涵盖代码分割、懒加载及现代构建工具的应用。这些变化推动前端开发向更高效率和安全性发展。
|
12月前
|
JavaScript
typeScript进阶(13)_类与注意事项(八项特性)
TypeScript的类支持特性包括:构造函数、继承(使用`extends`)、公有/私有/受保护修饰符、只读修饰符、参数属性、存取器(getters/setters)、抽象类(用`abstract`声明)。类可用作类型。
98 1
typeScript进阶(13)_类与注意事项(八项特性)
|
11月前
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
216 3
|
11月前
|
JavaScript 前端开发 Java
TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第10天】TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
11月前
|
JavaScript 前端开发
Vue2整合TypeScript:借助vue-property-decorator以类模式编写组件
Vue2整合TypeScript:借助vue-property-decorator以类模式编写组件
541 3