typescript基础知识(三)类

【TypeScript系列】类 TypeScript-类 阅读详情

类的定义


在typescript中类的使用和ES6中类的使用很类似,但是属性,方法中的参数和返回值需要明确类型

class Person{
    constructor(name:string){
        this.name=name;
    }
    name:string;
    getName():string{
        return this.name;
    }
    setName(name:string):void{
        this.name=name;
    }
}

let person=new Person('小明');

console.log(person.getName()); // 小明

类的继承


在typescript中类的继承和ES6中的class继承是相似的,都通过extends关键字来实现继承

class Person{
    name:String;
    constructor(name:String){
        this.name=name;
    }
    introduce():void{
        console.log(`I am ${this.name}`);
    }
}

class Student extends Person{}

var p=new Person('小明');
p.introduce(); // I am 小明

使用一个类继承另一个类时,如果没有写构造方法,会默认生成一个调用父类构造方法的构造方法,像上面的代码,其实Student类是这样的

class Student extends Person{
    constructor(name:string){
        super(name);
    }
}

super是用于调用父类的,这点和ES6中是一样的。

类的修饰符


typescript中有修饰符来限定属性/方法的访问权限,修饰符分别为public,protected,private,跟Java的修饰符类似

public

使用public做修饰符时,该属性/方法可以被类内部,子类,和类外部调用

class Person{
    public name:String;
    constructor(name:String){
        this.name=name;
    }
    introduce():void{
        console.log(`I am ${this.name}`);
    }
}

class Student extends Person{
    constructor(name:string){
        super(name);
    }
    say():void{
        console.log(`${this.name} say hello`);
    }
}

var p=new Person('小明');
p.introduce(); // 类的内部调用

var s=new Student('小红'); 
s.say(); // 子类中调用

console.log(p.name);// 类的外部调用

protected

使用protected做修饰符时,该属性/方法可以被类的内部,子类调用,不能被类外部调用

class Person{
    protected name:String;
    constructor(name:String){
        this.name=name;
    }
    introduce():void{
        console.log(`I am ${this.name}`);
    }
}

class Student extends Person{
    constructor(name:string){
        super(name);
    }
    say():void{
        console.log(`${this.name} say hello`);
    }
}

var p=new Person('小明');
p.introduce(); // 类的内部调用

var s=new Student('小红'); 
s.say(); // 子类中调用

console.log(p.name);// 类的外部调用 报错!!!!!

private

class Person{
    private name:String;
    constructor(name:String){
        this.name=name;
    }
    introduce():void{
        console.log(`I am ${this.name}`);
    }
}

class Student extends Person{
    constructor(name:string){
        super(name);
    }
    say():void{
        console.log(`${this.name} say hello`); // 报错!!!!!!
    }
}

var p=new Person('小明');
p.introduce(); // 类的内部调用

var s=new Student('小红'); 
s.say(); // 子类中调用  报错!!!!!!

console.log(p.name);// 类的外部调用  报错!!!!!!

静态方法/属性


typescript中的静态方法和静态属性的使用和ES6中是一样的,都是通过在前面加static关键字来实现的,静态方法是通过类本身来调用的,而实例方法是通过实例对象来调用的

class Person{
    name:string;
    constructor(name:string){
        this.name=name;
    }
    introduce():void{
        console.log(`I am ${this.name}`);
    }
    static sta():void{
        console.log('static');
    }
}

let p= new Person('小明');
p.introduce();
Person.sta();

要注意的是,静态方法不能调用非静态属性/方法,否则会报错

class Person{
    name:string;
    static age:number=20;
    constructor(name:string){
        this.name=name;
    }
    introduce():void{
        console.log(`I am ${this.name}`);
    }
    //static getAge():void{
    //    console.log(`${this.name} is ${this.age} years old`); //会报错,因为调用了实例属性name
    //}
    static getAge():void{
        console.log(`I am ${this.age} years old`);
    }
}

let p= new Person('小明');
p.introduce();
Person.getAge();

抽象类/方法


