web前端之TypeScript

MENU

  • typescript类型别名、限制值的大小
  • typescript使用class关键字定义一个类、static、readonly
  • typescript中class的constructor(构造函数)
  • typescript中abstractClass(抽象类)、extends、abstract
  • typescript中的接口、type、interface
  • typescript封装属性、public、private、protected、constructor、get、set、extends
  • typescript枚举、enum


typescript类型别名、限制值的大小

type myType = 1 | 2 | 3 | 4 | 5;
let k: myType;
let l: myType;
let m: myType;k = 2; // 正常
l = 6; // 报错
m = 3; // 正常

typescript使用class关键字定义一个类、static、readonly

// 使用class关键字来定义一个类
// 类对象中主要包含了两个部分:属性和方法
class Person {// 01----------------------------------// 直接定义的属性是实例属性,需要通过对象的实例去访问a = 'a';// 02----------------------------------// 使用static开头的属性是静态属性(类属性),可以直接通过类去访问static b: number = 18;// 03----------------------------------// readonly开头的属性表示一个只读的属性无法修改readonly c: string = '半晨';// 04----------------------------------// 静态只读属性static readonly d: string = '舒冬';// 05----------------------------------// 直接定义方法e() {console.log('直接定义方法');// 直接定义方法}// 05----------------------------------// 定义静态方法static f() {console.log('定义静态方法');// 定义静态方法}
}const person = new Person();console.log('Person实例:', person);
// Person实例: Person {a: "a", c: "半晨"}// 01------------------------------------------------
// 直接定义的属性是实例属性,需要通过对象的实例去访问
console.log('实例属性:', person.a);
// 实例属性: a
// console.log('实例属性:', Person.a);
// 实例属性: undefined 
// 类型“typeof Person”上不存在属性“a”。// 02------------------------------------------------
// 类属性(静态属性)
console.log('类属性(静态属性):', Person.b);
// 类属性(静态属性): 18
// console.log('类属性(静态属性):', person.b);
// 类属性(静态属性): undefined
// 属性“b”在类型“Person”上不存在。你的意思是改为访问静态成员“Person.b”吗?// 03------------------------------------------------
// readonly开头的属性表示一个只读的属性无法修改
console.log('只读属性:', person.c);
// 只读属性: 半晨
// person.c = '哈哈';
// 无法分配到 "c" ,因为它是只读属性。// 04------------------------------------------------
// 静态只读属性
console.log('静态只读属性:', Person.d);
// 静态只读属性: 舒冬
// Person.d = '哈哈';
// 无法分配到 "d" ,因为它是只读属性。// 05------------------------------------------------
// 直接定义方法
person.e();
// Person.e();
// 类型“typeof Person”上不存在属性“e”。// 05------------------------------------------------
// 直接定义方法
Person.f();
// person.f();
// 属性“f”在类型“Person”上不存在。你的意思是改为访问静态成员“Person.f”吗?

typescript中class的constructor(构造函数)

class Dog {// 01--------------------------------------------------------// name = '旺财';// age = 7;// 02--------------------------------------------------------// name: string;// 属性“name”没有初始化表达式,且未在构造函数中明确赋值。// age: number;// 属性“age”没有初始化表达式,且未在构造函数中明确赋值。// 构造函数会在对象创建时执行constructor(name: string, age: number) {// 在实例方法中,this就表示当前当前的实例// 在构造函数中当前对象就是当前新建的那个对象// 可以通过this向新建的对象中添加属性this.name = name;this.age = age;}bark() {console.log('汪汪汪');// 汪汪汪// 在方法中可以通过this来表示当前调用方法的对象return this.name;}
}// 错误示例--------------------------------------------------------
// const dog1 = new Dog();
// const dog2 = new Dog();// 01--------------------------------------------------------
// console.log('dog1:', dog1);
// // dog1: Dog {name: "旺财", age: 7}
// console.log('dog2:', dog2);
// // dog2: Dog {name: "旺财", age: 7}// 02--------------------------------------------------------
// console.log('dog1:', dog1);
// // dog1: Dog {}
// console.log('dog2:', dog2);
// // dog2: Dog {}// 正确示例--------------------------------------------------------
const dog1 = new Dog('小黑', 6);
const dog2 = new Dog('小白', 7);console.log('dog1:', dog1);
// dog1: Dog {name: "小黑", age: 6}
console.log('dog2:', dog2);
// dog2: Dog {name: "小白", age: 7}// 03--------------------------------------------------------
// 调用类中的方法
console.log('dog1:', dog1.bark());
// dog1: 小黑
console.log('dog2:', dog2.bark());
// dog1: 小白

