2023-02-22 学习记录--TS-邂逅TS（二）

news2024/11/26 10:39:25

TS-邂逅TS（二）

不积跬步，无以至千里；不积小流，无以成江海。💪🏻

一、接口（interface）

在这里插入图片描述

在 ts 中，子类只能继承一个父类，不可多继承，但是接口可以实现多继承。So，请小萝卜儿们继续往下看哦 👇🏻

  1. 作用 👍🏻：接口是为了实现多继承，接口好比协议，我们签署了协议，就需要实现协议上的内容。
    • 多继承：子类可以继承多个父类，从而同时含有多个类的属性。
  2. 使用 🎀：将需要继承的多个父类用 接口 表示。
  3. 定义接口 🦋：( interface )
    • interface 接口名 { }
  4. 定义继承 父接口 的 子接口 🦋：( extends )【多个父接口用 逗号 隔开】
    • interface 子接口 extends 父接口1, 父接口2 { }
  5. 定义继承 父接口 的 子类 🦋：( implements )【多个父接口用 逗号 隔开】
    • class 子类 implements 父接口1, 父接口2 { }

注意： ⏰

  • 1、无论子接口还是父接口，里面的方法都要写成不被实现的，比如：attack();；
  • 2、接着在继承接口的子类里必须实现该接口里的方法，比如：attack() { }。

在这里插入图片描述

父类：人、狼、猪猪；
子类：狼人；
实现效果：定义一个子类狼人，其既含有人的属性，也含有狼、猪猪的属性。

第一步🪜、定义三个父类（人、狼、猪猪）

// 父类-人
class Person {
  name: string = "杨咩咩";
}

// 父类-狼
// class Wolf {
//   attack() {

//   }
// }
// 为了实现多继承，Wolf就不能用类了，而要写成一个接口 👇🏻
// IWolf：命名习惯，前加个I，表示这个是个接口，而不是一个普通的类
interface IWolf {
  // 注意这里的方法要写成不被实现的
  attack(): any;
}

// 父类-猪猪
// 为了实现多继承，不能用类了，而要写成一个接口 👇🏻
// IPig：命名习惯，前加个I，表示这个是个接口，而不是一个普通的类
interface IPig {
  // 注意这里的方法要写成不被实现的
  eat(): any;
}

第二步 🪜、定义一个子类狼人，其既含有人的属性，也含有狼、猪猪的属性

1）、方法一 🍓

直接通过extends继承父类Person，同时通过implements继承父接口IWolf、IPig 实现。

// 子类-狼人
// 想实现一个类WolfMan 同时含有Person、Wolf、Pig的特性
// WolfMan是Person的子类，同时还拥有IWolf、IPig的特性
class WolfMan extends Person implements IWolf, IPig {
  // 必须实现接口里的方法
  attack() {
    console.log('attack')
  }
  eat() {
    console.log('eat')
  }

  // 构造函数
  constructor() {
     super();
     this.name = "新的杨咩咩";
  }
}
2）、方法二 🍊

1、先通过extends定义一个接口IChild，其继承IWolf、IPig接口；
2、再通过extends继承父类Person，同时通过implements继承接口IChild 实现。

// 定义一个接口IChild，其继承IWolf、IPig接口
// IChild：命名习惯，前加个I，表示这个是个接口，而不是一个普通的类
interface IChild extends IWolf, IPig {
	// 注意这里的方法要写成不被实现的
	// cry(): any;
}

// 子类-狼人
// 想实现一个类WolfMan 同时含有Person、Wolf、Pig的特性
// WolfMan是Person的子类，同时还拥有IWolf、IPig的特性
class WolfMan extends Person implements IChild {
  // 必须实现接口里的方法
  // cry() {
  //   console.log('cry')
  // }
  attack() {
    console.log('attack')
  }
  eat() {
    console.log('eat')
  }
  
  // 构造函数
  constructor() {
     super();
     this.name = "新的杨咩咩";
  }
}

