第五届字节跳动青训营 前端进阶学习笔记(四)TypeScript入门

news/2023/5/28 9:10:45

文章目录

  • 前言
  • TypeScript概要
      • 1.什么是TypeScript
      • 2.TypeScript基本语法
        • 基础数据类型
        • 对象类型
        • 函数类型
        • 函数重载
        • 数组类型
        • 补充类型
        • 泛型约束和泛型默认参数
        • 类型别名和类型断言
  • 高级类型
      • 1.联合类型
      • 2.交叉类型
      • 3.类型守卫
        • 类型谓词
  • 总结

前言

课程重点:

  • TypeScript概要
  • TypeScript基础语法
  • TypeScript高级特性
  • TypeScript工程应用

TypeScript概要

1.什么是TypeScript

基于静态类型的JavaScript的超集

  • 静态类型

    • 增强代码的可读性
    • 增强代码的可维护性
    • 在多人合作项目中,获得更好的稳定性和开发效率。
  • JavaScript超集

    • 兼容所有JavaScript特性
    • 支持渐进式引入和升级

2.TypeScript基本语法

基础数据类型

TypeScript中的基本数据类型通过在变量名右边添加[:数据类型]的形式进行声明。

code.png

对象类型

对象类型可以通过很多种方式进行指定,因为TypeScript使用的是一种叫做鸭子类型的方式来判别类型的,因此只要对象结构符合规则,TypeScript就认为两个对象是相同的类型。

image.png

ps.鸭子类型:我们不通过外表来判别一个动物是否是鸭子,而是判断它是否具有鸭子的叫声和鸭子的行为,只要它具有鸭子的叫声和鸭子的行为,我们就认为它是一只鸭子。

函数类型

函数类型可以使用两种方法声明:使用接口定义和直接书写函数类型。

code.png

函数重载

函数重载是一种可以使一个函数可以接收不同类型参数和返回不同类型结果的定义方式。

code.png

数组类型

数组类型有四种声明的方式:类型数组、泛型、元组和接口。

code.png

补充类型

TypeScript也添加了一些补充类型来丰富TypeScript的功能。包括:空类型、任意类型、枚举类型和泛型。

code.png

泛型约束和泛型默认参数

code.png

类型别名和类型断言

code.png

高级类型

1.联合类型

联合类型可以表示对象可以是被联合的类型之一。但在未确定实际类型的时候,只能使用联合类型的交集部分。假设一个函数的参数被声明为(User|Person),那么在函数体内只能声明使用User和Person的公共属性。

code.png

2.交叉类型

交叉类型可以将不同的类型组合起来,它是所有被交叉的类型的并集。

code.png

3.类型守卫

类型谓词

在前面我们提到了,在联合类型未确定之前,是不能够访问联合类型中非并集的部分的。但是有时候我们需要根据不同的类型来做不同的操作,这时候就可以使用类型谓词,类型谓词可以协助编译器进行类型推断。

code.png

*ps.除此之外,还可以使用typeof和instanceof来进行类型保护。*

总结

本节课主要介绍了有关TypeScript的一些基本概念和语法。通过编译时静态类型的加持,可以让我们在代码运行之前,发现程序中的很多错误。同时TypeScript提供的一些额外特性也使得代码的可读性、可维护性得到了显著增强。同时,TypeScript在现在有着很高的热度,因此,如果还没有用过或者学过TypeScript,可以提上日程了。

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

如若内容造成侵权/违法违规/事实不符,请联系郑州代理记账网进行投诉反馈,一经查实,立即删除!

相关文章

回溯法之旅行商问题解题思路详解

问题定义 输入: 完全无向带权图G(V,E) |V|n, |E|m 对于E中的某条边e,其长度为c(e) 输出: 最短哈密顿回路(经过每个节点一次且仅一次的回路) ps.这是一个NP问题,没有有效的算法…

