2023年TS4 入门笔记【慕课网imooc】【Vue3+React18 + TS4考勤系统】

news/2024/3/29 3:57:02/文章来源:https://blog.csdn.net/qq_28838891/article/details/128891585

目录

安装ts

基础

类型声明和变量声明

类型注解和类型判断

类型分类与联合类型与交叉类型​编辑

never类型与any类型与unknown类型

类型断言与非空断言

数组类型和元祖类型

对象类型与索引签名

函数类型与void类型

函数重载与可调用注解

枚举类型与const枚举

进阶

接口和类型别名

字面量类型和keyof关键字​编辑

类型保护与自定义类型保护

定义泛型和泛型常见操作

映射类型与内置工具类型

条件类型和infer关键字

类中如何使用类型


【慕课网imooc】【Vue3+React18 + TS4考勤系统】(2.25更新完毕)

安装ts

1.安装ts:npm install typescript -g

2.查看版本:tsc -version

3.测试代码:控制台中输入 tsc test.ts,会生成对应的test.js,输入node test.js,会运行代码。

如果想和生成的test.js同步,可以  tsc test.ts -w

4.安装ts配置文件

tsc --init

输出路径,outDir

编译:tsc时指定生成js的文件:include

 

 

提供接口

风格 ,版本

基础

类型声明和变量声明

类型首字母大写,变量全小写

 

类型注解和类型判断

ts自动根据第一次赋值的类型判断

 

类型分类与联合类型与交叉类型

 

 

never类型与any类型与unknown类型

never类型表示永不存在的值的类型,当一个值不存在的时候就会被自动类型推断成never类型。

// let a: never ->  不能将类型“number”分配给类型“never”
let a: number & string = 123

所以never类型并不常用,只是在出现问题的时候会被自动转成never。

有时候也可以利用never类型的特点,实现一些小技巧应用,例如可以实现判断参数是否都已被使用,代码如下:

function foo(n: 1 | 2 | 3) {switch (n) {case 1:breakcase 2:breakcase 3:breakdefault:let m: never = n;  // 检测n是否可以走到这里,看所有值是否全部被使用到break}
}

any类型表示任意类型,而unknown类型表示为未知类型,是any类型对应的安全类型。

既然any表示任意类型,那么定义的变量可以随意修改其类型,这样带来的问题就是TS不再进行类型强制,整个使用方式根JS没有任何区别。

let a: any = 'hello';
a = 123;
a = true;
a.map(()=>{})    // success

所以说any类型是TS中的后门,不到万不得已的时候尽量要少用,如果真的有这种需求的话,可以采用any对应的安全类型unknown来进行定义。

let a: unknown = 'hello';
a = 123;
// any不进行检测了,unknown使用的时候,TS默认会进行检测
a.map(()=>{})    // error

unknown类型让程序使用的时候更加严谨,我们必须主动告诉TS,这里是一个什么类型,防止我们产生误操作。那么怎样让unknown类型不产生错误呢?就需要配合类型断言去使用

类型断言与非空断言

数组类型和元祖类型

 元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同

 

对象类型与索引签名

 

 index索引值类型number(数组) 或者string(其他情况)

索引签名的类型必须包含所有字段,所以一般是any

函数类型与void类型

 

 

函数重载与可调用注解

 

 

 

枚举类型与const枚举

 枚举(除了字符串):自动累加(有默认值),反向映射(以值反向映射key)

在用于常量时,建议加const,编译时会优化,而非建立对象

进阶

接口和类型别名

1. 接口不能基本类型

 2.同名接口自动合并

3.接口支持继承

 

 4.别名支持映射

字面量类型和keyof关键字

联合类型:

类型保护与自定义类型保护

类型保护允许你使用更小范围下的对象类型

 

定义泛型和泛型常见操作

泛型是指在定义函数、接口或者类时,未指定其参数类型,只有在运行时传入才能确定

类型传给T

 

 

 

 

 类的属性本来必须要加初始值,但可以加断言:

 

 

映射类型与内置工具类型

可以将已知类型的每个属性都变为可选的或者只读的

type A = {username: stringage: number
}// 映射类型只能用别名实现,不能用接口来实现type B<T> = {readonly [P in keyof T]: T[P]
}type C = B<A>
// Partial(可选)、Readonly、Pick、Record(改变类型)、type A = {username: stringage: numbergender: string
}type B = Readonly<A>
type C = Partial<A>
type D = Pick<A, 'username'|'age'>
type E = Record<keyof A, string>
// Required(将可选变为必选)、type A = {username?: stringage?: numberreadonly gender: string
}type B = Required<A>