typescript中abstractClass(抽象类)、extends、abstract

// 自执行函数的作用是形成单独模块(块作用域),
// 防止此文件的变量或方法与其他文件的属性或方法冲突
(function () {// 以abstract开头的类是抽象类,// 抽象类和其他类区别不大,只是不能用来创建对象,// 也就是不能new Animal()的意思。// 抽象类就是专门用来被继承的类// 抽象类中可以添加抽象方法abstract class Animal {name: string;constructor(name: string) {this.name = name;}// 定义一个抽象方法// 抽象方法使用abstract开头,没有方法体// 抽象方法只能定义在抽象类中,子类必须对抽象方法进行重写// void没有返回值(返回值为空)abstract sayHello(): void;}class Dog extends Animal {sayHello() {console.log('汪汪汪汪!');}}// 非抽象类“Cat”不会实现继承自“Animal”类的抽象成员“sayHello”。class Cat extends Animal {// sayHello() {//     console.log('喵喵喵喵!');// }}const dog = new Dog('旺财');const cat = new Cat('喵喵');dog.sayHello();cat.sayHello();
})();

typescript中的接口、type、interface

// 自执行函数的作用是形成单独模块(块作用域),
// 防止此文件的变量或方法与其他文件的属性或方法冲突
(function () {// 描述一个对象的类型type myType = {name: string,age: number};const obj: myType = {name: 'sss',age: 111,};console.log('myType:', obj);// myType: {name: "sss", age: 111}// 接口用来定义一个类结构// 用来定义一个类中应该包含哪些属性和方法// 同时接口也可以当成类型声明去使用// 接口可以声明相同的接口名称// 只是接口会打散合并interface myInterface {name: string;age: number;}interface myInterface {gender: string;}// 如果属性个数对应不上会报错// 说明了接口是可以定义相同接口名称// 并且接口会打散合并const objs: myInterface = {name: 'sss',age: 111,gender: '男'};console.log('myInterface:', objs);// myInterface: {name: "sss", age: 111, gender: "男"}// 接口可以在定义类的时候去限制类的结构// 接口中的所有的属性都不能有实际的值// 接口只定义对象的结构,而不考虑实际值// 在接口中所有的方法都是抽象方法interface myInter {name: string;sayHello(): void;}// 定义类时,可以使类去实现一个接口// 实现接口就是使类满足接口的要求class MyClass implements myInter {name: string;constructor(name: string) {this.name = name;}sayHello() {console.log('大家好~~');// 大家好~~console.log(this.name);// 半晨}}let myclass = new MyClass('半晨');myclass.sayHello();
})();

typescript封装属性、public、private、protected、constructor、get、set、extends

