2023-02-17 学习记录--TS-邂逅TS（一）

news2024/12/26 14:01:20

TS-邂逅TS（一）

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

一、TypeScript在线编译器

https://www.typescriptlang.org/play/

二、类型

请添加图片描述

1、普通类型

  1. number（数值型，eg. 2）
  2. string（字符串型，eg. ‘嘻嘻’）
  3. boolean（布尔型，true / false）
  4. null
  5. undefined
  6. any（任何型，涵盖所有类型）
  7. array（数组型）
    • number[]（是一组含number的数组，eg. const a: number[] = [1,2,3,4,5];）
    • string[]（是一组含string的数组，eg. const a: string[] = ['嘻嘻','嘿嘿','哈哈'];）
    • 。。。（举一反三 biu~）

2、联合类型

类型直接用 | 连接

  • eg1. let num: number | string = 0;
    表示num既可以是数值型number，也可以是字符串型string。
  • eg2. let num: (number | string)[] = [0, ‘嘻嘻’];
    表示num是一组含数值型number 或 字符串型string的数组。

3、枚举（enum）

即 自己定义一个属于自己的类型。enum n.枚举，列表型别。

在这里插入图片描述

// 枚举（自定义一个颜色类型）
// 枚举里的类型是number
enum Color {
  red, // 类型是number，默认值是0
  blue, // 类型是number，默认值是1
  pink, // 类型是number，默认值是2
  green, // 类型是number，默认值是3
}

// 自定义一个类型是Color的属性 color
const color: Color = Color.blue; // 属性是color，类型是Color，默认属性值是Color.blue（0）

4、修改枚举里的默认值

// 枚举（自定义一个颜色类型）
// 枚举里的类型是number
enum Color {
  red, // 类型是number，默认值是0
  blue, // 类型是number，默认值是1
  pink, // 类型是number，默认值是2
  green, // 类型是number，默认值是3
}

// 修改枚举里的默认值
enum Color {
  red = 2, // 类型是number，默认值变为2
  blue, // 类型是number，默认值变为3
  pink =11, // 类型是number，默认值变为11
  green, // 类型是number，默认值变为12
}

5、定义函数返回值的类型

若要定义函数返回值的类型，可直接在函数名后面加上 : 类型。

在这里插入图片描述

// 定义函数返回值的类型为字符串型string
function add(num1: number, num2: number): string {
	const num = num1 + num2;
	return num + "";
}

const result = add(2,3);
document.write(result); // 5
document.write(typeof result); // string

document.write()里面只能放字符串型。

三、类型验证（typeof）

  • 语法 🍊：typeof 变量/常量
  • 作用 🍉：验证该变量/常量的类型。
  • 举例 🍓：
    • let x = 10; // 虽没有给定类型，但会根据赋值结果10默认定义类型为number
      document.write(typeof x); // number

四、类型别名（type）

  • 语法 🍊：type 类型别名 = 类型;
  • 作用 🍉：给类型取一个别名。
  • 举例 🍓：
    • type NewNumber = number; // 给数值型number取一个别名NewNumber
      let num: NewNumber = 3;
      document.write(typeof num); // number

五、num++ 和 ++num

  • num++：先使用，再自增。
  • ++num：先自增，再使用。
    在这里插入图片描述
/** num++ */ 
let num = 10;
num++;
// 先使用，再自增
document.write(num++ + "");  // 11【注意是11，而不是12哦】
document.write(num++ + "");  // 12

/** ++num */ 
let num = 10;
++num;
// 先自增，再使用
document.write(++num + "");  // 12
document.write(++num + "");  // 13

不管什么类型，加个+ ""后就变成字符串型了。

六、for...of 和 for...in

在这里插入图片描述

  1. for...of 可遍历数组，不可遍历对象；
  2. for...in 既可遍历数组，也可遍历对象。
/** 一、for...of 可遍历数组，不可遍历对象 */
// 1、for...of 遍历数组
const names: string[] = ['小','中','大'];
// 遍历数组里的每一项内容，遍历一次后 把数组里的值赋值给currName，循环
for(let currName of names) {
  document.write(currName); // 小 中 大
}