抽象方法是用于定义类的名字类型而不写出方法体,在其所在类的子类中写出方法体的方法,而只有抽象类中能有抽象方法,抽象类中可以有一般方法,这和Java是一样的。

abstract class Person{
    abstract work():void;
}

class Student extends Person{
    work():void{
        console.log('读书');
    }
}

class Teacher extends Person{
    work():void{
        console.log('教书');
    }
}

let s=new Student();
s.work();

let t=new Teacher();
t.work();

要注意的是,抽象类是不能构建实例的,即使有构造方法也不行,抽象类的子类必须实现抽象类中所有的抽象方法

【TypeScript】深入学习TypeScript类(下) 最近博主一直在创作TypeScript的内容,所有的TypeScript文章都在我的TypeScript从入门到精通专栏里,每一篇文章都是精心打磨的优质好文,并且非常的全面和细致,期待你的订阅❤️ 本篇文章将继续去讲解TypeScript中的class类,这也许会是你看过的最全面最细致的TypeScript,关注博主下篇更精彩!.................. 阅读详情

相关推荐

【TypeScript】深入学习TypeScript类(上)

最近博主一直在创作TypeScript的内容,所有的TypeScript文章都在我的TypeScript从入门到精通专栏里,每一篇文章都是精心打磨的优质好文,并且非常的全面和细致,期待你的订阅❤️本篇文章将深入去讲解TypeScript中的class类(由于内容较多,将其分为上下两篇),这也许会是你看过的最全面最细致的TypeScript至此,TypeScript类的上篇就结束了,关注博主下篇更精彩!博主的TypeScript从入门到精通专栏正在慢慢的补充之中,赶快关注订阅,与博主一起进步吧!.......

前端之行,任重道远! 7893

TypeScript中的函数详解

TypeScript中的函数使用详解

qq_44749491的博客 3742

不用买显示器!用USBMMID虚拟显示器软件在Win10上扩展4个屏幕(保姆级教程)

本文提供了一份详细的保姆级教程,指导用户如何在Windows 10系统上,无需购买额外硬件,通过USBMMID虚拟显示器软件扩展出多达4个虚拟屏幕。文章深入解析了虚拟显示器的核心原理,并基于微软IDD框架,手把手教学从软件获取、环境检查到安装配置的全过程,帮助开发者和多任务用户构建高效、免费的虚拟多屏工作站,实现生产力的飞跃。

backprop5master的博客 661

Typescript 函数类型详解

本文介绍了TS 中有关函数的知识,包括函数的声明方式,如何声明函数类型,函数参数和返回值的类型,函数重载以及 this 的类型。大部分内容和 JS 中差不太多,主要是 this 类型和函数重载这两点,需要额外关注下。

昆吾kw的博客 3284

英雄联盟(MOBA)完整制作教程

这是一份从零到上线、可落地的 LOL 风格 MOBA 游戏开发全流程教程,覆盖策划、美术、程序、测试、运营全环节,适合独立团队或学习参考。

qq_35779316的博客 543

京东联盟h5st(3.1)加密参数逆向实战与反爬对抗策略

本文详细解析了京东联盟h5st(3.1)加密参数的逆向分析与实战破解过程。通过接口分析定位关键加密函数,拆解h5st结构并还原其基于SHA256和HMAC-SHA256的加密逻辑,最终使用Python集成JavaScript环境成功复现加密算法,并分享了应对反爬的频率限制、IP封禁及算法升级等对抗策略。

weixin_29246195的博客 1740

TypeScript学习笔记(三) - 方法

本篇将介绍在TypeScript里如何定义和使用方法。 一、方法标准声明和使用 1 // 方法声明 2 function func(x: number, y: number): number { 3 return x + y; 4 } 在TypeScript里,方法声明可以明确定义每一个参数的类型,和返回值的类型。在编译时,编译器会检查方法体的返回值类型是否符合...

weixin_30878501的博客 315

香橙派5玩转SATA SSD:一个被忽略的overlays配置项,让你的Ubuntu系统飞起来

本文详细介绍了如何在香橙派5上通过配置`overlays=ssd-sata`启用SATA SSD作为系统启动盘,大幅提升Ubuntu系统的性能。文章深入解析了设备树覆盖的工作原理,提供了完整的配置流程和性能优化建议,帮助开发者充分发挥香橙派5的硬件潜力。