二、属性寄存器（get、set）

  • 取值：get
  • 赋值：set
    在这里插入图片描述

实现不在外部直接修改成员属性_hp。

// 类 Person
class Person {
  // 成员属性
  _hp: number = 120;

  // 取值
  get hp() {
    return this._hp;
  }

  // 赋值
  set hp(value) {
    if(value < 0) {
      this._hp = 0;
    } else {
      this._hp = value;
    }
  }
}

// 外部
// 实例化对象 new一下
let a = new Person();
// 有属性寄存器的情况下，就尽量不要去用成员属性_hp
// 赋值
a.hp -= 100;
// 取值
document.write(a.hp + ""); // 20

三、命名空间（namespace）

目的 🌈：解决命名冲突；
使用 📚：在同名类外面包裹一层 namespace 自定义名称 { }；
注意 🌩：如果一个类想在名称空间外被使用，需要在类前面加个 export。

在这里插入图片描述

// 命名空间：解决命名冲突

/** 
 * 举例：假如有两个都叫Person的类，想分别获取到对应类的name值
 */

/** 通过命名空间namespace对类进行区分 */
namespace aa {
  // 如果一个类想在名称空间外被使用，需要在类前面加个 export
  export class Person {
    name: string = "111";
  }
}

namespace bb {
  // 如果一个类想在名称空间外被使用，需要在类前面加个 export
  export class Person {
    name: string = "222";
  }
}

/** 实例化对象，分别获取到对应类的name值 */ 
let person1 = new aa.Person();
document.write(person1.name); // 111
let person2 = new bb.Person();
document.write(person2.name); // 222

四、泛型

在这里插入图片描述

  • 格式 🏠：<类型>；
  • 目的 📚：1、方便管理 (使用泛型后，只用在调用方法或类时修改表明的类型，该方法或类里用到该类型的地方就都被改到了)；2、实现类型统一化
    • 可能有爱动脑筋的小萝卜儿想到：类型都传any 就好啦。
    • 这样确实不用区分类型了，But 要注意哦：
      • 比如：function add(num: any): any{ } 都用类型any会导致一个问题，传进的类型是number，但传出的类型是string，达不到类型的统一化哦。
  • 使用 😇 ：下面分别对单泛型和多泛型写了对应案例，请往下看哦~ 👇🏻

1、单泛型 ⭐️

/** 单泛型 */
// 1、自定义待传入的类型T（T是随便取的）
// 传进和传出的类型为同类型T，从而实现：传进什么类型，传出的就是什么类型
function add<T>(num: T): T {
  if(typeof num === 'number') {
    num++;
    return num;
  }
  return num;
}
// 2、调用方法时要在<>里传入对应类型
// 比如这儿相当于：T对应的是number数值型
document.write(add<number>(3) + ''); // 4
// 比如这儿相当于：T对应的是string字符串型
document.write(add<string>('3') + ''); // 3

2、多泛型 ⭐️

/** 多泛型 */

// 1、自定义待传入的类型T、S（T, S就是随便取的）
// 假如想有多个类型，把多个泛型用逗号隔开即可，比如<T,S>
class Person<T,S> {
    // 成员方法
    say(num: T) {
        // document.write()里面只能接字符串型，无论什么类型，只要跟个 + ""，就会变成字符串型哦
        document.write(num + "");
    }
    // 成员方法
    eat(food: S) {
        // document.write()里面只能接字符串型，无论什么类型，只要跟个 + ""，就会变成字符串型哦
        document.write(food + "");
    }
}

// 2、实例化对象时要在<>里传入对应类型，传入时前后顺序需要一一对应，比如这儿相当于：T对应的是number数值型，S对应的是string字符串型
let a = new Person<number,string>;
a.say(3); // ✅ 3
a.say('3'); // ❎ ('3'下方出现红色波浪线) Error: Argument of type 'string' is not assignable to parameter of type 'number'.
a.eat('棒棒糖'); // ✅ '棒棒糖'
a.eat(0); // ❎ (0下方出现红色波浪线) Error: Argument of type 'number' is not assignable to parameter of type 'string'.