/** 二、for...in 既可遍历数组，也可遍历对象 */
// 1、for...in 遍历数组
const names1: string[] = ['小','中','大'];
// 遍历数组里的每一项内容，遍历一次后 把索引赋值给i，对应值为names1[i]，循环
for(let i in names1) {
  document.write(i); // 0 1 2
  document.write(names1[i]); // 小 中 大
}

// 2、for...in 遍历对象
const names2: any = {
  0: '小',
  1: '中',
  2: '大',
};
// 遍历对象里的每一项内容，遍历一次后 把索引赋值给i，对应值为names2[i]，循环
for(let i in names2) {
  document.write(i); // 0 1 2
  document.write(names2[i]); // 小 中 大
}

七、类

请添加图片描述

类里面含有属性和方法。

1、成员属性和成员方法

成员属性和成员方法是面向对象的属性和方法，调用时通过对象来调用。

// 面向对象的思想
// 类：人   对象：小猪佩奇 乔治

/** 类 Person */
class Person {
  /** 成员属性 */
  name: string = "默认名"; // 姓名
  age: number = 0; // 年龄

  /** 成员方法 */
  say() {
    // this指调用我这个方法的对象本身
    document.write('大家好，我叫'+this.name+'，今年'+this.age+'岁啦！');
  }
}

/** 实例化对象 new一下 */
let a = new Person();
a.name = "小猪佩奇";
a.age = 4;
a.say(); // 大家好，我叫小猪佩奇，今年4岁啦！

let b = new Person();
b.name = "乔治";
b.age = 2;
b.say(); // 大家好，我叫乔治，今年2岁啦！

2、构造方法（constructor）

也可理解为初始化方法：

  • 类被实例化成对象(new一下)时，第一个自动调用的方法。

在这里插入图片描述

初始化滴时候就对name和age赋值，而不是通过 比如 a.name="小猪佩奇"、a.age=2 来赋值，实现代码精简化。

在这里插入图片描述

// 面向对象的思想
// 类：人   对象：小猪佩奇 乔治

/** 类 Person */ 
class Person {
  /** 成员属性 */
  name: string = "默认名";
  age: number = 0;

  // 构造方法/初始化方法（这个类被实例化成对象(new一下)时，第一个自动调用的方法）
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  /** 成员方法 */
  say() {
    // this指调用我这个方法的对象本身
    document.write('大家好，我叫'+this.name+'，今年'+this.age+'岁啦！');
  }
}

/** 实例化对象 */
let a = new Person("小猪佩奇", 4);
// a.name = "小猪佩奇";
// a.age = 4;
a.say(); // 大家好，我叫小猪佩奇，今年4岁啦！

let b = new Person("乔治", 2);
// a.name = "乔治";
// a.age = 2;
b.say(); // 大家好，我叫乔治，今年2岁啦！

3、静态属性和静态方法（static）

静态属性和静态方法是面向类的属性和方法，调用时通过类来调用。

  • 用法：在成员属性和成员方法前加个static。
// 面向对象的思想
// 类：人   对象：小猪佩奇 乔治

/** 类 Person */ 
class Person {
  /** 静态属性 */
  static des: string = "这是一个Person类";
  /** 成员属性 */
  name: string = "默认名"; // 姓名
  age: number = 0; // 年龄

  // 构造方法/初始化方法（这个类被实例化成对象(new一下)时，第一个自动调用的方法）
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  /** 静态方法 */
  static test() {

  }

  /** 成员方法 */
  say() {
    // this指调用我这个方法的对象本身
    document.write('大家好，我叫'+this.name+'，今年'+this.age+'岁啦！');
  }
}

// 静态属性和静态方法是面向类的属性和方法，调用时通过类来调用
Person.des = "我叫Person类";
Person.test();

/** 实例化对象 */
let a = new Person("小猪佩奇", 4);
// 成员属性和成员方法是面向对象的属性和方法，调用时通过对象来调用
// a.name = "小猪佩奇";
// a.age = 4;
a.say(); // 大家好，我叫小猪佩奇，今年4岁啦！