Omit和Pick相反,

Extract和Exclude相反

条件类型和infer关键字

条件类型就是在初始状态并不直接确定具体类型,而是通过一定的类型运算得到最终的变量类型

元祖类型

type A<T> = T extends Array<infer U> ? U : Ttype B = A<Array<number>>
type C = A<string>

类中如何使用类型


类中定义类型
类使用接口
类使用泛型
 

继承类extend,实现接口implements

interface A<T> {username: Tage: numbershowName(n: T): T
}class Foo implements A<string> {username: string = 'xiaoming'age: number = 20gender: string = 'male'showName = (n: string): string => {return n}
}

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

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

相关文章

2023年美国大学生数学建模A题:受干旱影响的植物群落建模详解+模型代码(二)

前言 资源放CSDN上面过不了审核,都快结束了都没过审真的麻了,订阅专栏的同学直接加我微信直接发你。我只打造优质专栏。专注建模四年,博主参与过大大小小数十来次数学建模,理解各类模型原理以及每种模型的建模流程和各类题目分析方法。此专栏的目的就是为了让零基础快速使…

【2023-02-20】JS逆向之翼支付

提示&#xff1a;文章仅供参考&#xff0c;禁止用于非法途径 文章目录前言分析总结前言 真的好久没更了…… 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 分析 进到网页&#xff0c;加载两个接口 applyLoginFactor 接口返回一个RSA公钥&#xff0…

工业4.0和工业物联网如何协同工作

虽然许多公司已经接受了工业物联网&#xff0c;但他们现在必须接受工业4.0对数据驱动的数字化转型的承诺。随着制造业、能源、公用事业和供应链应用迅速采用工业物联网(IIoT)&#xff0c;这些行业的新现实正在形成。工业物联网提供了企业管理数千个活动部件所需的数据类型&…

【部署】项目正式服部署更新

chihiro-notes 千寻简笔记 v0.1 内测版 &#x1f4d4; 笔记介绍 大家好&#xff0c;千寻简笔记是一套全部开源的企业开发问题记录&#xff0c;毫无保留给个人及企业免费使用&#xff0c;我是作者星辰&#xff0c;笔记内容整理并发布&#xff0c;内容有误请指出&#xff0c;笔…

第一章 初识 Spring Security

第一章 初识 Spring Security 1、权限管理 权限管理 基本上涉及到用户参与的系统都要进行权限管理&#xff0c;权限管理属于系统安全的范畴&#xff0c;权限管理实现了对用户访问系统的控制&#xff0c;按照安全规则或者安全策略控制用户可以访问而且只能访问自己被授权的资…

计算机网络学习笔记02

学习视频&#xff1a;https://www.bilibili.com/video/BV1c4411d7jb/?p7&spm_id_frompageDriver&vd_source75dce036dc8244310435eaf03de4e330 一、计算机网络体系结构 1 常见的计算机网络体系结构 OSI体系结构和TCP/IP体系结构 TCP/IP体系结构的网络接口层并没有规…

鼠标指针文件格式解析

鼠标指针文件格式解析 文章目录鼠标指针文件格式解析windowsico文件格式分析文件头&#xff1a;图像数据头段&#xff1a;图像数据段&#xff1a;Ani动态光标格式解析数据结构&#xff1a;anihseq **rate**LISTcur静态光标文件格式解析macOSLinuxwindows ico文件格式分析 是一…

【Java基础】IO流

IO流 最后一定要关闭流&#xff0c;防止资源泄露 字节流 一次读取1字节&#xff0c;8比特 FileInputStream import org.junit.jupiter.api.Test;import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException;public class CopyBytes {pub…

分布式之Raft共识算法分析

写在前面 在分布式之Paxos共识算法分析 一文中我们分析了paxos算法&#xff0c;知道了其包括basic paxos和multi paxos&#xff0c;并了解了multi paxos只是一种分布式共识算法的思想&#xff0c;而非具体算法&#xff0c;但可根据其设计具体的算法&#xff0c;本文就一起来看…

DAMA认证|数据治理产业上规模需要做到“三化”

数据治理是开启数据安全体系化建设的第一步&#xff0c;需要从产业层面做大做强&#xff0c;支撑数据安全整体框架&#xff0c;为数据流通提供安全保障&#xff0c;推动促进数字化产业进一步发展。 规模化发展是数据治理产业的瓶颈&#xff0c;行业数字化业务的复杂性和过多的定…

