笔记标题:青训营笔记|[深入浅出TypeScript|青训笔记]

用户5781195829555
99 阅读7分钟

深入浅出TypeScript

课程大纲

1683535854243.png

为什么要学习Typescript?

什么是Typescript

TypeScript是微软公司开发的一种开源编程语言。它是一种超集，代码可以与JavaScript兼容，扩展了JavaScript原始的语法和数据类型，使得开发人员可以编写清晰、可维护的大型应用程序。TypeScript具备静态类型检查、面向对象编程、模块化、异步编程等特性，并且可编译生成标准的JavaScript代码在任何JavaScript引擎中运行。TypeScript可以在前端、后端等多种场景中使用，一些知名的项目如Angular、Vue.js、Egg.js等也是使用TypeScript开发的。

TypeScript的特点包括：

  1. 静态类型检查
  2. 代码可读性高
  3. 包含了JavaScript的所有特性，并且向后兼容
  4. 引入了接口
  5. 提供了命名空间
  6. 支持装饰器等特性
  7. 总之，TypeScript为JavaScript的开发者提供了更好的类型检查和对大型项目的支持，使得代码更易于维护和协作。

TypeScript VS Javascript

1683535996997.png

TypeScript VS JavaScript

  1. 类型支持：TypeScript是一种类型化的编程语言，支持类型检查，并且可以帮助检测一些常见的类型错误。JavaScript是一种动态类型的编程语言，不支持静态类型检查。
  2. 强类型：TypeScript是强类型语言，即变量一旦被声明为一个类型，就不能赋另一种类型的值了。JavaScript是弱类型语言，变量类型可以随时更改。
  3. 面向对象编程：TypeScript支持面向对象编程的特性，如类、接口、继承、泛型、命名空间等，而JavaScript是基于原型的面向对象编程语言。
  4. 编译：TypeScript需要通过编译将TypeScript代码转换为JavaScript代码运行。而JavaScript可以直接在浏览器中运行。 5.社区支持：TypeScript是由微软维护和支持的，并且在开发人员中越来越受欢迎。相比之下，JavaScript有更大的社区支持，从浏览器和Node.js的原生支持到广泛的第三方库和框架。

TypeScript带来了什么

1683536272807.png

TypeScript推荐

[Awesome Typescript]GitHub - dzharii/awesome-typescript: A collection of awesome TypeScript resources for client-side and server-side development. Write your awesome JavaScript in TypeScript)TS开源教程及应用

[Typescript Playground](TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript (typescriptlang.org)): TS到JS在线编译

TS基础-基础类型

  1. boolean、number、string(需要注意的是，在TypeScript中，变量的类型一旦被确定后就不能再改变，如果赋值给变量的类型与之前定义的类型不匹配，编译器会报错。)
1.  布尔类型：使用`boolean`表示布尔类型，它只有两个值：`true`和`false`。
let isDone: boolean = false;

2.  数字类型：使用`number`表示数字类型，可以包括整数和浮点数。
let decimal: number = 6; 
let hex: number = 0xf00d; 
let binary: number = 0b1010;
let octal: number = 0o744;

3.  字符串类型：使用`string`表示字符串类型，可以包括单引号、双引号和反引号三种形式。

let name: string = 'TypeScript'; let sentence: string = `Hello, my name is ${name}.`;
  1. 枚举enum
在这个示例中，我们定义了一个名为 `DayOfWeek` 的枚举类型，并为每个星期日到星期六赋予了名称。需要注意的是，和C++中的枚举类型不同，TypeScript中的枚举类型默认情况下是从0开始递增的，即 `Sunday = 0`，`Monday = 1`，以此类推。如果需要为枚举值指定其他整数值，可以显式地赋值，

enum DayOfWeek { 
Sunday, 
Monday,
Tuesday,
Wednesday, 
Thursday,
Friday,
Saturday } let today: DayOfWeek = DayOfWeek.Sunday; console.log(today); // 0

enum DayOfWeek { Sunday = 1, 
Monday, 
Tuesday,
Wednesday, 
Thursday,
Friday, 
Saturday } let today: DayOfWeek = DayOfWeek.Sunday; console.log(today); // 1
  1. any、unknown、void
`any` 类型表示任意类型，它取消了类型检查，让变量可以存储任何类型的值。例如：