五、元祖（Tuple）、数组（Array）、字典

在这里插入图片描述

  • 1、元祖（Tuple）： 一个固定长度、合并不同类型的 数组。
    • 语法 🎀 ：[类型1, 类型2]
    • 举例 🎀 ：const hero: [string, number] = [“超人”,100];
  • 2、数组（Array）：长度不固定、合并相同类型的内容。
    • 数组的声明方式有两种 【更多详情可看TS-邂逅TS（一）】：👇🏻
      • 1、类型[]，比如 number[] 表示数值型数组，eg. [1,2,3]；
      • 2、Array<类型>，比如 Array<number> 表示数值型数组，eg. [1,2,3]。
  • 3、字典

1、元祖（Tuple）

// 比如hero是一个元祖类型，里面存了两个数据，一个是字符串类型，一个是数值型
let hero: [string, number] = ["超人",100];
hero[0] = "蝙蝠侠";
document.write(hero[0]); // 蝙蝠侠

2、数组（Array）

/* 数组的声明方式有两种：
    1、类型[]，比如 number[] 表示数值型数组，比如[1,2,3]
    2、Array<类型>，比如 Array<number> 表示数值型数组，比如[1,2,3]
*/
const array1: number[] = [1,2,3];
// 下面的Array是个类，new Array()为一个空数组[]
// 下面的<number>是泛型，限制了数组里面的值类型为number
const array2: Array<number> = new Array<number>();
（一）、数组里添加或删除元素的方法：push()、unshift()、pop()、shift()、splice()
const array = [1,2,3];

// 1、push() 在数组最后面追加元素(可以追加多个元素)
array.push(4, 5);
console.log(array); // [1, 2, 3, 4, 5]

// 2、unshift() 在数组最前面添加元素(可以添加多个元素)
array.unshift(-1, 0);
console.log(array); // [-1， 0, 1, 2, 3, 4， 5]

// 3、pop() 删除数组中的最后一个元素
array.pop();
console.log(array); // [-1, 0, 1, 2, 3, 4]

// 4、shift() 删除数组中的第一个元素
array.shift();
console.log(array); // [0, 1, 2, 3, 4]

// 5、splice() 删除元素/插入元素/替换元素（第一个参数是操作元素的索引值）
// (1)、删除元素：第二个参数传入你要删除几个元素(如果没有传，就删除后面所有的元素)
array.splice(0, 1); // 从第一位开始删除1个元素
console.log(array); // [1, 2, 3, 4]
// (2)、插入元素：第二个参数为0(删除0个)，并且第三个参数是表示要插入的元素
array.splice(0, 0, 6); // 在索引值为0的地方插入6
console.log(array); // [6, 1, 2, 3, 4]
// (3)、替换元素：第二个参数，表示我们要替换几个元素，第三个元素是用于替换前面的元素
array.splice(0, 2, 7); // 7替换掉从第一位开始的两个元素
console.log(array); // [7, 2, 3, 4]
（二）、合并数组的方法
/** 
 * 合并两个数组的方法：
 *  方法1、数组1.concat(数组2);
 *  方法2、[...数组1,...数组2];
*/ 
const array1 = [2,3];
const array2 = [1,2,3];
// 方法1
const finalArray1 = array1.concat(array2);
console.log(finalArray1); // [2, 3, 1, 2, 3]
// 方法2
const finalArray2 = [...array1,...array2];
console.log(finalArray2); // [2, 3, 1, 2, 3]
（三）、查找数组中元素的位置（索引值）：indexOf()
/**
 * 查找数组中元素的位置（索引值）
 * 语法: 数组.indexOf(待查找元素);
*/
const array = [1,3,2,3,2];
const index = array.indexOf(3);
console.log(index); // 1
（四）、数组排序：sort()、reverse()
/**
 * 排序
 * 1、顺序: 数组.sort();
 * 2、逆序: 数组.reverse();
*/ 
const array = [1,3,2,3,2];
// 顺序
array.sort();
console.log(array); // [1, 2, 2, 3, 3]
// 逆序
array.reverse();
console.log(array); // [3, 3, 2, 2, 1]

