爆款云主机2核4G限时秒杀,88元/年起!
查看详情

活动

天翼云最新优惠活动,涵盖免费试用,产品折扣等,助您降本增效!
热门活动
  • 618智算钜惠季 爆款云主机2核4G限时秒杀,88元/年起!
  • 免费体验DeepSeek,上天翼云息壤 NEW 新老用户均可免费体验2500万Tokens,限时两周
  • 云上钜惠 HOT 爆款云主机全场特惠,更有万元锦鲤券等你来领!
  • 算力套餐 HOT 让算力触手可及
  • 天翼云脑AOne NEW 连接、保护、办公,All-in-One!
  • 中小企业应用上云专场 产品组合下单即享折上9折起,助力企业快速上云
  • 息壤高校钜惠活动 NEW 天翼云息壤杯高校AI大赛,数款产品享受线上订购超值特惠
  • 天翼云电脑专场 HOT 移动办公新选择,爆款4核8G畅享1年3.5折起,快来抢购!
  • 天翼云奖励推广计划 加入成为云推官,推荐新用户注册下单得现金奖励
免费活动
  • 免费试用中心 HOT 多款云产品免费试用,快来开启云上之旅
  • 天翼云用户体验官 NEW 您的洞察,重塑科技边界

智算服务

打造统一的产品能力,实现算网调度、训练推理、技术架构、资源管理一体化智算服务
智算云(DeepSeek专区)
科研助手
  • 算力商城
  • 应用商城
  • 开发机
  • 并行计算
算力互联调度平台
  • 应用市场
  • 算力市场
  • 算力调度推荐
一站式智算服务平台
  • 模型广场
  • 体验中心
  • 服务接入
智算一体机
  • 智算一体机
大模型
  • DeepSeek-R1-昇腾版(671B)
  • DeepSeek-R1-英伟达版(671B)
  • DeepSeek-V3-昇腾版(671B)
  • DeepSeek-R1-Distill-Llama-70B
  • DeepSeek-R1-Distill-Qwen-32B
  • Qwen2-72B-Instruct
  • StableDiffusion-V2.1
  • TeleChat-12B

应用商城

天翼云精选行业优秀合作伙伴及千余款商品,提供一站式云上应用服务
进入甄选商城进入云市场创新解决方案
办公协同
  • WPS云文档
  • 安全邮箱
  • EMM手机管家
  • 智能商业平台
财务管理
  • 工资条
  • 税务风控云
企业应用
  • 翼信息化运维服务
  • 翼视频云归档解决方案
工业能源
  • 智慧工厂_生产流程管理解决方案
  • 智慧工地
建站工具
  • SSL证书
  • 新域名服务
网络工具
  • 翼云加速
灾备迁移
  • 云管家2.0
  • 翼备份
资源管理
  • 全栈混合云敏捷版(软件)
  • 全栈混合云敏捷版(一体机)
行业应用
  • 翼电子教室
  • 翼智慧显示一体化解决方案

合作伙伴

天翼云携手合作伙伴,共创云上生态,合作共赢
天翼云生态合作中心
  • 天翼云生态合作中心
天翼云渠道合作伙伴
  • 天翼云代理渠道合作伙伴
天翼云服务合作伙伴
  • 天翼云集成商交付能力认证
天翼云应用合作伙伴
  • 天翼云云市场合作伙伴
  • 天翼云甄选商城合作伙伴
天翼云技术合作伙伴
  • 天翼云OpenAPI中心
  • 天翼云EasyCoding平台
天翼云培训认证
  • 天翼云学堂
  • 天翼云市场商学院
天翼云合作计划
  • 云汇计划
天翼云东升计划
  • 适配中心
  • 东升计划
  • 适配互认证

开发者

开发者相关功能入口汇聚
技术社区
  • 专栏文章
  • 互动问答
  • 技术视频
资源与工具
  • OpenAPI中心
开放能力
  • EasyCoding敏捷开发平台