let b = new Person("乔治", 2);
// 成员属性和成员方法是面向对象的属性和方法，调用时通过对象来调用
// a.name = "乔治";
// a.age = 2;
b.say(); // 大家好，我叫乔治，今年2岁啦！

八、类继承（extends）

在这里插入图片描述

1、extends（继承）

  • 假如有父类Person和子类Student，想实现：子类既含有父类的属性和方法，又含有自己的属性和方法，详情可见下方代码。

2、super.父类的方法（调用父类方法）

  • 当子类和父类都有方法名为say()时，子类方法say()里的内容会覆盖掉父类方法say()里的内容，But，我们想实现，在子类方法say()里既调用父类方法say()里的内容，又调用自己的内容，就可通过super.父类的方法来调用父类的方法哦~，详情可见下方代码
// 继承
/** 父类 Person */ 
class Person {
  /** 成员属性 */
  name: string = ""; // 姓名

  /** 成员方法 */
  say() {
    // this指调用我这个方法的对象本身
    document.write('我是人类，叫做' + this.name);
  }
}

/** 子类 Student（继承父类 Person）*/
class Student extends Person {
  /** 成员属性 */
  num: number = 0; // 学号
  score: number = 0; // 分数

  /** 成员方法 */
  // 与父类方法名相同时会覆盖父类方法
  say() {
    super.say(); // 若不想把父类方法完全覆盖，也想调用父类方法，就用`super.`调用父类方法
    // this指调用我这个方法的对象本身
    document.write('我是学生，叫做' + this.name);
  }
}

/** 实例化对象 */
let a = new Student();
a.name = "嘻嘻"; // name是父类Person里的属性
a.say(); // 我是人类，叫做嘻嘻我是学生，叫做嘻嘻【因为子类的say()方法里加了super.say()，所以既调用了父类的say()方法，也调用了子类的say()方法】

九、抽象类（abstract class）

请添加图片描述

1、抽象类：本身不能被实例化为对象，可以被继承。

  • 用法：在类前面加个abstract。

2、抽象方法：在抽象类里不允许被实现，需要其子类去实现，即 谁来继承这个抽象类，就必须把这个抽象方法实现。

  • 用法：在未实现的成员方法前面加个abstract，比如：abstract say()。
/** 抽象类 Person */ 
abstract class Person {
  // 成员属性
  name: string = ""; // 姓名

  // 成员方法
  run() {

  }

  // 抽象方法（在抽象类里不允许被实现，需要其子类去实现，即 谁来继承这个抽象类，就必须把这个抽象方法实现）
  abstract say(): any;
}

/** 子类 Student（继承抽象类 Person）*/
class Student extends Person {
  // 必须实现抽象类Person里的抽象方法say()
  say() {

  }
}

//【补充】父类指针可以指向子类对象
let a: Person = new Student(); 
a.say();

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

请添加图片描述

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

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

相关文章

零信任-360连接云介绍(9)

零信任-360连接云介绍(9)

​360零信任介绍 360零信任又称360连接云安全访问平台(下文简称为：360连接云)，360连接云，是360基于零信任安全理念，以身份为基础、动态访问控制为核心打造的安全访问平台。 通过收缩业务暴露面、自适应增强身份认证、终端持续检…
阅读更多...
操作系统（day11）--快表，两级页表

操作系统（day11）--快表，两级页表

具有快表的地址变换机构 时间局限性：会有大量连续的指令需要访问同一个内存块的数据的情况（程序中的循环） 空间局限性：一旦程序访问了某个存储单元，在不久之后，其附近的存储单元也很有可能被访问。&#xf…
阅读更多...
MySQL（一）服务器连接 库的基本操作

MySQL（一）服务器连接 库的基本操作

目录 一、连接服务器 二、简单使用 三、校验规则 条件筛选 where 进行order排序 三、查看数据库 使用 show databases；（注意分号和最后一个s） 显示创建数据库的详情信息：使用show create database test2; 四、修改数据库 五…
阅读更多...
干货 | 有哪些安慰剂按钮的设计？

