TypeScript学习(四):面向对象之类,接口,泛型,命名空间,模块

javascript其实也可以定义类,只是typescript封装以后,变得更像面向对象语言了,几乎和c#,java语法一致。

//一切皆对象,类是对象的抽象描述,对象是类的实例

//类,接口,继承,泛型

//避免重复定义的错误,外部定义一个立即执行的函数(function(){})()来包装一下,测试用

(function(){

    //1.Person类,定义类和java,c#语言类似

    class Person{

        /**

         * 定义属性_name,_age

         * private表示只能在当前类内部方法,

         * 默认是public,子类和其他类内部都能访问

         * protected,当前类及子类能访问

         *

         *

         * */

        private _name:string;

        private _age:number;

        //构造函数,this表示当前new出来的对象

        constructor(name:string,age:number)

        {

            this._name=name;

            this._age=age;

        }

        //给name属性赋值,调用的时候直接p.name

        set name(name:string)

        {

            this._name=name;

        }

        //获取name属性,调用的时候直接p.name

        get name()

        {

            return this._name;

        }

        set age(age:number)

        {

            this._age=age;

        }

        get age()

        {

            return this._age;

        }

    }

    //2.类定义的简写方式,等同上面的Person类定义

    console.log("-------简写方式测试,加上public直接将属性定义在构造函数中,表示外部可以访问,不加默认private外部不能访问------");

    class NewPerson{

        constructor(public name:string,age:number){

        }

    }

    const np=new NewPerson("andy",19);

    console.log(np);

    console.log(np.name);

    //console.log(np.age);//age不是public无法访问

    //3.定义动作接口

    interface Action{

        actionName:string;

        run():void;

        read(book:string):void;

        exam(subject:string):number;

    }

   

    //4.Student继承Person类,实现接口Action

    class Student  extends Person  implements Action{

        //定义属性

        private _studentNo:string;

        private _className:string;

        //定义构造函数

        constructor(name:string,age:number,studentNo:string,className:string)

        {

            //必须调用父类的构造函数

            super(name,age);

            this._studentNo=studentNo;

            this._className=className;

        }

        //给接口属性赋值

        actionName: string="做一些动作";

       

        //必须实现接口的3个方法

        run(): void {

            console.log("我在跑步");

        }

        read(book: string): void {

            console.log("我在读书,书名是:"+book);

        }

        exam(subject: string): number {

            console.log("我在参加"+subject+"考试,考了100分");

            return 100;

        }

         //调用的时候直接p.studentNo

         set studentNo(studentNo:string)

         {

             this._studentNo=studentNo;

         }

         //调用的时候直接p.studentNo

         get studentNo()

         {

             return this._studentNo;

         }

         set className(className:string)

         {

             this._className=className;

         }

         get className()

         {

             return this._className;

         }

    }

    //5.const一般用来声明变量,readonly用来修饰类或者接口的属性,表示初始化之后不能被修改

    const p=new Person("jack",10);

    console.log(p);

    //属性默认是public加上private 就不能直接访问_name,_age,需要通过方法来访问

    p.name="mary";

    p.age=8;

    console.log(p);



 

    let s=new Student("sam",18,"000000002","三一班");

    console.log(s);

    s.run();

    s.read("钢铁是怎样炼成的");

    s.exam("数学");


 

    //6.定义泛型T,泛型的意思是类型不确定,调用是可以根据需要来传递类型

    function test1<T>(p1:T):T{

        return p1;

    }

    //定义泛型T,K

    function test2<T,K>(p1:T,p2:K):T{

        return p1;

    }

    //不指定类型

    console.log(test1(100));

    //指定类型

    console.log(test1<string>("hello,world!"));

})();

//7.和java,c#一样,ts也有命名空间,命名空间可以解决类型重名问题,另外也便于代码的组织

//通过SomeNameSpaceName.SomeClassName;访问命名空间下面的类

//如果一个命名空间在一个单独的 TypeScript 文件中,则应使用三斜杠 /// 引用它,语法格式如下:

/// <reference path = "SomeFileName.ts" />

//定义了Drawing名称空间下的IShape接口,该接口含一个方法draw,定义为IShape.ts文件

//export之后,外部才能使用

namespace Drawing {

    export interface IShape {

        draw():void;

    }

}

// 外部通过reference引用

//定义了Drawing名称空间下的类Circle继承IShape接口,定义为Circle.ts文件

///<reference path = "IShape.ts" />

namespace Drawing {

    export class Circle implements IShape {

        public draw() {

            console.log("Circle is drawn");

        }  

    }

}

//外部通过reference引用 <reference path = "IShape.ts" />