培训与认证
  • 天翼云学堂
  • 天翼云认证
魔乐社区
  • 魔乐社区

支持与服务

为您提供全方位支持与服务,全流程技术保障,助您轻松上云,安全无忧
文档与工具
  • 文档中心
  • 新手上云
  • 自助服务
  • OpenAPI中心
定价
  • 价格计算器
  • 定价策略
基础服务
  • 售前咨询
  • 在线支持
  • 在线支持
  • 工单服务
  • 建议与反馈
  • 用户体验官
  • 服务保障
  • 客户公告
  • 会员中心
增值服务
  • 红心服务
  • 首保服务
  • 客户支持计划
  • 专家技术服务
  • 备案管家

了解天翼云

天翼云秉承央企使命,致力于成为数字经济主力军,投身科技强国伟大事业,为用户提供安全、普惠云服务
品牌介绍
  • 关于天翼云
  • 智算云
  • 天翼云4.0
  • 新闻资讯
  • 天翼云APP
基础设施
  • 全球基础设施
  • 信任中心
最佳实践
  • 精选案例
  • 超级探访
  • 云杂志
  • 分析师和白皮书
  • 天翼云·创新直播间
市场活动
  • 2025智能云生态大会
  • 2024智算云生态大会
  • 2023云生态大会
  • 2022云生态大会
  • 天翼云中国行