// 自执行函数的作用是形成单独模块(块作用域),
// 防止此文件的变量或方法与其他文件的属性或方法冲突
(function () {// 可以任意修改类中属性的值class ArbitrarilyEdit {name: string;age: number;constructor(name: string, age: number) {this.name = name;this.age = age;}}let arbitrarilyEdit = new ArbitrarilyEdit('半晨', 24);// 在对象中直接设置属性// 属性可以任意的被修改// 属性可以任意被修改将会导致对象中的数据变得非常不安全console.log('before-arbitrarilyEdit:', arbitrarilyEdit);// before-arbitrarilyEdit: ArbitrarilyEdit {name: "半晨", age: 24}arbitrarilyEdit.name = '舒冬';arbitrarilyEdit.age = -33;console.log('after-arbitrarilyEdit:', arbitrarilyEdit);// arbitrarilyEdit: ArbitrarilyEdit {name: "舒冬", age: -33}// 定义一个不可以任意修改类中值的类class Person {// typescript可以在属性前添加属性的修饰符// public 修饰的属性可以在任意位置访问(修改) 默认值// private 私有属性,私有属性只能在类内部进行访问(修改)// 通过在类中添加方法使得私有属性可以被外部访问// protected 受包含的属性,只能在当前类和当前类的子类中访问(修改)private _name: string;private _age: number;constructor(name: string, age: number) {this._name = name;this._age = age;}// getter方法用来读取属性// setter方法用来设置属性// 它们被称为属性的存取器// 定义方法,用来获取name属性getName() {return this._name;}// 定义方法,用来设置name属性setName(value: string) {this._name = value;}getAge() {return this._age;}setAge(value: number) {// 判断年龄是否合法if (value >= 0) {this._age = value;}}get name() {return this._name;}set name(value) {this._name = value;}get age() {return this._age;}set age(value) {if (value >= 0) {this._age = value}}}const per = new Person('半晨', 18);console.log('before-per:', per);// before-per: Person {_name: "半晨", _age: 18}per._name = '舒冬';per._age = -36;console.log('after-per:', per);// after-per: Person {_name: "舒冬", _age: -36}// 此时是可以编译通过// 但是_name和_age会出现下波浪线提示错误// 定义方法,获取name属性console.log('getName:', per.getName());// getName: 舒冬// 定义方法,设置name属性per.setName('苏檀');console.log('setName:', per.getName());// setName: 苏檀// 定义方法,获取age属性console.log('getAge:', per.getAge());// getAge: -36// 定义方法,设置age属性// 此处无法修改原先赋值为 -36 的值per.setAge(-16);console.log('setAge:', per.getAge());// setAge: -36// 使用自带的get和set方法console.log('before-getName:', per.name);// before-getName: 苏檀console.log('before-age:', per.age);// before-age: -36per.name = '宁毅';per.age = 36;console.log('after-getName:', per.name);// after-getName: 宁毅console.log('after-age:', per.age);// after-age: 36// ----------------------------------------------------------class A {// protected 受包含的属性,只能在当前类和当前类的子类中访问(修改)protected num: number;constructor(num: number) {this.num = num;}}class B extends A {test() {console.log(this.num);// 33}}const b = new B(3436);console.log('before-b:', b);// before-b: B {num: 3436}b.num = 33;// 属性“num”受保护,只能在类“A”及其子类中访问。console.log('after-b:', b);// after-b: B {num: 33}// 本来是不应该修改的,// 但是编译时没有限制报错不能生成文件导致结果是可以修改b.test();// ----------------------------------------------------------// 方式一和方式二是一样的效果// class C {//     name: string;//     age: number//     // 可以直接将属性定义在构造函数中//     constructor(name: string, age: number) {//         this.name = name;//         this.age = age;//     }// }// 方式二和方式一是一样的效果class C {// 可以直接将属性定义在构造函数中constructor(public name: string, public age: number) {console.log(name, age);// xxx 111}}const c = new C('xxx', 111);console.log('c:', c);// c: C {name: "xxx", age: 111}
})();

typescript枚举、enum

enum Gender {Male,Female
};let i: { name: string, gender: Gender };
i = { name: '孙悟空', gender: Gender.Male // 'male'
};console.log(i.gender === Gender.Male); // true

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

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

相关文章

LeetCode刷题笔记第80题:删除有序数组中的重复项 II

LeetCode刷题笔记第80题:删除有序数组中的重复项 II 题目: 删除升序数组中超过两次的元素后的数组长度 想法: 使用快慢指针的方法完成,使用快指针遍历整个数组,使用慢指针完成相同元素最多保留两个。在快指针遍历到…

MATLAB实战 | S函数的设计与应用

S函数用于开发新的Simulink通用功能模块,是一种对模块库进行扩展的工具。S函数可以采用MATLAB语言、C、C、FORTRAN、Ada等语言编写。在S函数中使用文本方式输入公式、方程,非常适合复杂动态系统的数学描述,并且在仿真过程中可以对仿真进行更精…

a-table:表格组件常用功能记录——基础积累

antdvue是我目前项目的主流&#xff0c;在工作过程中&#xff0c;经常用到table组件。下面就记录一下工作中经常用到的部分知识点。 table组件 <a-table :dataSource"tableData":rowKey"(row) > row.id":scroll"{ y: 550 }"bordered:pag…

已解决AttributeError: module ‘gradio‘ has no attribute ‘outputs‘

问题描述 Traceback (most recent call last): File "/media/visionx/monica/project/ResShift/app.py", line 118, in <module> gr.outputs.File(label"Download the output")AttributeError: module gradio has no attribute outputs 解决办…

[英语学习][5][Word Power Made Easy]的精读与翻译优化

[序言] 今日完成第18页的阅读, 发现大量的翻译错误以及不准确. 需要分两篇文章进行讲解. [英文学习的目标] 提升自身的英语水平, 对日后编程技能的提升有很大帮助. 希望大家这次能学到东西, 同时加入我的社区讨论与交流英语相关的内容. [原著英文与翻译版对照][第18页] Wh…

Mininet学习记录(常用命令+创建网络拓扑+OpenDaylight显示拓扑结构)

目录 1.Mininet简介2.Mininet常用命令2.1创建网络拓扑常用参数2.2常用的内部交换命令 3.创建网络拓扑的三种方式3.1通过命令行创建3.2通过miniedit可视化界面创建3.3通过python脚本创建 4.问题总结 1.Mininet简介 Mininet 是由一些虚拟的终端节点 (end-hosts) 、交换机、路由器…