//定义了Drawing名称空间下的类Triangle继承IShape接口,定义为Triangle.ts文件

///<reference path = "IShape.ts" />

namespace Drawing {

    export class Triangle implements IShape {

        public draw() {

            console.log("Triangle is drawn");

        }

    }

}

//绘画方法,参数为Drawing.IShape接口

/// <reference path = "IShape.ts" />  

/// <reference path = "Circle.ts" />

/// <reference path = "Triangle.ts" />  

function drawAllShapes(shape:Drawing.IShape) {

    shape.draw();

}

drawAllShapes(new Drawing.Circle());

drawAllShapes(new Drawing.Triangle());

//8.模块

命名空间是为了解决,类重名问题,模块就是假设新建了一个ts文件,那其他ts怎么引用这个ts文件里面定义的方法呢?

通过export导出当前ts接口或者类和import来引用外部接口或者类

// 文件名 : SomeInterface.ts 
export interface SomeInterface { 
   // 代码部分
}

要在另外一个文件使用该模块就需要使用 import 关键字来导入:

import someInterfaceRef = require("./SomeInterface");

假设定义了一个形状的接口,圆形类继承了这个接口, 另外一个类里面又使用圆形这个类。那么这么写。

IShape.ts文件:

export interface IShape {

    draw():void;

 }

Circle.ts文件:

//引入IShape.ts

import shape = require("./IShape");

export class Circle implements shape.IShape {

   public draw() {

      console.log("Cirlce is drawn (external module)");

   }

}

TestShape.ts文件:

//引入需要的文件

import shape = require("./IShape");

import circle = require("./Circle");

function drawAllShapes(shapeToDraw: shape.IShape) {

   shapeToDraw.draw();

}

drawAllShapes(new circle.Circle());

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/24401.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Java笔记】第10章:接口

前言1. 接口的概念与定义2. 接口的声明与语法3. 接口的实现4. 接口的继承5. 接口的默认方法6. 接口的静态方法7. 接口的私有方法8. 接口的作用9. 接口与抽象类的区别10. 接口在Java集合中的应用结语 上期回顾:【Java笔记】第9章&#xff1a;三个修饰符 个人主页&#xff1a;C_G…

contenteditable实现插入标签的输入框功能(Vue3版)

需求&#xff1a;实现一个简易的函数编辑器 点击参数能够往输入框插入标签点击函数能够往输入框插入文本删除能够把标签整体删除输入的参数能够获取到其携带的信息 插入文本 /*** description 点击函数展示到输入框*/ const getValue ({ item, type }: any) > {// 创建…

Apache Doris 基础 -- 数据表设计(使用AUTO_INCREMENT)

导入数据时&#xff0c;Doris将表唯一值分配给自动递增列中没有指定值的行。 1、功能 对于包含自动递增列的表&#xff0c;在数据导入期间: 如果目标列不包括自动递增列&#xff0c;Doris将用生成的值填充自动递增列。如果目标列包括自动递增列&#xff0c;则为该列导入的数…

【echarts】如何制作,横坐标每个日期点如何对应一条竖线的图,以及 markline设置后不生效问题

图的样式如下&#xff1a; 在线演示 每一个日期&#xff0c;对应一条竖线展示。 echarts配置内容&#xff1a; 在线演示 option {xAxis: {type: category,data: [20240601, 20240602, 20240603, 20240604, 20240605, 20240606, 20240607] // X轴数据},yAxis: {type: valu…

HTML label 标签的作用和应用场景

label 标签 作用和语法 label 标签来定义表单控制间的关系&#xff0c;当用户点击该标签时&#xff0c;浏览器会自动将焦点转到和标签相关的表单控件上。 <label for"Name">Number:</label> <input type“text“ name"Name" id"Name…

【leetcode--判断子序列】

写了一版&#xff0c;发现这个记录的顺序不对&#xff0c;又去调试才看出来的&#xff0c;逻辑写错了&#xff0c;最近脑子真的不转。。。 class Solution:def isSubsequence(self, s: str, t: str) -> bool:r []for i in range(len(s)):if s[i] not in t:return Falseels…

Linux学习—Linux安全与防火墙

Linux安全基础 用户账户安全 强密码策略&#xff1a;确保所有用户使用强密码。最小权限原则&#xff1a;仅授予用户完成任务所需的最小权限。 定期更新系统 软件包更新&#xff1a;定期使用包管理器更新系统软件包&#xff0c;以修复安全漏洞。 sudo apt update &&…

MTK联发科MT6897(天玑8300)5G智能移动处理器规格参数