3、字典

// ["a","b","c"] => key: value  0: "a" 1: "b" 2: "c"

// 字典
let dic: { [key: string]: string } = {
    "name1": "王小虎",
    "name2": "李逍遥",
};
dic["name3"] = "令狐冲";
document.write(dic["name3"]); // 令狐冲

六、访问修饰符

在这里插入图片描述

  • 共有三个 👇🏻：放在 属性和方法（包括：成员属性、成员方法、构造方法、静态属性、静态方法） 前面，限定属性和方法的访问权限。【默认是public：前面什么也不加 等于 前面加public】
      1. public（公开的）：完全公开访问，类里的属性和方法在当前类、子类、外部均可访问；
      1. protected（受保护的）：类里的属性和方法在当前类、子类可访问，在外部不可访问；
      1. private（私有的）：类里的属性和方法在当前类可访问，在子类、外部均不可访问。
/** 以public为例 */

// 当前类 Person
class Person {
    // 成员属性【默认是public：前面什么也不加 等于 前面加public】
    name: string = "小猪";

    // 成员方法【默认是public：前面什么也不加 等于 前面加public】
    say() {
		document.write(this.name);
    }
}

// 子类 Student
class Student extends Person {
    constructor() {
        super();

        this.name = "乔治";
        this.say(); // 乔治
    }
}

// 外部
let a = new Person(); // 实例化对象
a.name = "佩奇";
a.say(); // 佩奇

new Student(); // 实例化对象

上一篇：TS-邂逅TS（一）

今日份TS学习到此结束啦 拜了个拜~

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

2020蓝桥杯真题单词分析 C语言/C++

2020蓝桥杯真题单词分析 C语言/C++

题目描述 小蓝正在学习一门神奇的语言&#xff0c;这门语言中的单词都是由小写英文字母组 成&#xff0c;有些单词很长&#xff0c;远远超过正常英文单词的长度。小蓝学了很长时间也记不住一些单词&#xff0c;他准备不再完全记忆这些单词&#xff0c;而是根据单词中哪个字母出…
阅读更多...
恭喜！龙蜥社区荣登 2022 科创中国“开源创新榜”

恭喜！龙蜥社区荣登 2022 科创中国“开源创新榜”

2 月 20 日&#xff0c;中国科协召开以“创新提振发展信心&#xff0c;科技激发产业活力”为主题的2023“科创中国”年度会议。会上&#xff0c;“科创中国”联合体理事长、中国工程院院士周济介绍了 2022 年系列榜单征集遴选情况&#xff0c;并与中国科协副主席、中国工程院院…
阅读更多...
音箱上8键触摸芯片绿芯GTC08L完美替换启攀微

音箱上8键触摸芯片绿芯GTC08L完美替换启攀微

由工采网代理提供的韩国GreenChip电容式触摸芯片-GTC08L是GreenTouch5CTM电容式触摸传感器系列之一&#xff1b;可以在发动机运行下进行8通道电容传感&#xff1b;对电磁兼容、电磁干扰、温湿度变化、电压干扰、温度漂移、湿度漂移等都有较强的抗干扰能力。不会对CS, RS,EFT&am…
阅读更多...
在vue3+ts的项目中，如何解决vant组件自带表单校验不生效?

在vue3+ts的项目中，如何解决vant组件自带表单校验不生效?

问题描述&#xff1a; 点击发送验证码后&#xff0c;为了让逻辑更加严谨&#xff0c;使用了vant组件自带的表单校验&#xff0c;进行二次校验&#xff0c;防止验证码发送成功后&#xff0c;登录手机号被二次修改&#xff0c;但根据官网描述cv之后不生效&#xff0c;甚至连获取…
阅读更多...
3年自动化测试，月薪1.2W，不敢跳槽，每天都很焦虑