Spring Boot 日志文件,你都会了吗?

目录 1、日志文件的作用 2、日志的使用 2.1、从程序中得到日志对象 2.2、使用日志 2.3、日志格式 3、日志级别 3.1、这样的日志级别有什么用&#xff1f; 3.2、日志级别分类和使用 3.3、日志级别设置 4、日志持久化 5、更简单的日志输出——lombok 5.1、对比 5.2、…

Linux下安装MySQL8.0的详细步骤(解压tar.xz安装包方式安装)

Linux下安装MySQL8.0的详细步骤 第一步&#xff1a;下载安装配置 第二步&#xff1a;修改密码&#xff0c;并设置远程连接&#xff08;为了可以在别的机器下面连接该mysql&#xff09; 第三步&#xff1a;使用Navicat客户端连接 搞了一台云服务器&#xff0c;首先要干的活就是…

批处理删除指定文件或文件夹

声明&#xff1a;1-2节参考了 https://blog.csdn.net/weixin_43960383/article/details/1243673841. DEL1.1 DEL 的命令参数使用 del 命令能指定文件&#xff0c;Del (erase)[Drive:][Path]FileName指删除指定文件。指定要删除的文件或文件集的位置和名称。语法格式如下&#x…

Unity毛发系统TressFX Exporter

Unity 数字人交流群&#xff1a;296041238 一&#xff1a;在Maya下的TressFX Exporter 插件安装步骤&#xff1a; 1. 下载Maya的TressFX Exporter插件 下载地址&#xff1a;TressFX Exporter 链接&#xff1a;https://github.com/Unity-China/cn.unity.hairfx.core/tree/m…

利用OpenCV的函数equalizeHist()对图像作直方图均衡化处理

如果一幅图像的灰度值集中在某个比较窄的区域&#xff0c;则图像的对比度会显得比较小&#xff0c;不便于对图像的分析和处理。 图像的直方图均衡化可以实现将原图像的灰度值范围扩大&#xff0c;这样图像的对比度就得到了提高&#xff0c;从而方便对图像进行后续的分析和处理…

Cosmos 基础教程(二)-- Run a Node, API, and CLI

有很多不同的方法来运行Cosmos区块链的节点。您将探索如何使用simapp 进行此操作。 1、编译simapp Cosmos SDK存储库包含一个名为 simapp 的文件夹。在这个文件夹中&#xff0c;您可以找到运行Cosmos SDK模拟版本的代码&#xff0c;这样您就可以在不实际与链交互的情况下测试…

化解射频和微波设计挑战的六个技巧

即使是最自信的设计人员&#xff0c;对于射频电路也往往望而却步&#xff0c;因为它会带来巨大的设计挑战&#xff0c;并且需要专业的设计和分析工具。这里将为您介绍六条技巧&#xff0c;来帮助您简化任何射频PCB 设计任务和减轻工作压力&#xff01; 1、保持完好、精确的射频…

由浅入深,一起来刷Java高级开发岗面试指南,面试必定无忧!

前言 我只想面个CV工程师&#xff0c;面试官偏偏让我挑战造火箭工程师&#xff0c;加上今年这个情况更是前后两男&#xff0c;但再难苟且的生活还要继续&#xff0c;饭碗还是要继续找的。在最近的面试中我一直在总结&#xff0c;每次面试回来也都会复盘&#xff0c;下面是我根…

【2022.12.9】Lammps+Python 在计算g6(r)时遇到的问题

目录写在前面绘制g6( r )执行步骤【updated】如何检查图像的正确性&#xff1a;不是编程问题&#xff0c;而是数学问题的一个小bug废稿2则&#xff1a;写在前面 全部log&#xff1a; 【2022.11.16】LammpsPythonMATLAB在绘制维诺图时遇到的问题 绘制g6( r )执行步骤【updated…

面试中经常被问到的【宏定义】,改变你对【C\C++】中宏定义的认识。

最近遇到挺多宏定义的代码&#xff0c;其实挺烦的&#xff0c;每次看复杂的宏定义看到一半就懵了&#xff0c;今天盘一盘它。本篇设计宏定义的原理、使用方法、使用技巧。 目录 一、宏定义原理 二、宏定义定义复杂功能函数 2.1 定义注册函数 三、宏定义实现条件编译 四、宏…