【计算机网络笔记】802.11无线局域网

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能&#xff08;1&#xff09;——速率、带宽、延迟 计算机网络性能&#xff08;2&#xff09;…

检查您的手机浏览器是否支持WebRTC技术

要检查您的手机浏览器是否支持WebRTC技术&#xff0c;可以通过以下方法&#xff1a; 方法1&#xff1a;使用WebRTC测试网站 访问测试网站&#xff1a; 在手机浏览器中&#xff0c;访问一个专门用于检测WebRTC支持的网站&#xff0c;例如Test WebRTC或WebRTC Troubleshooter.这…

富文本编辑器(wangEditor 5)

一、链接 wangEditor 二、基础 import wangeditor/editor/dist/css/style.css; // 引入 cssimport React, { useState, useEffect } from react; import { Editor, Toolbar } from wangeditor/editor-for-react; import { IDomEditor, IEditorConfig, IToolbarConfig } fro…

【每日OJ —— 572. 另一棵树的子树】

每日OJ —— 572. 另一棵树的子树 1.题目&#xff1a;572. 另一棵树的子树2.解法2.1.算法讲解2.2.代码实现2.3.提交通过展示 1.题目&#xff1a;572. 另一棵树的子树 2.解法 2.1.算法讲解 通过深度优先遍历&#xff0c;来判断二叉树root的每个节点的值是否和subRoot的每个节点…

nodejs微信小程序+python+PHP贵州旅游系统的设计与实现-计算机毕业设计推荐MySQL

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性&#xff1a;…

Android 13 - Media框架(22)- MediaCodec(三)

这一节开始我们将重新回到 MediaCodec 这一层来学习 buffer 的流转 status_t MediaCodec::dequeueOutputBuffer(size_t *index,size_t *offset,size_t *size,int64_t *presentationTimeUs,uint32_t *flags,int64_t timeoutUs) {sp<AMessage> msg new AMessage(kWhatDequ…

线面积分公式整理

文章目录 线面积分公式整理第一类曲线积分第二类曲线积分第一类曲面积分第二类曲面积分两类曲线积分的联系两类曲面积分的联系格林公式高斯公式斯托克斯公式 公式的应用 线面积分公式整理 这部分内容用于回顾和查阅,许多写法和表达式记号默认使用了惯例含义其中曲线积分可以从…

洛谷 P9754 [CSP-S 2023] 结构体 题解

题目传送门 洛谷博客 个人博客站 CSP-S 2023 T3 结构体 题解 基本思路 本题主要考查编码能力&#xff0c;所以直接给出基本思路&#xff1a; 由于可以递归式的创建元素&#xff0c;最多可以同时存在 10 0 100 100^{100} 100100 个不同的基础类型的元素。即使算上最大地址的…

爬虫学习(一)

文章目录 文件目录结构打开文件操作 爬取网页的理解尝试 文件目录结构 打开文件操作 爬取网页的理解尝试 这个放回值为请求正常

系统架构设计-权限模块的设计

系统架构-权限模块的设计 如何评估一个研发人员技术水平&#xff0c;在大部分的情况下不是看其完成业务代码的好坏&#xff0c;更多的时候还是需要看这个研发人员从零构建一个完整项目的能力&#xff0c;在大公司中这样的机会可能相对较少&#xff0c;大部分的时间里都是对现有…

【数据库】数据库多种锁模式,共享锁、排它锁,更新锁,增量锁,死锁消除与性能优化

多种锁模式的封锁系统 ​专栏内容&#xff1a; 手写数据库toadb 本专栏主要介绍如何从零开发&#xff0c;开发的步骤&#xff0c;以及开发过程中的涉及的原理&#xff0c;遇到的问题等&#xff0c;让大家能跟上并且可以一起开发&#xff0c;让每个需要的人成为参与者。 本专栏会…

2024年美国大学生数学建模竞赛(MCM/ICM)论文写作方法指导

一、前言 谈笑有鸿儒&#xff0c;往来无白丁。鸟宿池边树&#xff0c;僧敲月下门。士为知己者死&#xff0c;女为悦己者容。吴楚东南坼&#xff0c;乾坤日夜浮。剪不断&#xff0c;理还乱&#xff0c;是离愁&#xff0c;别是一番滋味在心头。 重要提示&#xff1a;优秀论文的解…

LeeCode前端算法基础100题(5)- 最长公共前缀

一、问题详情: 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀,返回空字符串 ""。 示例 1: 输入:strs = ["flower","flow","flight"] 输出:"fl" 示例 2: 输入:strs = ["dog",&quo…