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

news2024/9/27 15:31:26

文章目录

  • 前言
  • 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.coloradmin.cn/o/170278.html

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

相关文章

Kubernets核心介绍及实战

1、资源创建方式 命令行YAML 2、Namespace 名称空间用来隔离资源 “namespace"通常被翻译为「命名空间」,听起来好像比较抽象,其实重点是在这个"space”。它和描述进程的虚拟地址空间的address space一样,都是提供一种独占的视角…

linux引导和启动程序

1.BIOS/Bootloader: 一上电,硬件强制让cpu的cs:ip寄存器指向bios程序的位置,从bios程序开始执行,由pc机的BIOS (0xFFFFO是BIOs存储的总线地址)把bootsect从某个固定的地址拿到了内存中的某个固定地址(0x90…

SpringAMQP快速入门

介绍Spring AMQP 项目将核心 Spring 概念应用于基于 AMQP 的消息传递解决方案的开发它提供了一个“模板”作为发送和接收消息的高级抽象它还通过“侦听器容器”为消息驱动的 POJO 提供支持这些库促进了 AMQP 资源的管理,同时促进了依赖注入和声明性配置的使用包含两…

纷享销客华为云CXO思享会华东系列活动成功举办!

3天,3座城市,5家标杆企业,11位不同领域的专家,超百位企业家云集。1月10日-13日,纷享销客与华为云联合举办的“数字创新 高效增长”CXO思享会华东系列活动成功举办。全国各地超百名企业家齐聚华东参与本次思享会&#x…

kubeasz安装kubernetes1.25.5

kubeasz安装k8s 1 配置 kubeasz安装kubernetes,只需要做好网通配置,做好ssh免密通信配置即可 1.1 环境介绍 OS:CentOS Linux release 8.5.2111 机器: IPhostname10.104.10.201k8s-master10.104.10.202k8s-node 所有机器,都将…

3-4存储系统-虚拟存储器(CO)

文章目录一.页式存储1.页式存储系统2.逻辑地址到物理地址的转换3.页表4.快表TLB二.虚拟存储器(一)页式虚拟存储器(二)段式虚拟存储器(三)段页式虚拟存储器一.页式存储 1.页式存储系统 为提高主存的空间利…

JS中的splice方法添加或删除数组中的元素

splice方法嘚吧嘚语法下标问题实战splice(index)splice(index,howmany)示例一(howmany>0)示例二(howmany ≤ 0)splice(index,howmany,item1,.....,itemX)howmany ≤ 0示例一(index ≥ 0)示例二(index<0)howmany>0示例一(index ≥ 0)示例二(in…

Spring Cloud Kubernetes 本地开发

简介 Spring Cloud Kubernetes 是spring官方集成Kubernetes的一个框架.可以直接将springboot项目使用Kubernetes做为注册中心.很方便,但是我们本地开发的时候很难进行调试,因为我们本地没有Kubernetes环境. 下面介绍一种能够本地开发的方式 KT-Connect KtConnect(Kt…

【倍增+最短路】P1613 跑路

不知道是因为这样的套路太典了还是因为什么,这难度只有绿题,可是我感觉好难想到QwQ不过今天写了好几道倍增,好像有点感觉了捏P1613 跑路 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn)题意:思路:一开始的思路就是建图…

【内存函数】-关于内存的操作函数

作者:小树苗渴望变成参天大树 作者宣言:认真写好每一篇博客 作者gitee:gitee 如 果 你 喜 欢 作 者 的 文 章 ,就 给 作 者 点 点 关 注 吧! 内存函数前言一、[memcpy](https://cplusplus.com/reference/cstring/memc…

初识软件测试

作者:~小明学编程 文章专栏:测试开发 格言:热爱编程的,终将被编程所厚爱。 目录 什么是软件测试? 软件测试和软件开发的区别? 调试和测试的区别? 优秀的测试人员应该具备哪些素质&#xff…

cherry-pick的定义和使用方法

1、定义 使用遴选(cherry-pick)命令,Git 可以让你将任何分支中的个别提交合并到你当前的 Git HEAD 分支中。当执行 git merge 或者 git rebase 时,一个分支的所有提交都会被合并。cherry-pick 命令允许你选择单个提交进行整合。 …

正点原子STM32(基于HAL库)3

目录RTC 实时时钟实验RTC 时钟简介RTC 框图RTC 寄存器硬件设计低功耗实验电源控制(PWR)简介电源系统电源监控电源管理PVD 电压监控实验PWR 寄存器硬件设计睡眠模式实验硬件设计停止模式实验PWR 寄存器硬件设计待机模式实验PWR 寄存器硬件设计ADC 实验ADC…

全国产加固以太网交换机选择技巧

全国产加固交换机用于连接以太网设备:首先接收由某台设备发出的数据帧,然后再将这些帧传送到与其它以太网设备相连的适当交换机端口上。随着它传送这些帧,学习并掌握以太网设备的位置,并用这些信息来决定该用哪些端口来传送帧&…

83. 深度循环神经网络及代码实现

1. 回顾:循环神经网络 2. 更深 再看公式: 3. 总结 深度循环神经网络使用多个隐藏层来获得更多的非线性性 4. 代码简洁实现 实现多层循环神经网络所需的许多逻辑细节在高级API中都是现成的。 简单起见,我们仅示范使用此类内置函数的实现方式…

虚拟机本地搭建Hadoop集群教程

Hadoop概述 狭义下Hadoop是Apache的一套开源软件,用java实现,广义上是围绕Hadoop打造的大数据生态圈 http://hadoop.apache.org Hadoop核心组件: HDFS(分布式文件存储系统):解决海量数据存储YARN&#…

Spring 常用组件

一. Spring 解决了什么问题 Spring 核心功能是整合,提供一个管理组件的容器, 以 Bean的形式管理组件及对象。Spring 采用分层架构和组件化设计,允许分层,插件化选择组件。二. Spring 整体架构 Spring4架构图 三. Spring 组件 1.…

Spring | 整合MyBatis中SqlSessionTemplate和MapperScannerConfigurer类的使用

0️⃣初始配置&#x1f6a9;pom.xml导入依赖<?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"ht…

大数据开发工程师考试分享

在2022年年尾伴随着疫情政策的放开&#xff0c;压抑了3年的活力与生机正在悄然地蓄势待发。回顾这一整年&#xff0c;我们经历了核酸考验&#xff0c;互联网裁员危机&#xff0c;以及正面面对新冠等等。总之&#xff0c;在这一年无论是生活还是工作&#xff0c;大家都面临了不同…

大公司VS小公司,怎样选择更有前途?

你好&#xff0c;我是王喆。 学完上一讲&#xff0c;你已经知道了如何选择一个有前景的职业方向。在大方向确定好之后&#xff0c;接下来的问题就是如何在这个方向上进行具体的职业发展规划了。 我想你一定听说过很多牛人的“职场升级”故事&#xff1a;工作3年升到P7&#x…