【精讲】PCIe基础篇——Memory IO 地址空间

在早期的PC中,IO设备中的内部寄存器/存储是通过IO地址空间(由Intel定义)来访问的。然而,由于与IO地址空间相关的一些限制和不良影响(我们在这里不讨论),IO地址空间很快就失去了软件和硬件供应商的青睐。这导致IO设备的内部寄存器/存储被映射到…

Matlab遗传算法用于旅行商问题优化TSP

Matlab遗传算法用于旅行商问题优化要求第一步:参数编码和初始群体设定第二步:计算路径长度的函数设计第三步:计算选择算子第四步:计算交叉算子第五步:计算变异算子结果及分析MATLAB总代码要求 利用遗传算法求旅行商问…

(三)计算机组成原理——总线

文章目录(三)计算机组成原理——总线总线的基本概念单总线双总线面向CPU以存储器为中心总线的分类片内总线系统总线数据总线地址总线控制总线通信总线总线特性及性能指标总线特性机械特性电气特性功能特性时间特性性能指标总线标准总线结构单总线多总线双…

TSP_旅行商问题 - 蛮力法DFS(一)

一、前言 【旅行商问题】旅行商问题(TravelingSalesmanProblem,TSP)是一个经典的组合优化问题。经典的TSP可以描述为:一个商品推销员要去若干个城市推销商品,该推销员从一个城市出发,需要经过所有城市后,回到出发地。应…

由旅行商问题认识何为状态压缩