let a: any = 'string'; 
a = 10;
a = true;

`unknown` 类型表示未知类型，它和 `any` 一样允许变量存储任何类型的值，但是它在使用前需要经过类型检查和类型推导，只有确定变量的确切类型后才能进行操作。例如：

let b: unknown = 'string'; 
let c = b as string;
console.log(c.toUpperCase());


`void` 类型表示没有返回值的函数，也可以用来表示变量没有值。例如：

function logMessage(message: string): void { 
console.log(message); } let d: void = undefined;
  1. never
类型表示那些永远不会发生的值。通常在那些总是会抛出
异常或者无法正常执行到终点的函数返回类型中使用 `never`。
  1. 数组类型0
实际上它是一种包含单一值 `0` 的类型。
通常情况下，整数类型 `0` 通常用于表示某种标志或者选项，
它只有一个有效的值 `0`
  1. 元组类型tuple
元组类型 `tuple` 是 TypeScript 中用来表示有限数量元素的数组类型，
它允许你显式地声明每个元素的类型和数量。在 TypeScript 中，元组
类型的多个元素可以是不同的类型。

TS基础-函数类型

  1. 定义：TS定义函数类型时要定义输入参数类型和输出类型
  2. 输入参数：参数支持可选参数和默认参数
  3. 输出参数：输出可以自动推断，没有返回值时，默认为Vod类型
  4. 函数重载：名称相同但参数不同，可以通过重载支持多种类型

TS基础-interface

定义:接口是为了定义对象类型 特点:

  • 可选属性：？
  • 只读属性：readonly
  • 可以描述函数类型
  • 可以描述自定义属性

总结:接口非常灵活 duck typing

TS基础-类

定义:写法和JS差不多，增加了一些定义 特点:

  • 增加了public(默认)、private（自由）、protecte(受保护)修饰符

抽象类:

  • 只能被继承，不能被实例化
  • 作为基类，抽象方法必须被子类实现
  • interface约束类，使用implements关键字

TS进阶-高级类型

  1. 联合类型 |
  2. 交叉类型 &
  3. 类型断言
  4. 类型别名 (type VS interface)
  • 定义:给类型起个别名
  • 相同点：
  1. 都可以定义对象或函数
  2. 都允许继承 差异点：
  3. interface是TS用来定义对象，type是用来定义别名方便使用；
  4. type可以定义基本类型，interface不行；
  5. interface可以合并重复声明，type不行；

interface是接口概念对象 而type类型别名概念，对各个类型别名定义

TS进阶-泛型-什么时候需要泛型

官方定义 软件工程中，我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型， 这在创建大型系统时为你提供了十分灵活的功能，

在像C#和Java这样的语言中，可以使用泛型来创建可重用的组件， 一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

1683538906039.png

思考:需要有一个类型解决输入输出可关联的问题

interface 用于定义对象的类型，可以指定对象的参数及返回值具体的类型。通过约束输入参数的类型和输出参数的类型，可以使得输入与输出相关联。

interface InputData { value: string; count: number; }
interface OutputData { result: boolean; message: string; }
 function processData(data: InputData): OutputData { 
 let result: boolean = data.value.length > data.count;
  let message: string = result ? "超长" : "未超长"; 
  return { result, message }; }

TS进阶-泛型-基本使用

基本定义: 泛型的语法是<>里面写类型参数，般用T表示；

使用时有两种方法指定类型：

1.定义要使用的类型

2.通过TS类型推断，自动推导类型

泛型的作用是临时占位，之后通过传来的类型进行推导；

1683541599235.png

TS进阶-泛型工具类型-基础操作符

  • typeof:获取类型
  • keyof::获取所有键
  • in:遍历枚举类型
  • T[K]:索引访问
  • extends:泛型约束

1683541550756.png

TS进阶-泛型工具类型-常用工具类型

  • Partial<T>:将类型属性变为可选
  • Required.<T>:将类型属性变为必选
  • Readonly<T>:将类型属性变为只读
  • Pick、Record..

1683539449753.png

TypeScript

  1. declare:三方库需要类型声明文件
  2. .d.ts:声明文件定义
  3. @types:三方库TS类型包
  4. tsconfig..json:定义TS的配置

TS实战-泛型约束后端接口类型

1683540123354.png

课程总结

1683539908509.png

avatar
文章
阅读
粉丝