TypeScript核心

认识TypeScript

1. 什么是TS

TypeScript 是具有类型语法的 JavaScript，是一门强类型的编程语言
在这里插入图片描述

2. 带来的好处

1- 静态类型检查，提前发现代码错误

在这里插入图片描述

在这里插入图片描述

2- 良好的代码提示，提升开发效率

在这里插入图片描述

3. 什么时候用

以下是来自社区的一些建议：

  1. 你做的是一个大型的应用吗？
  2. 是否是团队协作开发模式？
  3. 是否在编写通用的代码库？（Vue3 / ElementPlus…）

结论：TypeScript不是万能的，技术的选型不能脱离具体的业务和应用场景，TS更加适合用来开发中大型的项目，或者是通用的JS代码库，再或者是团队协作开发的场景

搭建TS编译环境

1. 为什么需要编译环境

TypeScript编写的代码是无法直接在js引擎（浏览器/NodeJs）中运行的，最终还需要经过编译变成js代码才可以正常运行
在这里插入图片描述

带来的好处：既可以再开发时使用TS编写代码享受类型带来的好处，同时保证实际运行的还是JS代码

2. 搭建手动编译环境

  1. 全局安装 typescript 包（编译引擎）-> 注册 tsc 命令
    npm install -g typescript
  2. 新增 hello.ts 文件， 执行 tsc hello.ts 命令生成hello.js文件
  3. 执行 node hello.js 运行js文件查看效果

3. 搭建工程化下的自动编译环境

基于工程化的TS开发模式（webpack / vite），TS的编译环境已经内置了，无需手动安装配置，通过以下命令即可创建一个最基础的自动化的TS编译环境

npm create vite@latest   ts-pro  -- --template vanilla-ts