动态规划 动态规划(dynamic programming)是运筹学的一个分支,是求解决策过程(decision process)最优化的数学方法。20世纪50年代初美国数学家R.E.Bellman等人在研究多阶段决策过程(multistep decision process)的优化问题时,提出了著名的最优化原理(pri…

[AI] 模拟退火算法解决旅行商问题(matlab)

华电北风吹 天津大学认知计算与应用重点实验室 日期:2015/6/28 模拟退火算法解决旅行商问题。 根据概率产生新解主要包含两个途径:二交换和三交换 二交换是在TSP回路中选择两个城市直接交换 三交换是在TSP回路中选择三个点,p1,p2,p3&am…

【回溯算法】旅行商问题--TSP问题

【问题描述】 一销售商从n个城市中的某一城市出发,不重复地走完其余n—1个城市并回到原出发点,在所有可能的路径中求出路径长度最短的一条。本题假定该旅行商从第1个城市出发。 输入 对每个测试例,第1行有两个整数:n(4≤n≤10)…

广义旅行商问题

问题描述 广义旅行商问题&#xff1a;给定一个加权图G(V, E,W)&#xff0c;其中图中的边上有权值&#xff08;所有权值为正&#xff09;。给定一个源顶点s&#xff0c;和一个目标顶点点t&#xff0c;以及一个包含k个顶点的查询集合Q{vi1,vi2,…,vik}&#xff0c;其中k<5。要…

在 VMware Workstation 16 Pro 中安装 Ubuntu Server 22.04.1 并配置静态 IP 地址

文章目录1.下载 Ubuntu Server 22.04.12.新建虚拟机向导3.编辑虚拟机设置4.开启此虚拟机并配置Ubuntu系统5.设置 root 用户的密码6.允许远程连接 root 用户7.配置静态 IP 地址7.1 查看 Windows 的网络信息7.2 查看 Ubuntu 的网络信息7.3 修改配置文件7.4 测试 Windows 能否互相…

fastp: 极速全能的FASTQ文件自动质控+过滤+校正+预处理软件

软件作者介绍陈实富博士&#xff0c;海普洛斯联合创始人 / CTO海普洛斯是全球领先的精准医疗和基因大数据国家高新技术企业&#xff0c;拥有 Illumina NovaSeq、 HiSeq X10、NextSeq等全系列测序仪&#xff0c;致力于整合液体活检、基因测序、人工智能、大数据等前沿新兴科技&a…

判断地图上一个点是否在多边形内部--射线法

判断一个点是否在多边形内部射线法实现 探索&#xff1a; 在地图上画了一个多边形和一个点&#xff0c;现在我要给出一种通用的方法来判断这个点是不是在多边形内部。 首先想到的一个解法是从这个点做一条射线&#xff0c;计算它跟多边形边界的交点个数&#xff0c;如果交点个…

Cesium基础-加载地图服务

最近工作中遇到一个问题&#xff1a;本地发布了wgs-1984坐标系的TMS局部地图服务&#xff08;在上层叠加&#xff09;&#xff0c;和一份google标准的TMS全球底图服务&#xff08;在下层&#xff09;。使用UrlTemplateImageryProvider加载两幅地图时&#xff0c;发现不能叠在一…

2022秋招算法岗面经题:训练模型时loss除以10和学习率除以10真的等价吗(SGD等价,Adam不等价)

问题描述&#xff1a;训练深度学习模型时loss除以10和学习率除以10等价吗&#xff1f; 先说结论 这个问题的答案与优化器有关 使用Adam、Adagrad、RMSprop等带有二阶动量vtv_tvt​的优化器训练时&#xff0c;当我们将loss除以10&#xff0c;对训练几乎没有影响。使用SGD、Mo…

【H5小游戏】-使用js复刻经典小游戏【接鸡蛋】,快来帮助鸡妈妈找回蛋宝宝吧

接鸡蛋游戏需求&#x1f447;核心玩法&#x1f447;&#x1f447;界面原型&#x1f447;&#x1f447;成品演示&#x1f447;1.游戏演示2.暂停演示游戏开发1.游戏素材准备2.代码实现1.创建index.html页面复刻经典小游戏【接鸡蛋】&#xff0c;快来帮助鸡妈妈找回它的蛋宝宝吧 …

C语言枚举法应用题目,又直观又好用的枚举法

原标题&#xff1a;又直观又好用的枚举法又直观又好用的枚举法枚举法又称为穷举法&#xff0c;适用于以下两种情况&#xff1a;1、当题目出现操作次数比较少或者要比较的数据(题目或选项)比较小时&#xff0c;优先考虑枚举法。2、当题目出现操作过程一致或者要比较的数据非常大…

百钱买百鸡(枚举法)

百钱买百鸡&#xff08;枚举法&#xff09;&#xff08;不断优化&#xff09; 百钱买百鸡的问题算是一套非常经典的不定方程的问题&#xff0c;题目很简单&#xff1a;公鸡5文钱一只&#xff0c;母鸡3文钱一只&#xff0c;小鸡3只一文钱&#xff0c; 题目1&#xff1a;用100文钱…

暴力枚举法

暴力枚举法 思路及算法 最容易想到的方法是枚举数组中的每一个数 x&#xff0c;寻找数组中是否存在 target - x。 当我们使用遍历整个数组的方式寻找 target - x 时&#xff0c;需要注意到每一个位于 x 之前的元素都已经和 x 匹配过&#xff0c;因此不需要再进行匹配。而每一…

【枚举法(穷举法)】

枚举法&#xff08;穷举法&#xff09; 定义 在进行归纳推理时&#xff0c;如果逐个考察了某类事件的所有可能情况&#xff0c;因而得出一般结论&#xff0c;那么该结论是可靠的&#xff0c;这种归纳方法叫做枚举法。 基本思想 在分析实际问题时&#xff0c;通过循环或者递归逐…

计算机控制考试题,计算机控制考试题目整理.doc

计算机控制考试题目整理.doc (7页)本资源提供全文预览&#xff0c;点击全文预览即可全文预览,如果喜欢文档就下载吧&#xff0c;查找使用更方便哦&#xff01;14.90 积分&#xfeff;简答题1.3 计算机控制系统的典型形式有哪些&#xff1f;各有什么优缺点&#xff1f; 答&#…