ts中定义类、类的继承、修饰符

2023-11-18

首先,简单介绍ES6的class类

class Foo {
	constructor(name,age){ // 实例前的构造函数,实例添加name/age属性
		this.name = name
		this.age = age
	}
	getName () { // 原型添加getName()方法
		return `My name is ${this.name} age : ${this.age}`
	}
}

let foo = new Foo('小明',12) // Foo {name:'小名',age:12,__proto__:getName(){}}

ts定义类:

class Foo {
	public name:string // 需要提前声明值,默认为public
	public age:number
	public constructor(_name:string,_age:number){
		this.name = _name
		this.age = _age
	}
	public getName ():string { // 原型方法,指定返回值为string类型
		return `My name is ${this.name} age : ${this.age}`
	}
}

let foo = new Foo('小明',12) // Foo {name:'小名',age:12,__proto__:getName(){}}

这里指定name和age的类型,附部分类型:

attr : sting // sting类型
attr : number // number类型
attr : boolean // boolean类型
attr : string[] // 数组的每一项必须是string类型
attr : number[] // 数组每一项必须是number类型
attr : Array< any>// 数组每一项可以为任意类型
attr : [string,number] // 数组每一项必须是指定类型
attr ?: string // 非必传

提前声明值可以利用参数属性

class Foo {
	public constructor(public name:string,public age:number){}
	public getName ():void {
		console.log(this.name,this.age)
	}
}
let foo = new Foo(‘小明’,12) // Foo {name:'小明',age:12,__proto__:getName(){}}

介绍public、private、protected、readonly、static 等标识

  • public (默认为public,也可以设置为public)
class Foo {
	pulbic name:string
	public constructor (_name?:string) {
		this.name = _name || ''
	}
}
let foo = new Foo('小明') // Foo {name:'小名'}
  • private (可以被继承,但是无法在实例中访问)
class Foo {
	private name:string
	constructor (_name:string) {
		this.name = _name
	}
}
let foo = new Foo('小明') // Foo {name:'小名'}
console.log(foo.name) //error: Property 'name' is private;
  • protected (与private类似,但是当构造函数是protected时,无法实例化,只能被继承)
class Foo {
	protected name:string
	protected constructor(_name:string){
		this.name = _name
	}
}

let foo = new Foo('小明')  //error: Constructor of class 'Foo' is protected
  • readonly (只读属性,无法被修改/克隆)
class Foo {
	readonly name:string
	public constructor(_name:string){
		this.name = _name
	}
}

let foo = new Foo('小明')  // Foo {name:'小明'}
foo.name = '小红' //error: Cannot assign to 'name' because it is a constant or a read-only property.
  • static (静态属性,不能被实例访问,在类里面访问时,需要加上类名)
class Foo {
	static age:number = 12
	public constructor(private name:string){}
	pubilc getAge ():void {
		console.log(Foo.age)
	}
}

let foo = new Foo('小明')  // Foo {name:'小明',__proto__:getAge(){}}
console.log(foo.getAge()) // 12 

ts继承:

class Foo {
	public name:string
	public age:number
	public construcor (_name:string,_age:number) {
		this.name = _name
		this.age = _age
	}
	getName ():string {
		return this.name
	}
}

class Bar extends Foo {
	private className:string
	public constructor (_name:string,_age:number,_className:string) {
		super(_name,_age)
		this.calssName = _className
	}
	public getClassName ():void {
		console.log(this.className)
	}
}