天玑 8300 采用台积电第二代 4nm 制程&#xff0c;基于 Armv9 CPU 架构&#xff0c;八核 CPU 包含 4 个 Cortex-A715 性能核心和 4 个 Cortex-A510 能效核心&#xff0c;CPU 峰值性能较上一代提升 20%&#xff0c;功耗节省 30%。 此外&#xff0c;天玑 8300 搭载 6 核 GPU Mal…

从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战七(axios请求头带上token)

本系列项目教程最终演示效果如下&#xff1a; 管理后台在线演示 上节遗留问题 上一节我们看到&#xff0c;页面刷新时&#xff0c;store中的数据丢失。表现在页面上是只要我们刷新页面&#xff0c;当前登录的用户名就丢失。这对使用系统的用户不是十分友好。另外&#xff0c…

uniapp原生插件开发实战——集成Android端的Twitter登陆

Android集成Twitter登陆的官方教程:https://github.com/twitter-archive/twitter-kit-android/wiki 项目创建 首先可以先看下uniapp原生插件开发教程 uniapp原生插件类型分为两种: Module模式:能力扩展,无嵌入窗体的UI控件,类似于功能插件。Component模式:在窗体中内嵌…

自然语言处理:第三十三章FILCO:过滤内容的RAG

文章链接: [2311.08377] Learning to Filter Context for Retrieval-Augmented Generation (arxiv.org) 项目地址: zorazrw/filco: [Preprint] Learning to Filter Context for Retrieval-Augmented Generaton (github.com) 在人工智能领域&#xff0c;尤其是在开放域问答和事…

Go微服务: 关于TCC分布式事务

TCC 分布式事务 T: Try 预处理, 尝试执行&#xff0c;完成所有的业务检查&#xff0c;做好一致性&#xff0c;预留必要的业务资源&#xff0c;做好准隔离性C: Confirm 确认&#xff0c;如果所有的分支Try都成功了, 就到了这个阶段, Confirm 是真正执行业务的过程, 不做任何业务…

【多模态】37、TextSquare | 借助 Gemini-Pro 通过四个步骤来生成高质量的文本问答数据

文章目录 一、背景二、方法2.1 Square-10M2.2 模型结构2.3 使用 Square-10M 进行有监督微调 三、效果3.1 实验设置3.2 Benchmark 测评 论文&#xff1a;TextSquare: Scaling up Text-Centric Visual Instruction Tuning 代码&#xff1a;暂无 出处&#xff1a;字节 | 华中科技…

linux 服务器上离线安装 node nvm

因为是离线环境 如果你是可以访问外网的 下面内容仅供参考 也可以继续按步骤来 node 安装路径 Node.js — Download Node.js nvm 安装路径 Tags nvm-sh/nvm GitHub 后来发现 nvm安装后 nvm use 版本号 报错 让我去nvm install 版本 我是内网环境 install不了 下面 你要 把安…

玄机平台应急响应—apache日志分析

1、前言 apache的日志一共有两个&#xff0c;一个是access.log&#xff0c;这个日志记录了所有对Web服务器的访问&#xff0c;被入侵时重点排查这个。另一个是error.log&#xff0c;错误日志记录了服务器运行期间遇到的各种错误&#xff0c;以及一些普通的诊断信息&#xff0c…

【Python】推荐比print更好用的调试方法

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

【Vue】作用域插槽

插槽分类 默认插槽&#xff1a;组件内定制一处结构 具名插槽&#xff1a;组件内定制多处结构 插槽只有两种&#xff0c;作用域插槽不属于插槽的一种分类。作用域插槽只是插槽的一个传参语法 作用&#xff1a; 定义slot 插槽的同时, 是可以传值的。给 插槽 上可以 绑定数据&a…

LeetCode 算法:滑动窗口最大值c++

原题链接&#x1f517;&#xff1a;滑动窗口最大值 难度&#xff1a;困难⭐️⭐️⭐️ 题目 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动…

Python 树状数组

树状数组&#xff08;Binary Indexed Tree, BIT&#xff09;&#xff0c;又称为斐波那契堆&#xff0c;是一种数据结构&#xff0c;用于高效地解决以下问题&#xff1a; 单点更新&#xff1a;在数组的某个位置增加或减少一个值。区间查询&#xff1a;查询数组中一段连续区间的…

Skins

本主题解释如何将DevExpress主题/皮肤应用到应用程序中&#xff0c;如何允许用户在运行时在主题之间切换&#xff0c;如何自定义现有皮肤或创建自己的皮肤&#xff0c;等等。 WinForms订阅包括许多基本控件&#xff1a;按钮、复选框、表单、消息框、对话框、对话框等。 我们实现…