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

news2024/9/20 20:26:13

目录

安装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:
      break
    case 2:
      break
    case 3:
      break
    default:
        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: string
  age: number
}

// 映射类型只能用别名实现,不能用接口来实现

type B<T> = {
  readonly [P in keyof T]: T[P]
}

type C = B<A>
// Partial(可选)、Readonly、Pick、Record(改变类型)、

type A = {
  username: string
  age: number
  gender: 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?: string
  age?: number
  readonly gender: string
}

type B = Required<A>

Omit和Pick相反,

Extract和Exclude相反

条件类型和infer关键字

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

元祖类型

type A<T> = T extends Array<infer U> ? U : T

type B = A<Array<number>>
type C = A<string>

类中如何使用类型


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

继承类extend,实现接口implements

interface A<T> {
  username: T
  age: number
  showName(n: T): T
}

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

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

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

相关文章

机械革命黑苹果改造计划第四番-外接显示器、win时间不正确问题解决

问题 1.无法外接显示器 最大的问题就是目前无法外接显示器&#xff0c;因为机械革命大多数型号笔记本电脑的HDMI、DP接口都是直接物理接在独显上的&#xff0c;内屏用核显外接显示器接独显&#xff0c;英伟达独显也是黑苹果无法驱动的&#xff0c;而且发现机械革命tpyec接口还…

k8s的基础概念

目录 一、k8s概念 1、k8s是什么 2、为什么要用k8s 3、k8s的特性 二、kubernetes集群架构与组件 1、Master组件 1.1、Kube-apiserver 1.2、Kube-controller-manager 1.3、Kube-scheduler 2、配置储存中心 3、Node组件 3.1、Kubelet 3.2、Kube-Proxy 3.3、docker 或…

SAP S/4 HANA 现金流量表

S4 HANA中的现金流量表 引言&#xff1a;在传统SAP ECC中我们实现现金流量表的方式通常是定义一系列和现金流变动相关的原因代码&#xff08;Reason Code&#xff09;&#xff0c;然后在过账凭证里指定对应的Code&#xff0c;最后通过ABAP代码抓取这些数据产生现金流量表。此方…

力扣(LeetCode)417. 太平洋大西洋水流问题(2023.02.19)

有一个 m n 的矩形岛屿&#xff0c;与 太平洋 和 大西洋 相邻。 “太平洋” 处于大陆的左边界和上边界&#xff0c;而 “大西洋” 处于大陆的右边界和下边界。 这个岛被分割成一个由若干方形单元格组成的网格。给定一个 m x n 的整数矩阵 heights &#xff0c; heights[r][c]…

【pm2】pm2的安装与基本命令:

文章目录一、安装&#xff1a;二、基本命令&#xff1a;【1】启动命令&#xff1a;pm2 start app.js【2】命令行参数&#xff1a;pm2 start app.js --watch -i max【3】 查看有哪些进程&#xff1a;pm2 list【4】停止命令&#xff1a; pm2 stop app_name | app_id &#xff08;…

el-table 复杂表头行内增删改代码示例

效果如图 <template><div class"app-container"><el-card class"box-card item"><div slot"header" class"clearfix" click"showCondition !showCondition"><span><i class"el-ic…

外籍在读博士|赴新西兰奥克兰大学双院士导师麾下联合培养

N同学来自阿拉伯国家&#xff0c;但本硕博都是在我国某省属高校就读&#xff0c;现为材料学专业一年级博士生。联合培养首选澳洲国家&#xff0c;包括澳大利亚和新西兰&#xff0c;其次是美国&#xff0c;希望在2023年初出国&#xff0c;以完成整个学年的学习计划。在我们的帮助…

Android稳定性系列-01-使用 Address Sanitizer检测原生代码中的内存错误

前言想必大家曾经被各种Native Crash折磨过&#xff0c;本地测试没啥问题&#xff0c;一到线上或者自动化测试就出现各种SIGSEGV、SIGABRT、SIGILL、SIGBUS、SIGFPE异常&#xff0c;而且堆栈还是崩溃到libc.so这种&#xff0c;看起来跟我们的代码没啥关系&#xff0c;关键还不好…

Spark3每个job之间任务间隔过长