let bar = new Bar('小明',12,'一年级') // Bar {name:'小明',age:12,className:'一年级'}
console.log(bar.getName()) // 小明
console.log(bar.getClassName()) // 一年级
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ts中定义类、类的继承、修饰符 的相关文章

  • Disqus 评论数始终为 0 条评论

    我想我已经按照通用代码的说明设置了 Disqus 问题是它总是说某个帖子有 0 条评论 拿这个帖子来说 http tx0rx0 com retropie and the raspberry pi http tx0rx0 com retrop
  • 变量前面加双下划线

    我的节点代码中有以下代码片段 var fs require fs fs readdir dirname function err files console log files 为什么变量 dirname 有双下划线 我知道一个下划线是私有
  • 语法:const {} = 变量名,任何人都可以解释或指出我正确的方向[重复]

    这个问题在这里已经有答案了 这个语法在 JavaScript 中意味着什么 可能是 ES6 const 变量名 我目前正在尝试掌握 React 在很多例子中我都遇到过这种语法 例如 const girls guys women men st
  • getElementsByClassName & IE8:对象不支持此属性或方法[重复]

    这个问题在这里已经有答案了 I know getElementsByClassName 不支持IE8 你知道我可以用什么来代替吗 我因错误而变得烦人 对象不支持此属性或方法 HTML 代码是 function sumar var elems
  • Vue Draggable - 如何仅替换所选项目以防止移动网格上的所有其他项目?

    这是一个要测试的示例 https codesandbox io s j4vn761455 file src App vue 112 116 https codesandbox io s j4vn761455 file src App vue
  • SVG 中三角形的圆角

    我正在尝试制作一个具有圆角的三角形 三角形将如下所示 左下角是唯一看起来相当容易制作的角 主要是因为这是一个 90 度的 转弯 该转弯是使用QSVG 中的命令具有以下参数 Q x y height x y height RADIUS从我正在
  • 数据表“footerCallback”函数未在页脚中显示结果

    我尝试获取每列的总和并将结果显示在页脚中 我在用着 页脚回调 https datatables net reference option footerCallbackDatatables提供的功能 但是它在页脚中没有显示任何内容 数据表解释
  • 禁用整个站点的 IE8 加速器

    是的 我知道有类似的问题 https stackoverflow com questions 499565 is it possible to disable ie8 accelerators on my website在 SO 上 但它已
  • 如何删除从 javascript var 转义的反斜杠?

    我有这个变量 var x div class Which is div class 但是我需要 div class abcdef 我怎样才能 unes cape 这个变量来删除所有转义字符 您可以通过正则表达式将反斜杠后跟引号替换为仅引号
  • 模型不是 AngularJS 中输入的日期对象

    使用 AngularJS 我试图使用输入显示日期type date
  • Famo.us 滚动视图高度

    我正在尝试使用著名的顺序布局在滚动视图下方添加图像 但滚动视图的高度有问题 这就是我创建滚动视图的方式 var scrollview new Scrollview direction Utility Direction X options
  • 类的成员复制

    在学习 复制成员 概念时 书中给出了如下说法 此外 如果非静态成员是引用 const 或没有复制赋值的用户定义类型 则无法生成默认赋值 我不太明白这个声明到底想传达什么 或者说这个说法指的是哪一种场景 谢谢 该语句与编译器自动为您编写的类
  • Google 地图 InfoBubble PixelOffset(从标记上方的默认位置移动)

    我正在尝试实现一个自定义 infoBubble 它的框打开到标记的侧面 而不是顶部的默认位置 事实证明这比预期的要困难 使用普通的infoWindow 您可以使用pixelOffset 请参阅此处文档 https developers go
  • Promise 构造函数回调的主体何时执行?

    假设我有以下代码构造一个Promise function doSomethingAsynchronous return new Promise resolve gt const result doSomeWork setTimeout gt
  • javascript/jquery 禁用点击提交按钮,防止重复提交

    所以我的提交按钮如下所示 a href img src images user create product png border 0 a 当我双击它时 显然会双重提交 问题是 我将信息保存在数据库中 因此那里会有重复的信息 我不想那样 这
  • 从未使用 mimeType 初始化的 MediaRecorder 获取 mimeType

    我正在使用 MediaRecorder API 在页面上录制一些媒体 在我的 MediaRecorder 初始化中 我没有指定内容类型 因为我不需要任何特别的内容 浏览器可以选择它想要的 var mediaRecorder new Medi
  • 获取 byte[]

    我有一个 html 画布 如下所示 output is a base64string of image data var oldImage new Image oldImage onload function var resizeRatio
  • 无法从 JSON 请求获取数据,尽管我知道它已返回

    我试图获取从 getJSON 返回的数据 但我无法让它工作 我已经在 search twitter API 上尝试了相同的代码 效果很好 但它不适用于其他网站 我知道数据已返回 因为我在使用检查器时可以找到它 我通过检查器找到的值是 id
  • 角度 ng-repeat 根据条件添加样式

    我在 div 列表上使用 ng repeat 并且在渲染此 div 的 json 中手动添加项目 我需要定位我在 json 中添加的最后一个 div 它会自动在屏幕上渲染 即 couse 光标所在的位置 其余部分保持在相同位置 但没有给出渲
  • 如何制作过期/签名视频嵌入网址

    我是新来的 正在学习网络开发等等 我只知道如何将我的视频嵌入网站中 任何菜鸟都可以轻松获得源代码 他们也可以嵌入它 但在许多网站中 视频 src 均使用重定向器链接进行编码 例如 它会在一段时间后过期 在本例中是一天 我了解到这是一个签名网