命令说明：

  1. npm create vite[@latest 使用最新版本的vite创建项目
  2. ts-pro 项目名称
  3. – --template vanilla-ts 创建项目使用的模板为原生ts模板

类型注解

1. TS类型注解是什么

概念：类型注解指的是给变量添加类型约束，使变量只能被赋值为约定好的类型, 同时可以有相关的类型提示

在这里插入图片描述

说明：:string 就是类型注解， 约束变量 message 只能被赋值为string 类型, 同时可以有string类型的相关提示

2. TS支持的常用类型注解

JS已有类型

  1. 简单类型
    number string boolean null undefined
  2. 复杂类型
    数组 函数
    TS新增类型
    联合类型、类型别名、接口（interface）、字面量类型、泛型、枚举、void、any等

3. 简单类型如何进行类型注解

简单类型的注解完全按照 JS的类型（全小写的格式）来书写即可

在这里插入图片描述

数组类型注解

1. 有什么用

变量被注解为数组类型之后，有俩点好处：
1- 不仅可以限制变量类型为数组而且可以限制数组成员的类型
在这里插入图片描述

2- 编码时不仅可以提示数组的属性和方法而且可以提示成员的属性和方法
在这里插入图片描述

2. 如何注解数组类型

使用数据类型对变量进行类型注解有俩种语法

在这里插入图片描述

3. 思考题

有一个变量arr, 要求用俩种方式添加类型注解，使其只能赋值一个成员都是字符串的数组?

联合类型和别名类型

1. 联合类型

概念：将多个类型合并为一个类型对变量进行注解
需求：如何注解数组类型可以让数组中既可以存放string类型的成员也可以存放number类型的成员？
在这里插入图片描述

说明：string | number 表示arr3中的成员既可以是string类型也可以是number类型

2. 类型别名

概念：通过 type关键词 给写起来较复杂的类型起一个其它的名字，用来简化和复用类型
在这里插入图片描述

说明：type 类型别名 = 具体类型 其中类型别名的命名采用规范的大驼峰格式

3. 思考题

有一个变量foo,要求添加类型注解，使其既可以赋值为number类型，也可以赋值为成员都是字符串的数组?

函数类型

1. 基础使用

概念：函数类型是指给函数添加类型注解，本质上就是给函数的参数和返回值添加类型约束

在这里插入图片描述

说明：

  1. 函数参数注解类型之后不但限制了参数的类型还限制了参数为必填
  2. 函数返回值注解类型之后限制了该函数内部return出去的值必须满足类型要求

好处：

  1. 避免因为参数不对导致的函数内部逻辑错误
  2. 对函数起到说明的作用

2. 函数表达式

函数表达式的类型注解有俩种方式，参数和返回值分开注解和函数整体注解

1- 参数和返回值分开注解

在这里插入图片描述

2-函数整体注解（只针对于函数表达式）

在这里插入图片描述

3. 可选参数

概念：可选参数表示当前参数可传可不传，一旦传递实参必须保证参数类型正确

在这里插入图片描述

说明：lastName参数表示可选参数，可传可不传，一旦传递实参必须保证类型为string类型

4. 无返回值 - void

概念：JS中的有些函数只有功能没有返回值，此时使用void进行返回值注解，明确表示函数没有函数值

在这里插入图片描述

注意事项：在JS中如何没有返回值，默认返回的是undefined, 在TS中 void和undefined不是一回事，undefined在TS中是一种明确的简单类型，如果指定返回值为undefined，那返回值必须是undefined类型

5. 思考题

编写一个arr2Str函数，作用为把数组转换为字符串，其中数组中既可以包含字符串和数字，分隔符也可以进行自定义，类型为字符串类型，使用样例：

  1. arr2Str( [1, 2, 3] , ‘-’ ) -> ‘1-2-3’
  2. arr2Str( [‘4’, ’5’] , ’&’ ) -> ‘4&5’
const convert = (arr: (string | number)[], symbol: string): string => {return arr.join(str);
}

interface接口

1. 接口类型的作用

作用: 在TS中使用interface接口来描述对象数据的类型（常用于给对象的属性和方法添加类型约束）

在这里插入图片描述

说明：一旦注解接口类型之后对象的属性和方法类型都需要满足要求，属性不能多也不能少

2. 典型场景

场景：在常规业务开发中比较典型的就是前后端数据通信的场景

  1. 前端向后端发送数据：收集表单对象数据时的类型校验
  2. 前端使用后端数据：渲染后端对象数组列表时的智能提示

在这里插入图片描述

3. 接口的可选设置

概念: 通过？对属性进行可选标注，赋值的时候该属性可以缺失，如果有值必须保证类型满足要求
在这里插入图片描述

4. 接口的继承

概念：接口的很多属性是可以进行类型复用的，使用 extends 实现接口继承,实现类型复用
在这里插入图片描述

5. 思考题

通常我们的后端接口返回的数据格式具有一定的规范，比如经常见到的response对象，如下，尝试使用interface接口定义其类型

在这里插入图片描述

type注解对象类型

1. 注解对象

概念：在TS中对于对象数据的类型注解，除了使用interface之外还可以使用类型别名来进行注解，作用相似

在这里插入图片描述

2. type + 交叉类型模拟继承

类型别名配合交叉类型（&）可以模拟继承，同样可以实现类型复用

在这里插入图片描述

3. interface 对比 type

相同点

  1. 都能描述对象类型
  2. 都能实现继承，interface使用extends, type配合交叉类型

不同点

  1. type除了能描述对象还可以用来自定义其他类型
  2. 同名的interface会合并（属性取并集，不能出现类型冲突），同名type会报错

在注解对象类型的场景下非常相似，推荐大家一律使用type, type更加灵活

4. 思考题

还是我们熟悉的response对象，如下，尝试使用type定义其类型

在这里插入图片描述

字面量类型

1. 什么是字面量类型

概念：使用 js字面量 作为类型对变量进行类型注解，这种类型就是字面量类型, 字面量类型比普通的类型更加精确

在这里插入图片描述

说明：除了上面的数字字面量，js里常用的字符串字面量，数组字面量，对象字面量等都可以当成类型使用

2. 字面量类型的实际应用

字面量类型在实际应用中通常和联合类型结合起来使用，提供一个精确的可选范围
场景1：性别只能是 ’男‘ 和 ’女‘，就可以采用联合类型配合字面量的类型定义方案
在这里插入图片描述

场景2：ElementUI中的el-button组件按钮的type属性
在这里插入图片描述

3. 字面量类型与const

思考一下下面的 str1 和 str2，TS推断出来的类型分别是什么？
在这里插入图片描述

说明：const声明的变量称之为常量，常量是不可以进行重新赋值的，所以str2推断出来的是字面量类型而不是string类型

4. 思考题

还是我们熟悉的后端返回数据，这一次业务code码有多种情况1001、 1002、 1003，尝试改写类型满足要求
在这里插入图片描述

类型推论和any类型

1. 类型推论

概念：在 TS 中存在类型推断机制，在没有给变量添加类型注解的情况下，TS 也会给变量提供类型，以下是发生类型推断的几个场景

  • 声明变量并赋值时

在这里插入图片描述

  • 决定函数返回值时

在这里插入图片描述

一些小建议

  1. 开发项目的时候，能省略类型注解的地方就省略
  2. 刚开始学TS，建议对所有类型都加上，先熟悉
  3. 鼠标放至变量上，VsCode 自动提示类型

2. any类型

作用：变量被注解为any类型之后，TS会忽略类型检查，错误的类型赋值不会报错，也不会有任何提示

在这里插入图片描述

注意：any 的使用越多，程序可能出现的漏洞越多，因此不推荐使用 any 类型，尽量避免使用

3. 类型断言

作用：有些时候开发者比TS本身更清楚当前的类型是什么，可以使用断言（as）让类型更加精确和具体
需求：获取页面中的id为link的a元素，尝试通过点语法访问href属性

在这里插入图片描述

在这里插入图片描述

4. 类型断言的注意事项

类型断言只能够「欺骗」TypeScript 编译器，无法避免运行时的错误，滥用类型断言可能会导致运行时错误

在这里插入图片描述

说明：利用断言把foo变量的类型指定为精确的number，但是传参的时候还是可以传递number类型或者string类型均满足类型要求，但是传递string会导致运行时错误

泛型

1. 什么是泛型

概念：泛型（Generics）是指在定义接口、函数等类型的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性, 使用泛型可以复用类型并且让类型更加灵活
思考：下面的俩种数据结构如何使用interface接口实现类型注解？这样做有何问题？
在这里插入图片描述

2. 泛型接口

语法：在接口类型的名称后面使用<T>即可声明一个泛型参数，接口里的其他成员都能使用该参数的类型

在这里插入图片描述

通用思路：

  1. 找到可变的类型部分通过泛型抽象为泛型参数（定义参数）
  2. 在使用泛型的时候，把具体类型传入到泛型参数位置 （传参）

在这里插入图片描述

3. 泛型别名

语法：在类型别名type的后面使用<T>即可声明一个泛型参数，接口里的其他成员都能使用该参数的类型

在这里插入图片描述

需求：使用泛型别名重构ResData案例
在这里插入图片描述

4. 泛型函数

语法：在函数名称的后面使用<T>即可声明一个泛型参数，整个函数中（参数、返回值、函数体）的变量都可以使用该参数的类型

在这里插入图片描述

需求：设置一个函数 createArray，它可以创建一个指定长度的数组，同时将每一项都填充一个默认值(多种类型)
在这里插入图片描述

5. 泛型约束

作用：泛型的特点就是灵活不确定，有些时候泛型函数的内部需要访问一些特定类型的数据才有的属性，此时会有类型错误，需要通过泛型约束解决

在这里插入图片描述

添加约束

在这里插入图片描述

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

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

相关文章

5.2 加载矢量图层(delimitedtext,spatialite,wfs,memory)

5.2 加载矢量图层(delimitedtext,spatialite,wfs,memory)

文章目录 前言加载矢量(vector)图层delimitedtextQGis导入CSV代码导入 SpatiaLite data provider (spatialite)QgsDataSourceUriQGis导入spatialite代码导入 Web服务WFS (web feature service) data provider (wfs)QGis添加图层代码添加 Memory data providerType (memory)QGis…
阅读更多...
从入门到进阶 之 ElasticSearch SpringData 继承篇

从入门到进阶 之 ElasticSearch SpringData 继承篇

&#x1f339; 以上分享 从入门到进阶 之 ElasticSearch SpringData 继承篇&#xff0c;如有问题请指教写。&#x1f339;&#x1f339; 如你对技术也感兴趣&#xff0c;欢迎交流。&#x1f339;&#x1f339;&#x1f339; 如有需要&#xff0c;请&#x1f44d;点赞&#x1f…
阅读更多...
session 反序列化

session 反序列化

原理详解 ctfshow 新手杯 剪刀石头布 这里我们可以发现服务器使用的处理器为php_serialize&#xff0c;与当前页面处理器不同&#xff0c;在反序列化的时候会造成一些问题。同时cleanup配置没开&#xff0c;关闭了session自动清理&#xff0c;所以我们不需要进行条件竞争。并…
阅读更多...
传输层 | UDP协议、TCP协议

传输层 | UDP协议、TCP协议

之前讲过的http与https都是应用层协议&#xff0c;当应用层协议将报文构建好之后就要将报文往下层传输层进行传递&#xff0c;而传输层就是负责将数据能够从发送端传到接收端。 再谈端口号 端口号(port)标识了一个主机上进行通信的不同的应用程序&#xff0c;在TCP/IP协议中&…
阅读更多...
【JavaEE】Callable 接口

【JavaEE】Callable 接口

Callable 是一个 interface . 相当于把线程封装了一个 “返回值”. 方便程序猿借助多线程的方式计算结果. 实现Callable也是创建线程的一种方法&#xff01;&#xff01;&#xff01;&#xff01; Callable的用法非常接近于Runnable&#xff0c;Runnable描述了一个任务&#…
阅读更多...
最新百度统计配置图文教程，获取siteId、百度统计AccessToken、百度统计代码教程

最新百度统计配置图文教程，获取siteId、百度统计AccessToken、百度统计代码教程

一、前言 很多网友开发者都不知道百度统计siteId、百度统计token怎么获取&#xff0c;在网上找的教程都是几年前老的教程&#xff0c;因此给大家出一期详细百度统计siteId、百度统计token、百度统计代码获取详细步骤教程。 二、登录到百度统计 1.1 登录到百度统计官网 使用…
阅读更多...
多继承vs查看类结构

多继承vs查看类结构

多继承里面的虚函数 类A有两个虚函数&#xff0c;类B重写了其中一个&#xff0c;类C重写了两个&#xff1b; 类C里面可以重写所有继承到的虚函数&#xff08;类A、类B里面的虚函数&#xff09; class A { public:virtual void init() { std::cout << "A init !&qu…
阅读更多...
node.js+NPM包管理器+Webpack打包工具+前端项目搭建

node.js+NPM包管理器+Webpack打包工具+前端项目搭建

javascript运行环境&#xff08;无需依赖html文件&#xff09; BFF&#xff0c;服务于前端的后端 官网下载安装&#xff0c;node -v查看是否安装成功 ①、创建一个01.js文件 //引入http模块 const httprequire(http)//创建服务器 http.createServer(function(request,respo…
阅读更多...
8中间件-Redis、MQ---基本

8中间件-Redis、MQ---基本

中间件&#xff08;Middleware&#xff09;是指位于客户端和服务器端之间的软件&#xff0c;用于处理请求和响应&#xff0c;以及提供额外的功能和服务。中间件可以用于各种不同的应用程序&#xff0c;例如Web应用程序、消息传递系统、数据库管理系统等。 在Web应用程序中&…
阅读更多...
Flutter视图原理之三棵树的建立过程

Flutter视图原理之三棵树的建立过程

目录 三棵树的关系树的构建过程1.updateChild函数&#xff08;element的复用&#xff09;2.inflateWidget函数3.mount函数3.1 componentElement的实现3.2 RenderObjectElement的实现3.2.1 attachRenderObject函数 4.performRebuild函数 总结三棵树创建流程 三棵树的关系 Flutt…
阅读更多...
MySQL数据库（一）

MySQL数据库（一）

数据库 —— 基础 1. 数据库 DataBase 数据库管理系统 2. SQL语言2.1 DDL数据定义语言2.1.1 数据库基础操作2.1.2 数据表基础操作2.1.3 字段基础操作 2.2 DML表记录管理2.2.1 插入数据INSERT2.2.2 更新数据UPDATE2.2.3 删除数据DELETE 3. SQL数据类型3.1 数值类型3.1.1 整数类型…
阅读更多...
正点原子嵌入式linux驱动开发——Linux蜂鸣器

正点原子嵌入式linux驱动开发——Linux蜂鸣器

蜂鸣器驱动原理 有源蜂鸣器只要通电就会叫&#xff0c;所以可以做一个供电电路&#xff0c;这个供电电路通过一个IO来控制其通断 &#xff0c;一般使用三极管来搭建这个电路。 在Linux下编写蜂鸣器驱动就需要以下工作&#xff1a; 设备树中创建蜂鸣器节点&#xff0c;加入GP…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023