干货 | 有哪些安慰剂按钮的设计？

仔细观察我们的生活，你会发现处处都是安慰剂按钮，ATM的点钞声、开启空调的呼呼声，这些都对用户心里产生了有意的引导作用，当你打开了空调按钮，先播放声音会让你感觉你按下的按钮起到了作用。 我们的大脑不喜欢杂乱无章…
阅读更多...
Markdown简单语法总结

Markdown简单语法总结

前言在好多博客的编写中会遇到Markdown标记语言，所以学习了一下相关语法。之前虽然也了解过，但是并不深刻。在这里进行一个简单的总结。1、标题标题可以使用大标题和中标题、一到六级标题两种不同方式。对于大标题，直接在标题文字下方输入即可…
阅读更多...
HTML中嵌入B站视频

HTML中嵌入B站视频

HTML中嵌入B站视频 在网页中实现一个HTML播放器需要先从b站获取视频嵌入代码, 以前嵌入代码可以从视频分享那里拿到, 现在好像不行了 必须是自己投稿的视频, 从投稿管理页面才能找到 复制嵌入代码 建一个.html文件, 放入下面代码 <!DOCTYPE html> <html><head…
阅读更多...
SpringCloud - 入门

SpringCloud - 入门

目录 服务架构演变 单体架构 分布式架构 分布式架构要考虑的问题 微服务 初步认识 案例Demo 服务拆分注意事项 服务拆分示例 服务调用 服务架构演变 单体架构 将业务的所有功能集中在一个项目中开发&#xff0c;打成一个包部署优点&#xff1a; 架构简单部署成本低缺…
阅读更多...
论文解读 | [CVPR2020] ContourNet：向精确的任意形状场景文本检测迈出进一步

论文解读 | [CVPR2020] ContourNet：向精确的任意形状场景文本检测迈出进一步

目录 1 研究背景和目的 1.1 主要贡献&#xff1a; 1.2 两个挑战&#xff1a; 2 ContourNet 3 方法论 3.1 Adaptive-RPN 3.2 LOTM 3.3 点重定位算法 4 实验和结果 论文地址&#xff1a;ContourNet: Taking a Further Step toward Accurate Arbitrary-shaped Scene Tex…
阅读更多...
第八章 - 数据分组（ group by , having , select语句顺序）

第八章 - 数据分组（ group by , having , select语句顺序）

第八章 - 数据分组 group by数据分组过滤分组 having分组排序groub by语句的一些规定select语句顺序数据分组 在使用group by进行分组时&#xff0c;一般都会配合聚合函数一起使用&#xff0c;实现统计数据的功能。比如下面例子&#xff0c;需要按性别计算人数。按性别进行分组…
阅读更多...
内嵌于球的等边三棱柱

内嵌于球的等边三棱柱

( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 做一个网络让输入只有3个节点&#xff0c;每个训练集里有两张图片&#xff0c;让B的训练集全为0&#xff0c;排列组合A&#xff0c;观察迭代次数平均值的变化。共完成了64组&#xff0c;但只有12组不同的迭代次数。 差值结构 A-B 迭代次…
阅读更多...
【银河麒麟V10操作系统】修改屏幕分辨率的方法

【银河麒麟V10操作系统】修改屏幕分辨率的方法

文章目录前言系统概述方法1&#xff1a;使用命令行修改方法2&#xff1a;写文件修改方法3&#xff1a;界面端修改的方法前言 本文记录了银河麒麟V10系统修改分辨率的方法。 使用命令行修改写文件修改界面端修改的方法 系统概述 方法1&#xff1a;使用命令行修改 打开终端&am…
阅读更多...
零基础学软件测试可行么

零基础学软件测试可行么

当然是可行的&#xff0c;软件测试是一门对于零基础小白非常友好的一门语言~不少小伙伴在选择IT行业的时候都会从软件测试入手。在开始学习之前&#xff0c;首先需要了解软件测试到底是什么&#xff0c;包括哪些知识点&#xff0c;最后的才是找一个靠谱的学习路线去学习。 其实…
阅读更多...
用Python实现一个电影订票系统

用Python实现一个电影订票系统

一、效果展示通过Python实现一个电影订票系统&#xff0c;效果如下所示&#xff1a;二、整体结构图三、代码分解3.1 infos.py一部电影的详细信息适合用 字典 结构来存储&#xff0c;我们可以给字典里添加多个键值对来保存电影的名称、座位表和宣传时用的字符画&#xff0c;比如…
阅读更多...
学自动化测试可以用这几个练手项目

学自动化测试可以用这几个练手项目

练手项目的业务逻辑比较简单&#xff0c;只适合练手&#xff0c;不能代替真实项目。 学习自动化测试最难的是没有合适的项目练习。 测试本身既要讲究科学&#xff0c;又有艺术成分&#xff0c;单单学几个 api 的调用很难应付工作中具体的问题。 你得知道什么场景下需要添加显…
阅读更多...
Webpack（应用二：HtmlWebpackPlugin）

Webpack（应用二：HtmlWebpackPlugin）

上一文章介绍了Webpack的基本使用。 这章介绍webpack的HtmlWebpackPlugin&#xff0c;也就是上一章节遗留每次打包后&#xff0c;html都得重新链接打包地址名称&#xff0c;现在通过HtmlWebpackPlugin来实现一起打包。 提示&#xff1a;没有学习上一章的小伙伴&#xff0c;可以…
阅读更多...
ZenBuster：一款功能强大的多线程跨平台URL枚举工具

ZenBuster：一款功能强大的多线程跨平台URL枚举工具

关于ZenBuster ZenBuster是一款功能强大的多线程跨平台URL枚举工具&#xff0c;该工具基于Python开发&#xff0c;同时还具备暴力破解功能。 该工具适用于安全专业人员&#xff0c;可以在渗透测试或CTF比赛中为广大研究人员提供帮助&#xff0c;并收集和目标相关的各种信息。…
阅读更多...
全网多种方法分析解决HTTP Status 404资源未找到的错误，TCP的3次握手，dns域名解析，发起http请求以及cookie和session的区别

全网多种方法分析解决HTTP Status 404资源未找到的错误，TCP的3次握手，dns域名解析，发起http请求以及cookie和session的区别

文章目录1. 文章引言2. 简述URL3. http完整请求3.1 DNS域名解析3.2 TCP的3次握手3.3 发起http请求3.4 浏览器解析html代码3.5 浏览器对页面进行渲染呈现给用户4. 解决404错误的方法5. 补充知识点5.1 cookie和session的区别5.2 ChatGPT的介绍1. 文章引言 正赶上最近ChatGPT很火…
阅读更多...
将springboot项目生成可依赖的jar，并引入到项目中

将springboot项目生成可依赖的jar，并引入到项目中

1、将springboot项目生成可依赖的jar包的方法 SpringBoot项目默认打包的是可运行jar包&#xff0c;也可以打包成不可运行的jar包。 能打成可运行的jar包是因为&#xff0c;Spring Boot 项目引入了 spring-boot-maven-plugin 依赖包。 spring-boot-maven-plugin具有repackage …
阅读更多...
【自学Linux】 Linux文件目录结构

【自学Linux】 Linux文件目录结构

Linux文件目录结构 Linux文件目录结构教程 在 Linux 中&#xff0c;有一个很经典的说法&#xff0c;叫做一切皆文件&#xff0c;因此&#xff0c;我们在系统学习 Linux 之前&#xff0c;首先要了解 Linux 的文件目录结构。Linux 主要的目录有三大类&#xff0c;即根目录(/)&a…
阅读更多...
火山引擎 DataTester：A/B 测试，让企业摆脱广告投放“乱烧钱”

火山引擎 DataTester：A/B 测试，让企业摆脱广告投放“乱烧钱”

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 在广告投放的场景下&#xff0c;一线广告优化师通常会创建多个计划&#xff0c;去测试不同的广告素材效果。这套方法看似科学&#xff0c;实际上却存在诸多问题&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023