随机推荐

  • Go 语言笔试面试题(并发编程)

    Q1 无缓冲的 channel 和 有缓冲的 channel 的区别 答案 对于无缓冲的 channel 发送方将阻塞该信道 直到接收方从该信道接收到数据为止 而接收方也将阻塞该信道 直到发送方将数据发送到该信道中为止 对于有缓存的 cha
  • 【Blender2.82a】学习记录

    Blender2 82a 学习记录 1 基本操作 1 1 界面操作 1 2 物体操作 1 3 建模基础 2021 12 13 最近的项目又要用到blender了 已经一年半没用过了 现在用的版本为2 93 6 尽管这篇记录的版本比较老了 但
  • 微信公众号开发本地调试方法

    前言 这几天一直想搞个公众号玩一玩 然后去阿里云买了个云服务器ECS 学生9 9 月 因为一开始接触云服务器 所以选了个window系统 然后在本地创建了一个简单的web项目 jyc 用来认证token 在云服务器里面搭了JDK和tomca
  • CMakeLists.txt指定GCC和g++版本号

    Centos默认的g 版本只有4 8 5一般需要升级g 版本 比如升级9 3 0 升级成功后再使用c 14会报unrecognized command line option std c 14 错误 由于有多个gcc版本 cmake使用的是
  • 向前走

    行脚僧云游山中 目力已经瞥见峰上那风化嶙峋的岩石 许是明日便能行至山顶 脚下不是山脉的主峰 但也是颇具险势 并非泛泛 篝火照耀面庞 在山洞的壁上投出巨大的身影 遁入空门近十载 离寺云游也两三个春秋了 原有些厌世 方才脱发出家 住持常言他有些
  • 「解码AGI 对话大模型」AGI创业者不能错过的五节课!

    由百度飞桨 文心大模型 BV百度风投联合主办 张江集团战略合作的AGI Foundathon 大模型创业松活动于9月11日全面上线 为了进一步提升开发者的创新能力和创业实力 主办方精心策划了全面的线上AGI创业营 本次创业营集创业辅导 技术
  • vue3-styled-components inject导致死循环

    npm vue3 styled components npm 低版本浏览器报错 chrome 49 Uncaught RangeError Maximum call stack size exceeded Vue warn Avoid ap
  • .net 和 java 技术对应关系

    net 和 java 技术对应关系 java 生态的优势早已人尽皆知 asp net core 的生态也呈欣欣向荣之势 作为高级技术从业人 你不应该落下任何一门技术 如果你正在将你的 java 知识体系同步到 net 或者正在将你的 net
  • T-Kernel Data types

    来自 uT Kernel 2 0 Specification 3 1 1 General Data Types typedef signed char B signed 8 bit integer typedef signed short
  • 项目-STL空间配置器

    这篇博客主要讲一下SGI STL中的空间配置器的工作流程 一 项目背景 小块内存带来的内存碎片问题 外碎片问题 小块内存频繁申请释放带来的性能问题 二 空间配置器的思想 对于我们来说 对new和delete很熟悉 这两个函数可以分别完成内存
  • 运放中接电阻的作用

    一 基本概念 运放的基本组成 运算放大器的内部电路结构如下所示 一般由输入段 增益段 输出段等3段电路构成 输入段由差分放大段构成 用于放大两个引脚间的电压差 另外 同相信号成分 引脚间无电位差 输入相等电压的状态 不放大 起抵消作用 若仅
  • 数学期望、信息量、信息熵、相对熵、交叉熵

    1 数学期望 数学期望就是总体的均值 或者各项的加权平均 先看离散的情况 假设X为离散型随机变量 x1 x2 x3 xk为随机变量的所有可能取值 p1 p2 p3 pk为随机变量相应取值发生的概率 其中p1 p2 p3 pk 1 那么随机变
  • 安装gin失败或卡住,亲测有效!

    安装gin失败或卡住 亲测有效 本人基于最近学习完了go所有语法 对go框架进一步学习与实战 但第一步的安装就遇到了坑 也是坑了很久 网上很多的方法 但是都乱七八糟 最主要一点毛线用都没有 柳暗花明又一村 功夫不负有心人 还是让我找到了解决
  • 电阻噪声的基础知识和一个有趣的小测试

    作者 TI 专家 Bruce Trump 翻译 TI信号链工程师 Tom Wang 王中南 放大电路的噪声性能受到输入电阻和反馈电阻Johnson噪声 热噪声 的影响 大多数人似乎都知道电阻会带来噪声 但对于电阻产生噪声的细节却是一头雾水
  • PHP对二维数组里面的多字段进行排序

    PHP对二维数组里面的多字段进行排序
  • 500 G JAVA视频网盘分享(JEECG开源社区)

    500 G JAVA视频网盘分享 JEECG开源社区 涵盖从java入门到深入架构 Linux 云计算 分布式 大数据Hadoop ios Android 互联网技术应有尽有 转载 http blog csdn net zhangdaisc
  • 标识符、变量与赋值语句1

    2 2标识符 变量与赋值语句 2 2 1标识符 标识符就是一个名字 就好像我们每个人都有属于自己的名字 它的主要作用就是作为变量 函数 类 模块以及其他对象的名称 Python 中标识符的命名不是随意的 而是要遵守一定的命令规则 比如说 1
  • delete LEFT JOIN 的一个问题解决办法

    LEFT JOIN 的一个问题解决办法 今天在一个程序后台删除一个东西的时候 却出现了这个问题 Java代码 System Message MySQL Query Error User admin Time 2007 10 20 21 08
  • ubuntu18.04桌面卡住鼠标可以动 键盘失效

    大多数是在启动chrome 或者开机后几分钟内频繁操作 直接卡死 鼠标可以移动但是无法点击 视频播放有声音但画面卡住 键盘在显示界面上没有操作效果 我挂了一晚上还是这样 强制重启 crtl alt prtsc r e i s u b ubu
  • ts中定义类、类的继承、修饰符

    首先 简单介绍ES6的class类 class Foo constructor name age 实例前的构造函数 实例添加name age属性 this name name this age age getName 原型添加getName