天翼云
  • 活动
  • 智算服务
  • 产品
  • 解决方案
  • 应用商城
  • 合作伙伴
  • 开发者
  • 支持与服务
  • 了解天翼云
      • 文档
      • 控制中心
      • 备案
      • 管理中心

      第二章:TypeScript面向对象

      首页 知识中心 其他 文章详情页

      第二章:TypeScript面向对象

      2023-06-20 09:12:44 阅读次数:439

      javascript,泛型

      面向对象是程序中一个非常重要的思想,它被很多同学理解成了一个比较难,比较深奥的问题,其实不然。面向对象很简单,简而言之就是程序之中所有的操作都需要通过对象来完成。

      • 举例来说:

        • 操作浏览器要使用window对象

        • 操作网页要使用document对象

        • 操作控制台要使用console对象

      一切操作都要通过对象,也就是所谓的面向对象,那么对象到底是什么呢?这就要先说到程序是什么,计算机程序的本质就是对现实事物的抽象,抽象的反义词是具体,比如:照片是对一个具体的人的抽象,汽车模型是对具体汽车的抽象等等。程序也是对事物的抽象,在程序中我们可以表示一个人、一条狗、一把枪、一颗子弹等等所有的事物。一个事物到了程序中就变成了一个对象。

      在程序中所有的对象都被分成了两个部分数据和功能,以人为例,人的姓名、性别、年龄、身高、体重等属于数据,人可以说话、走路、吃饭、睡觉这些属于人的功能。数据在对象中被成为属性,而功能就被称为方法。所以简而言之,在程序中一切皆是对象。

      1、类(class)

      要想面向对象,操作对象,首先便要拥有对象,那么下一个问题就是如何创建对象。要创建对象,必须要先定义类,所谓的类可以理解为对象的模型,程序中可以根据类创建指定类型的对象,举例来说:可以通过Person类来创建人的对象,通过Dog类创建狗的对象,通过Car类来创建汽车的对象,不同的类可以用来创建不同的对象。

      • 定义类:

        class 类名 {
            属性名: 类型;
            
            constructor(参数: 类型){
                this.属性名 = 参数;
            }
            
            方法名(){
                ....
            }
        ​
        }
      • 示例:

        class Person{
            name: string;
            age: number;
        ​
            constructor(name: string, age: number){
                this.name = name;
                this.age = age;
            }
        ​
            sayHello(){
                console.log(`大家好,我是${this.name}`);
            }
        }
      • 使用类:

        const p = new Person('孙悟空', 18);
        p.sayHello();

      2、面向对象的特点

      • 封装

        • 对象实质上就是属性和方法的容器,它的主要作用就是存储属性和方法,这就是所谓的封装

        • 默认情况下,对象的属性是可以任意的修改的,为了确保数据的安全性,在TS中可以对属性的权限进行设置

        • 只读属性(readonly):

          • 如果在声明属性时添加一个readonly,则属性便成了只读属性无法修改

        • TS中属性具有三种修饰符:

          • public(默认值),可以在类、子类和对象中修改

          • protected ,可以在类、子类中修改

          • private ,可以在类中修改

        • 示例:

          • public

            class Person{
                public name: string; // 写或什么都不写都是public
                public age: number;
            ​
                constructor(name: string, age: number){
                    this.name = name; // 可以在类中修改
                    this.age = age;
                }
            ​
                sayHello(){
                    console.log(`大家好,我是${this.name}`);
                }
            }
            ​
            class Employee extends Person{
                constructor(name: string, age: number){
                    super(name, age);
                    this.name = name; //子类中可以修改
                }
            }
            ​
            const p = new Person('孙悟空', 18);
            p.name = '猪八戒';// 可以通过对象修改
          • protected

            class Person{
                protected name: string;
                protected age: number;
            ​
                constructor(name: string, age: number){
                    this.name = name; // 可以修改
                    this.age = age;
                }
            ​
                sayHello(){
                    console.log(`大家好,我是${this.name}`);
                }
            }
            ​
            class Employee extends Person{
            ​
                constructor(name: string, age: number){
                    super(name, age);
                    this.name = name; //子类中可以修改
                }
            }
            ​
            const p = new Person('孙悟空', 18);
            p.name = '猪八戒';// 不能修改
          • private

            class Person{
                private name: string;
                private age: number;
            ​
                constructor(name: string, age: number){
                    this.name = name; // 可以修改
                    this.age = age;
                }
            ​
                sayHello(){
                    console.log(`大家好,我是${this.name}`);
                }
            }
            ​
            class Employee extends Person{
            ​
                constructor(name: string, age: number){
                    super(name, age);
                    this.name = name; //子类中不能修改
                }
            }
            ​
            const p = new Person('孙悟空', 18);
            p.name = '猪八戒';// 不能修改
        • 属性存取器

          • 对于一些不希望被任意修改的属性,可以将其设置为private

          • 直接将其设置为private将导致无法再通过对象修改其中的属性

          • 我们可以在类中定义一组读取、设置属性的方法,这种对属性读取或设置的属性被称为属性的存取器

          • 读取属性的方法叫做setter方法,设置属性的方法叫做getter方法

          • 示例:

            class Person{
                private _name: string;
            ​
                constructor(name: string){
                    this._name = name;
                }
            ​
                get name(){
                    return this._name;
                }
            ​
                set name(name: string){
                    this._name = name;
                }
            ​
            }
            ​
            const p1 = new Person('孙悟空');
            console.log(p1.name); // 通过getter读取name属性
            p1.name = '猪八戒'; // 通过setter修改name属性
        • 静态属性

          • 静态属性(方法),也称为类属性。使用静态属性无需创建实例,通过类即可直接使用

          • 静态属性(方法)使用static开头

          • 示例:

            class Tools{
                static PI = 3.1415926;
                
                static sum(num1: number, num2: number){
                    return num1 + num2
                }
            }
            ​
            console.log(Tools.PI);
            console.log(Tools.sum(123, 456));
        • this

          • 在类中,使用this表示当前对象

      • 继承

        • 继承时面向对象中的又一个特性

        • 通过继承可以将其他类中的属性和方法引入到当前类中

          • 示例:

            class Animal{
                name: string;
                age: number;
            ​
                constructor(name: string, age: number){
                    this.name = name;
                    this.age = age;
                }
            }
            ​
            class Dog extends Animal{
            ​
                bark(){
                    console.log(`${this.name}在汪汪叫!`);
                }
            }
            ​
            const dog = new Dog('旺财', 4);
            dog.bark();
        • 通过继承可以在不修改类的情况下完成对类的扩展

        • 重写

          • 发生继承时,如果子类中的方法会替换掉父类中的同名方法,这就称为方法的重写

          • 示例:

            class Animal{
                name: string;
                age: number;
            ​
                constructor(name: string, age: number){
                    this.name = name;
                    this.age = age;
                }
            ​
                run(){
                    console.log(`父类中的run方法!`);
                }
            }
            ​
            class Dog extends Animal{
            ​
                bark(){
                    console.log(`${this.name}在汪汪叫!`);
                }
            ​
                run(){
                    console.log(`子类中的run方法,会重写父类中的run方法!`);
                }
            }
            ​
            const dog = new Dog('旺财', 4);
            dog.bark();
            • 在子类中可以使用super来完成对父类的引用

        • 抽象类(abstract class)

          • 抽象类是专门用来被其他类所继承的类,它只能被其他类所继承不能用来创建实例

          • abstract class Animal{
                abstract run(): void;
                bark(){
                    console.log('动物在叫~');
                }
            }
            ​
            class Dog extends Animals{
                run(){
                    console.log('狗在跑~');
                }
            }
          • 使用abstract开头的方法叫做抽象方法,抽象方法没有方法体只能定义在抽象类中,继承抽象类时抽象方法必须要实现

      3、接口(Interface)

      接口的作用类似于抽象类,不同点在于接口中的所有方法和属性都是没有实值的,换句话说接口中的所有方法都是抽象方法。接口主要负责定义一个类的结构,接口可以去限制一个对象的接口,对象只有包含接口中定义的所有属性和方法时才能匹配接口。同时,可以让一个类去实现接口,实现接口时类中要保护接口中的所有属性。

      • 示例(检查对象类型):

        interface Person{
            name: string;
            sayHello():void;
        }
        ​
        function fn(per: Person){
            per.sayHello();
        }
        ​
        fn({name:'孙悟空', sayHello() {console.log(`Hello, 我是 ${this.name}`)}});
        ​
      • 示例(实现)

        interface Person{
            name: string;
            sayHello():void;
        }
        ​
        class Student implements Person{
            constructor(public name: string) {
            }
        ​
            sayHello() {
                console.log('大家好,我是'+this.name);
            }
        }

      4、泛型(Generic)

      定义一个函数或类时,有些情况下无法确定其中要使用的具体类型(返回值、参数、属性的类型不能确定),此时泛型便能够发挥作用。

      • 举个例子:

        • function test(arg: any): any{
              return arg;
          }
        • 上例中,test函数有一个参数类型不确定,但是能确定的时其返回值的类型和参数的类型是相同的,由于类型不确定所以参数和返回值均使用了any,但是很明显这样做是不合适的,首先使用any会关闭TS的类型检查,其次这样设置也不能体现出参数和返回值是相同的类型

        • 使用泛型:

        • function test<T>(arg: T): T{
              return arg;
          }
        • 这里的<T>就是泛型,T是我们给这个类型起的名字(不一定非叫T),设置泛型后即可在函数中使用T来表示该类型。所以泛型其实很好理解,就表示某个类型。

        • 那么如何使用上边的函数呢?

          • 方式一(直接使用):

            • test(10)
            • 使用时可以直接传递参数使用,类型会由TS自动推断出来,但有时编译器无法自动推断时还需要使用下面的方式

          • 方式二(指定类型):

            • test<number>(10)
            • 也可以在函数后手动指定泛型

        • 可以同时指定多个泛型,泛型间使用逗号隔开:

          • function test<T, K>(a: T, b: K): K{
                return b;
            }
            ​
            test<number, string>(10, "hello");
          • 使用泛型时,完全可以将泛型当成是一个普通的类去使用

        • 类中同样可以使用泛型:

          • class MyClass<T>{
                prop: T;
            ​
                constructor(prop: T){
                    this.prop = prop;
                }
            }
        • 除此之外,也可以对泛型的范围进行约束

          • interface MyInter{
                length: number;
            }
            ​
            function test<T extends MyInter>(arg: T): number{
                return arg.length;
            }
          • 使用T extends MyInter表示泛型T必须是MyInter的子类,不一定非要使用接口类和抽象类同样适用。

      版权声明:本文内容来自第三方投稿或授权转载,原文地址:https://liush.blog.csdn.net/article/details/127098128,作者:书启秋枫,版权归原作者所有。本网站转在其作品的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如因作品内容、版权等问题需要同本网站联系,请发邮件至ctyunbbs@chinatelecom.cn沟通。

      上一篇:Uncaught ReferenceError: $ is not defined之解决jquery引用不成功的办法

      下一篇:Jenkins的管理插件

      相关文章

      2025-05-14 10:33:16

      30天拿下Rust之泛型

      在Rust语言中,泛型是一种强大的工具,它允许我们编写可复用且灵活的代码。通过泛型,我们可以创建适用于多种类型的数据结构和函数,而无需为每种类型都重复编写相同的逻辑。在Rust中,泛型通过指定类型参数来实现,这些类型参数会在编译时被具体类型所替换。

      2025-05-14 10:33:16
      Rust , 参数 , 实例 , 泛型 , 示例 , 类型
      2025-04-22 09:40:08

      【ETL工具】kettle 程序报错 Javascript error: TypeError: Cannot call method “trim“ of null

      【ETL工具】kettle 程序报错 Javascript error: TypeError: Cannot call method “trim“ of null

      2025-04-22 09:40:08
      java , javascript , org
      2025-04-18 07:10:30

      详解Typescript中的泛型

      在 TypeScript 中,泛型(Generics)是一种在编写可重用、灵活的代码时使用的工具。它允许我们在定义函数、类或接口时使用类型参数,以便在使用时指定具体的类型。

      2025-04-18 07:10:30
      User , 参数 , 属性 , 接口 , 泛型 , 示例 , 类型
      2025-04-15 09:20:22

      初学Java,泛型类型通配符(三十七)

      初学Java,泛型类型通配符(三十七)

      2025-04-15 09:20:22
      List , String , 泛型 , 父类 , 类型 , 编译 , 通配符
      2025-04-14 08:45:36

      一段诡异的JavaScript代码,其实考察的是一些JavaScript的基础知识

      一段诡异的JavaScript代码,其实考察的是一些JavaScript的基础知识

      2025-04-14 08:45:36
      html , javascript
      2025-04-11 07:11:40

      java泛型学习篇(二)

      java泛型学习篇(二)

      2025-04-11 07:11:40
      使用 , 接口 , 方法 , 泛型 , 类型 , 自定义 , 默认
      2025-04-07 10:20:39

      从零开始手撸WebGL3D引擎11: PostProcessing框架(里程碑5了)

      从零开始手撸WebGL3D引擎11: PostProcessing框架(里程碑5了)

      2025-04-07 10:20:39
      javascript
      2025-04-01 09:21:49

      数据结构14-栈常见操作3

      数据结构14-栈常见操作3

      2025-04-01 09:21:49
      html , javascript , Stack , 前端
      2025-03-28 07:42:42

      Ts中的Pick,Omit,Extract和Exclude区别

      ts内置的一些常用工具类型,简化ts的操作。它们都是基于泛型实现的,并且内置的,可直接使用。

      2025-03-28 07:42:42
      属性 , 泛型 , 类型 , 返回
      2025-03-17 07:50:46

      Android 重新回顾经典异步类 AsyncTask

      Android 重新回顾经典异步类 AsyncTask

      2025-03-17 07:50:46
      参数 , 泛型
      查看更多
      推荐标签

      作者介绍

      天翼云小翼
      天翼云用户

      文章

      33561

      阅读量

      5227568

      查看更多

      最新文章

      30天拿下Rust之泛型

      2025-05-14 10:33:16

      Android 重新回顾经典异步类 AsyncTask

      2025-03-17 07:50:46

      javascript特效——页面不停闪烁

      2024-12-19 08:41:28

      泛型的深入研究——面试时说出能加分

      2024-12-02 08:39:33

      前端工作总结242-uni-提交成功加入表单验证

      2024-09-25 10:15:15

      vue课程72 侦听器-用法总结

      2024-09-25 10:13:57

      查看更多

      热门文章

      Jsp Ajax之模拟用户注册

      2022-11-17 12:37:24

      使用axios完成JS文件流式下载文件

      2023-07-26 07:51:41

      js: json的序列化和反序列化

      2023-02-20 10:30:04

      react18-学习笔记14-枚举(Enum)

      2023-03-16 07:13:43

      ajax2-ajax的post请求

      2023-05-15 10:01:00

      好客租房5-React脚手架的应用

      2023-03-13 09:31:59

      查看更多

      热门标签

      linux java python javascript 数组 前端 docker Linux vue 函数 shell git 节点 容器 示例
      查看更多

      相关产品

      弹性云主机

      随时自助获取、弹性伸缩的云服务器资源

      天翼云电脑(公众版)

      便捷、安全、高效的云电脑服务

      对象存储

      高品质、低成本的云上存储服务

      云硬盘

      为云上计算资源提供持久性块存储

      查看更多

      随机文章

      GridView中使用方向键标记选中行

      好客租房5-React脚手架的应用

      WPF和Silverlight到底有什麼不同?

      React学习-Redux

      ES6补充

      Moment.js 如何对时间进行比较获得不同的天数

      • 7*24小时售后
      • 无忧退款
      • 免费备案
      • 专家服务
      售前咨询热线
      400-810-9889转1
      关注天翼云
      • 旗舰店
      • 天翼云APP
      • 天翼云微信公众号
      服务与支持
      • 备案中心
      • 售前咨询
      • 智能客服
      • 自助服务
      • 工单管理
      • 客户公告
      • 涉诈举报
      账户管理
      • 管理中心
      • 订单管理
      • 余额管理
      • 发票管理
      • 充值汇款
      • 续费管理
      快速入口
      • 天翼云旗舰店
      • 文档中心
      • 最新活动
      • 免费试用
      • 信任中心
      • 天翼云学堂
      云网生态
      • 甄选商城
      • 渠道合作
      • 云市场合作
      了解天翼云
      • 关于天翼云
      • 天翼云APP
      • 服务案例
      • 新闻资讯
      • 联系我们
      热门产品
      • 云电脑
      • 弹性云主机
      • 云电脑政企版
      • 天翼云手机
      • 云数据库
      • 对象存储
      • 云硬盘
      • Web应用防火墙
      • 服务器安全卫士
      • CDN加速
      热门推荐
      • 云服务备份
      • 边缘安全加速平台
      • 全站加速
      • 安全加速
      • 云服务器
      • 云主机
      • 智能边缘云
      • 应用编排服务
      • 微服务引擎
      • 共享流量包
      更多推荐
      • web应用防火墙
      • 密钥管理
      • 等保咨询
      • 安全专区
      • 应用运维管理
      • 云日志服务
      • 文档数据库服务
      • 云搜索服务
      • 数据湖探索
      • 数据仓库服务
      友情链接
      • 中国电信集团
      • 189邮箱
      • 天翼企业云盘
      • 天翼云盘
      ©2025 天翼云科技有限公司版权所有 增值电信业务经营许可证A2.B1.B2-20090001
      公司地址:北京市东城区青龙胡同甲1号、3号2幢2层205-32室
      • 用户协议
      • 隐私政策
      • 个人信息保护
      • 法律声明
      备案 京公网安备11010802043424号 京ICP备 2021034386号