weixin_30787531的博客 221

TypeScript函数:定义、调用和参数传递

在 TypeScript 中,函数的定义方式和 JavaScript 相同,TypeScript 函数可以创建有名字的函数和匿名函数。在定义 TypeScript 时需要指定函数的参数类型和返回值类型。在这个函数中,我们指定了两个参数的类型(和),以及函数的返回值类型(: number本文介绍了 TypeScript 函数的定义、调用和参数传递方法。通过学习这些知识,可以更好地理解 TypeScript 中的函数概念,并使用 TypeScript 开发更可靠、可维护的程序。

与墨的编程成长历程 5889

科研ABC - The Results Section(SCI论文写作补充)

1 前言 1.1 IMRD格式 1.2 Results部分意义 1.3 Results部分主要内容 2 Results & Discussion关系 2.1 Results & Discussion部分的搭配方式 2.2 Results & Discussion部分的区分 3 Results部分的结构 3.1 Move 1: Set the Stage 3.1....

洋洋洋2020的blog 1622

知识图谱开发实战:搭建上市公司知识图谱(二)

搭建上市公司知识图谱(二)学习目标1. 获取上市公司公开数据1.1 获取上市公司列表与行业信息1.2 代码展示2. 从网站爬取上市公司网页并存储为 HTML文件2.1 准备环境2.2 爬取上市公司公开信息3. 解析HTML文件,获取高管信息并存储为 csv 文件4. 设计知识图谱数据库4.1 实体4.2 关系4.3 属性4.4 特殊4.5 代码5. 知识图谱数据库查询实战5.1 实战:按照neo4j的数据格式,转换CSV文件5.2 实战:使用neo4j-admin 导入数据5.3 实战:使用neo4j-b

全网粉丝30W+,优快云、稀土掘金人工智能领域签约作者,人工智能、大模型、Python 爬虫,商务合作,请私信沟通。 2096

TypeScrip默认参数、构造函数、匿名函数、箭头函数、接口函数.

函数是JavaScript应用程序的基础,他帮你实现抽象层,模拟类,信息隐藏和模块。在TypeScript里,虽然已经支持类,命名空间和模块,但函数仍然是主要的定义,行为的地方。TypeScript为JavaScript函数添加了额外的功能,让我们可以更容易地使用。函数分为匿名函数,命名函数(有名函数、普通函数),箭头函数,接口函数(函数起别名)函数定义的方式//匿名函数 两个number类型参数 返回值为number类型}//调用​//有名函数 fu1就是函数名 括号后不限定则默认any}

CYSNLD的博客 1800

蓝牙芯片驱动开发-第11章第1题-WiFi蓝牙共存的关键策略有哪些

蓝牙芯片驱动开发-第11章第1题-WiFi蓝牙共存的关键策略有哪些

weixin_42162924的博客 30

typescript学习笔记

数据类型(11种) boolean,number,string,array,null,undefined,void,never,tuple(元祖类型),enum(枚举),any(任意类型) //枚举,自增长,注意每个枚举成员的值都是不同的 enum Direction { Up = 1, Down, //2 Left, //3 Right //4 } 接口 --------interface关键字 interface params { name: string; //

Wonder_BBJ的博客 332

全面解析量化价值投资多因子模型的原理

明明知道“买便宜的好公司”是价值投资的核心,但面对3000+只A股,如何快速筛选出“便宜又好”的标的?主观判断总被情绪干扰——明明PE很低的股票,买了却不涨;或者因为“感觉”错过牛股?想规模化投资,但手动分析100只股票就要花一周,根本无法覆盖全市场?量化价值投资的多因子模型,正是解决这些问题的钥匙。它将价值投资的核心逻辑(“便宜”“好公司”)转化为可量化的因子,用数学模型替代主观判断,实现系统化筛选、可回测验证、规模化复制的投资决策。为什么多因子模型能有效预测股票收益?

AI天才研究院 1058

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

TypeScript学习笔记

TypeScript学习笔记

weixin_46960537的博客 791

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

「TypeScript系列」TypeScript 类/类继承

访问控制修饰符对于封装和隐藏类的内部状态特别有用,它们允许你定义哪些成员是公开的(可以被外部使用),哪些成员是私有的(只能在类内部使用),以及哪些成员是受保护的(可以在类内部和子类中使用)。TypeScript 提供了基于类的面向对象编程的语法,这允许你定义类、属性和方法,以及实现继承、封装和多态等面向对象的概念。关键字,但实际上是重写了父类的方法,并且父类的方法在后续版本中发生了更改(例如,方法签名改变了),那么 TypeScript 编译器可能不会给出明确的错误提示,这可能会导致运行时错误。

日常笔记/总结/系列知识梳理 2241

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

(三)Typescript中的类

加入QQ群:864680898,一起学习进步!点击群名可查看本人网站,有最新文章! (三)Typescript中的类 在ECMAScript 6中,JavaScript程序将可以使用这种基于类的面向对象方法。在ts中的话,就更接近与那些成熟的语言 Java, Php extends 类的继承关键词 class Father { surname: string = 'deng'; shape...

qq_42036203的博客 1603

TypeScript类

类就是拥有相同属性和方法的一系列对象的集合,类是一个模具,是从这该类包含的所有具体对象中抽象出来的一个概念,类定义了它所包含的全体对象的静态特征和动态特征。类有静态特征和动态特征【以大家最熟悉的人类为例】静态特征【软件界叫属性】姓名,年龄,地址,身份证号码,联系方式,家庭地址,微信号动态特征【软件界叫方法】吃饭,走路【再看桌子类】静态特征【属性】高度,宽度,颜色,价格,品牌,材质动态特征【方法】承载【来看订单类】

小白小白从不日别的博客 1443

8. TypeScript 类

TypeScript类提供了面向对象编程的核心特性,包括封装、继承和多态。通过访问修饰符(public/private/protected)控制成员可见性,抽象类强制子类实现特定方法,构造函数参数类型检查确保对象初始化的安全性。继承机制允许代码复用和方法重写,其中super关键字可调用父类方法。类可以建模现实实体,如银行账户、几何图形等,通过定义属性和方法实现业务逻辑。TypeScript的类型系统增强了类的安全性,使其成为构建复杂应用的理想选择。

Raink老师的博客 1027

【TypeScript入门】TypeScript入门篇——类

TypeScript 是面向对象的 JavaScript。类描述了所创建的对象共同的属性和方法。

看世界,也找自己 1088

TypeScript:类

JavaScript程序员将能够使用基于类的面向对象的方式。 使用TypeScript,我们允许开发者现在就使用这些特性,并且编译后的JavaScript可以在所有主流浏览器和平台上运行,而不需要等到下个JavaScript版本。

ChinaDragon10的博客 1324

TypeScript基础知识

TypeScript 是 JavaScript 的类型的超集,支持ES6语法,支持面向对象编程的概念,如类、接口、继承、泛型等。安全兼容JavaScript,是JavaScript的超集;引入类型系统,可以尽早定位错误位置,帮助提升开发效率;先进的JavaScript,支持JavaScript的最新特性;TypeScript在社区的流行度越来越高,他非常适用于一些大型项目,也非常适用于一些基础库,极大地帮助我们提升了开发效率和体验。demo(2)

ZMN0057的博客 1098

TypeScript 类

在 TypeScript 中,类是一种用于创建对象和组织代码的结构。classnewclassthis在引用任何一个类成员的时候都用了this。它表示我们访问的是类的成员。

咸鱼滚滚 1357

解读typescript中class类

类(class)是面向对象编程的基本构件,封装了属性和方法,本文介绍了TypeScript 中类的属性、方法。

念旧的博客 1255

TypeScript(三)对象,接口,类,泛型

TypeScript(三)对象,接口,类,泛型

chengcheng9876的博客 1310
上一篇: canvas+js实现坦克大战多模式版
下一篇: typescript基础知识(四)接口
前端小黑
博客等级 码龄9年 148粉丝 222原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值