3年自动化测试，月薪1.2W，不敢跳槽，每天都很焦虑

在我们的身边&#xff0c;存在一个普遍现象&#xff1a;很多人从事软件测试坎&#xff0c;不计其数&#xff0c;经历的心酸难与外人道也。可是技术确难以提升、止步不前&#xff0c;薪资也只能看着别人水涨船高&#xff0c;自己却没有什么起色。虽然在公司里属于不可缺少的一员…
阅读更多...
轮播图、阅读注册协议、网页时钟、随机点名、小米搜索框、轮播图点击切换——web APIs练习

轮播图、阅读注册协议、网页时钟、随机点名、小米搜索框、轮播图点击切换——web APIs练习

目录 一、获取元素&#xff08;DOM&#xff09; 1. 随机轮播图案例 2. 阅读注册协议&#xff08;定时器间歇函数的应用&#xff09; 3. 轮播图定时器版 4. 网页时钟 二、事件基础&#xff08;DOM&#xff09; 1. 随机点名案例 2. 轮播图点击切换&#xff08;重点&#…
阅读更多...
Python、Java、JavaScript、C、Go等编程语言如何实现“定时器”功能

Python、Java、JavaScript、C、Go等编程语言如何实现“定时器”功能

这是CSDN平台2月推出的一个活动(活动链接为&#xff1a;CSDN 征文活动)&#xff0c;聊聊时间的话题&#xff0c;小编我也不知道有什么好聊的时间的话题&#xff0c;看了CSDN给出的部分话题上&#xff0c;有一个这样的话题&#xff0c;如何用各种编程语言实现“定时器”&#xf…
阅读更多...
初识SpringSpring核心容器

初识SpringSpring核心容器

初识Spring Spring生态&#xff1a; Spring FrameWork发展&#xff1a; Spring FrameWork系统架构&#xff1a; Spring FrameWork学习路线&#xff1a; Spring核心概念 Ioc DI 实现IoC 1、导入Spring坐标 2、定义Spring管理的类&#xff08;接口&#xff09; 3、创建spring配…
阅读更多...
tensorflow 学习笔记（三）：神经网络八股

tensorflow 学习笔记（三）：神经网络八股

本节内容&#xff1a; 前两节使用 Tensorflow2 的原生代码大叫神经网络。本节使用 keras 搭建神经网络&#xff08;八股&#xff1a;六步法&#xff0c;有 Sequential 和 class 两种&#xff09;。 文章目录一、搭建网络八股 sequential1.1、keras 介绍1.2、六步法搭建 keras …
阅读更多...
Mac搭建appium+python+Android自动化环境

Mac搭建appium+python+Android自动化环境

mac搭建appium+python+Android自动化环境 一、安装jdk二、安装Android-SDK三、配置 Android 环境四、安装Appium五、打开appium一、安装jdk 自己百度 二、安装Android-SDK 1）下载地址： http://www.android-studio.org/index.php/download 下载mac版本的dmg 2) 下载完成后…
阅读更多...
HTTPS：让数据传输更安全

HTTPS：让数据传输更安全

鉴于 HTTP 的明文传输使得传输过程毫无安全性可言&#xff0c;且制约了网上购物、在线转账等一系列场景应用&#xff0c;于是引入加密方案。 从 HTTP 协议栈层面来看&#xff0c;我们可以在 TCP 和 HTTP 之间插入一个安全层&#xff0c;所有经过安全层的数据都会被加密或者解密…
阅读更多...
关于虚拟数字人你想知道的都在这里

关于虚拟数字人你想知道的都在这里

2022年底&#xff0c;微软旗下的人工智能实验室Open AI发布的对话式大型语言模型ChatGPT聊天机器人一夜蹿红&#xff0c;5天用户量超百万&#xff0c;在各大中外媒体平台掀起了一阵热潮。也带火了人工智能相关产业&#xff0c;AI虚拟数字人就是其中之一&#xff0c;一个随着元宇…
阅读更多...
损失函数与反向传播

损失函数与反向传播

一、损失函数计算实际输出和目标之间的差距为我们更新输出提供一定的依据&#xff08;反向传播&#xff09;1.nn.L1Lossimport torch from torch.nn import L1Loss inputs torch.tensor([1,2,3],dtypetorch.float) targets torch.tensor([1,2,5],dtypetorch.float) # reshape…
阅读更多...
Docker之路（4.Docker命令大全、docker镜像命令、docker容器命令以及docker常用命令）

Docker之路（4.Docker命令大全、docker镜像命令、docker容器命令以及docker常用命令）

1.帮助命令 1.1 docker version(显示docker的版本信息) sudo docker version1.2 docker info(显示docker的系统信息&#xff0c;包括镜像和容器数量) sudo docker info1.3 --help (万能命令) sudo 命令 --help1。4 帮助文档的地址 https://docs.docker.com/engine/referenc…
阅读更多...
纯手动搭建hadoop3.x集群记录001_搭建虚拟机_调通网络_配置静态IP_安装JDK---大数据之Hadoop3.x工作笔记0162

纯手动搭建hadoop3.x集群记录001_搭建虚拟机_调通网络_配置静态IP_安装JDK---大数据之Hadoop3.x工作笔记0162

1.首先准备机器,172.19.126.115 172.19.126.116 172.19.126.117 我准备了3台 Windows机器 2.然后我打算在Windows机器上使用虚拟机,搭建3台Centos虚拟机来进行安装hadoop 3.这里我们的3台windows机器中的,3台linux虚拟机也使用了3个IP,分别是 172.19.126.120 172.19.126.1…
阅读更多...
自然语言处理(NLP)之跳字(元)模型＜skip-gram＞与连续词袋模型＜continuous bag of words＞

自然语言处理(NLP)之跳字(元)模型＜skip-gram＞与连续词袋模型＜continuous bag of words＞

自然语言处理(Natural Language Processing, NLP)是AI里的一个非常重要的领域&#xff0c;比如现在很火爆的ChatGPT&#xff0c;首先就需要很好的理解输入内容的意思才能够做出合理的回复。自然语言处理应用非常广泛&#xff0c;比如机器翻译、问题回答、文本语义对比、语音识别…
阅读更多...
整合Swagger2

整合Swagger2

整合Swagger2 1、Swagger介绍 前后端分离开发模式中&#xff0c;api文档是最好的沟通方式。 Swagger 是一个规范和完整的框架&#xff0c;用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。 1、及时性 (接口变更后&#xff0c;能够及时准确地通知相关前后端开发人员…
阅读更多...
Java企业开发学习笔记（4）采用Java配置类管理Bean

Java企业开发学习笔记（4）采用Java配置类管理Bean

该文章主要为完成实训任务&#xff0c;详细实现过程及结果见【http://t.csdn.cn/1fwEO】 文章目录一、采用Java配置类管理Bean1.1 创建子包1.2 创建杀龙任务类1.3 创建勇敢骑士类1.4 创建Spring配置类1.5 创建测试类1.6 运行测试类二、课堂练习2.1 创建救美任务类和救美骑士类2…
阅读更多...
BERT模型系列大全解读

BERT模型系列大全解读

前言 本文讲解的BERT系列模型主要是自编码语言模型-AE LM&#xff08;AutoEncoder Language Model&#xff09;&#xff1a;通过在输入X中随机掩码&#xff08;mask&#xff09;一部分单词&#xff0c;然后预训练的主要任务之一就是根据上下文单词来预测这些单词&#xff0c;从…
阅读更多...
阅读笔记7——Focal Loss

阅读笔记7——Focal Loss

一、提出背景 当前一阶的物体检测算法&#xff0c;如SSD和YOLO等虽然实现了实时的速度&#xff0c;但精度始终无法与两阶的Faster RCNN相比。是什么阻碍了一阶算法的高精度呢&#xff1f;何凯明等人将其归咎于正、负样本的不平衡&#xff0c;并基于此提出了新的损失函数Focal L…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023