公司的跑批引擎从impala改成Spark3已经有一个多月了。 不得不说&#xff0c;跑批稳定了好多。资源控制有相对稳定了很多。Spark3比CDH的hive on spark2.4.0要快不少。AQE和CBO真的挺强的。但是使用中发现了一个很奇怪的事情。这个问题在网上搜过&#xff0c;并没有实际解决。 当…

【机器学习】决策树-ID3算法

1.ID3算法 ID3算法利用信息增益进行特征的选择进行树的构建。信息熵的取值范围为0~1&#xff0c;值越大&#xff0c;越不纯&#xff0c;相反值越小&#xff0c;代表集合纯度越高。信息增益反映的是给定条件后不确定性减少的程度。每一次对决策树进行分叉选取属性的时候&#x…

CANopen概念总结、心得体会

NMT网络管理报文&#xff1a; NMT 主机和 NMT 从机之间通讯的报文就称为 NMT 网络管理报文。常见报文说明&#xff1a; 0101---------------网络报文发送Nmt_Start_Node&#xff0c;让电机进入OP模式(此时还不会发送同步信号) setState(d, Operational)------------------开启…

拳打DALL-E 2脚踢Imagen,谷歌最新Muse模型刷新文本图像合成排行榜

原文链接&#xff1a;https://www.techbeat.net/article-info?id4501 作者&#xff1a;seven_ 论文链接&#xff1a; https://arxiv.org/abs/2301.00704 项目主页&#xff1a; https://muse-model.github.io/ 近期火爆AI社区的文本图像合成模型家族又添新成员了&#xff0c;之…

网络计划--时间参数的计算和优化

根据网络图的基本概念和原则绘制出网络图之后&#xff0c;我们可以计算网络图中有关的时间参数&#xff0c;主要目的是找出关键路线&#xff0c;为网络计划的优化、调整和执行提供明确的时间概念。如下图中从始点①到终点⑧共有4条路线&#xff0c;可以分别计算出每条路线所需的…

基于Hive的河北新冠确诊人数分析系统的设计与实现

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…

通过官网怎么查找联盟申请链接

欢迎关注勤于奋每天12点准时更新国外LEAD相关技术今天还是来聊聊这个问题吧&#xff0c;很多人问我这个问题&#xff0c;我觉得这个都不是啥多难的技术&#xff0c;用点心就能找到。最简单的办法就是通过浏览器去搜索&#xff0c;比如通过google 搜索,就能找到一些信息&#xf…

第三届无线通信AI大赛分享交流会暨颁奖典礼顺利举办,大赛圆满收官

2月16日&#xff0c;第三届无线通信AI大赛分享交流会暨颁奖典礼在北京顺利举行&#xff0c;宣告大赛圆满收官。 分享交流会暨颁奖典礼以线上线下结合的形式展开&#xff0c;邀请无线通信领域的多位专家、学者与「基于AI的信道估计与信道状态信息反馈联合设计」、「基于AI的高精…

将二进制文件作为目标文件中的一个段

将二进制文件作为目标文件中的一个段 python 生成2进制文件 import sysdef testFile(fileName):# --with open(fileName, modewb) as hexFile:bBuf bytes.fromhex("0123456789abcdef")print("bBuf:",bBuf.hex())len hexFile.write(bBuf)print ("l…

Vue3搭建记录

一、初始化项目&#xff1a;项目名称vue3-element-admin npm init vitelatest vue3-element-admin --template vue-ts 二、整合Element-Plus 1.本地安装Element Plus和图标组件 npm install element-plus npm install element-plus/icons-vue 2.全局注册组件 // main.ts imp…

【C#】async关键字修饰后有无await的影响

文章目录测试总结拓展&#xff1a;js的async await问题参考测试 来自微软官网的说法&#xff1a; 异步方法通常包含 await 运算符的一个或多个匹配项&#xff0c;但缺少 await 表达式不会导致编译器错误。 如果异步方法未使用 await 运算符标记悬挂点&#xff0c;则该方法将作…

RK3568工业开发板工控板说明

说明HW356X-GKA是采用中高端的通用型 SOC&#xff0c;一款基于Rockchip公司RK3568处理器的工控主板。主板标配处理器为Cortex-A55四核&#xff0c;最高主频2GHz的RK3568处理器&#xff0c;内置4GB DDR4内存(最大8GB)&#xff0c;32GB eMMC存储。集成4核 arm架构 A55 处理器和Ma…