TypeScript 基础类型(一)

简介

它是 JavaScript 的超集,具有静态类型检查和面向对象编程的特性。TypeScript 的出现,为开发者提供了一种更加严谨和高效的开发方式。

主要特点:

  1. 、静态类型检查。

通过静态类型检查,开发者可以在编译时发现错误,而不是在运行时。这有助于减少调试时间,提高代码质量。TypeScript 支持多种类型注解,包括基本类型(如 number、string、boolean 等)、数组、元组、枚举、接口、类等。

  1. 面向对象编程

支持类、接口、继承、多态等面向对象编程的核心概念。开发者可以使用 TypeScript 编写更具结构性和模块化的代码,提高代码的复用性和可维护性。此外,TypeScript 还支持装饰器(Decorators),这是一种用于类和方法的元数据注解,可以用于实现依赖注入、日志记录、权限控制等功能。

基础类型

首先需要生成一个ts的配置文件

Tsc --init

使用 BigInt 等ES6新增的,需要在配置文件lib中添加配置

  "lib": ["ES2022","dom"],       
  • 布尔、数字、字符串

类型小写用于基本类型,大写的类型都是包装类(实例对象等)

let name:string = "smz"
let age:number = 18
let handsome:boolean = true
  • 数组
let arr1: number[] = [1, 2, 3]
let arr2: Array<number> = [1, 2, 3]
let arr3: (number | string)[]= [1, 2, 3, '4']
let arr4: Array<number | string> = [1, 2, 3, '4']
  • 元组
    规定长度和存储的类型

添加只能添加元组中存在的类型,但是不能调用,因为不确定是否存在这个值

let tuple1: [number, string, boolean] = [1, '2', true]
tuple1.push(1)
tuple1.push('3')
tuple1.push(false)
// tuple1[3] // 不能使用后添加的值
  • 枚举

自带类型的对象,自动增长,数字类型的枚举 可以反举,可以直接赋值,后面的会根据上一个自动推断自身值

知道名称,不知道值: const enum<名称> {}
使用:<枚举名称>.<名称>

知道值,不知道名称(反举):enum <名称> {}
使用: <枚举名称>[<值>]

enum UserType {Admin,User,Guest
}console.log(UserType.Admin)enum UserType2 {Admin = 0,User= 1,Guest = 2
}
let userItem:string = UserType2[1]
console.log(userItem)
  • any
    任意值

在不清楚是什么类型的时候用 any

let notSure: any = 4;
notSure.toFixed();
  • Object
    所有

与any类似,但是 Object 类型的变量不允许调用任何方法,有也并不能调用

let prettySure: Object = 4;prettySure.toFixed(); //  Property 'toFixed' does not exist on type 'Object'.
  • void
    空值

表示没有任何类型,当函数没有返回值时,使用void

function warnUser(): void {alert("This is my warning message");
}
  • Undefined 和 Null
    Undefined :不存在以后也不存在 Null:不存在以后可能存在
let u: undefined = undefined;
let n: null = null;
  • never
    永不存在类型

never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型;可以用来做代码完整性检测

function error(message: string): never {throw new Error(message);
}
function infiniteLoop(): never {while (true) {}
}
// 类型保护
function valiData(val: string | number) {}
function getResult(srtgrOrNum: string | number | boolean){if (typeof srtgrOrNum ==='string') {return srtgrOrNum;}if (typeof srtgrOrNum === 'number') {return srtgrOrNum;}// if (typeof srtgrOrNum === 'boolean') {//     return srtgrOrNum;// }// 永远不能到达这一步,到这一步说明方法缺失逻辑valiData(srtgrOrNum) // Argument of type 'string | number | boolean' is not assignable to parameter of type 'never'.   Type 'string' is not assignable to type 'never'.
}
  • Symbol
    永远唯一
let symbol1:symbol = Symbol("1")
let symbol2:symbol = Symbol("1")
console.log(symbol1 === symbol2) // false
let symbol3:symbol = Symbol.for("1") // 根据key找
console.log(symbol1 === symbol3) // true
  • BigInt
    长整型
let b1:bigint = BigInt(Number.MAX_SAFE_INTEGER + 100000)
console.log(b1)

类型推断

- 基本

在有些没有明确指出类型的地方,类型推论会帮助提供类型

let a = 1
let y ='2'
let z = true

在这里插入图片描述

  • 最佳通用类型

需要从几个表达式中推断类型时候,会使用这些表达式的类型来推断出一个最合适的通用类型

let x = [0, 1, null];

在这里插入图片描述

  • 上下文类型

TypeScript类型推论也可能按照相反的方向进行。 这被叫做“按上下文归类”。按上下文归类会发生在表达式的类型与所处的位置相关时。

window.onmousedown = function(mouseEvent) {console.log(mouseEvent.button);
};window.onmousedown = function(mouseEvent: any) {console.log(mouseEvent.button);
};

在这里插入图片描述

  • 联合类型

联合类型的变量只能访问公共方法,除非在使用方法前对变量已经赋值了。

let name: string | number ;
name.toFixed(); 

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/79c0bd86224c4ce7913fca2c963b9ce4.png

类型定义

使用 type 关键字定义自己的类型

type Person = '男' | '女' | '其它'
let person: Person = '男'

也可以通过对象属性和联合类型做互斥(可辨识联合类型)

type Person2 ={weal: true,waste: string}|{weal: false,waste: number}let person2: Person2 = {weal: true,waste: '123'
}
let person3: Person2 = {    weal: false,waste: 123
}

断言

断言就是,让代码绕过TS检查

  • 非空断言

指定其不可能为空

let ele = document.getElementById('app')
// 方式1
ele!.style.color ='red'
// as 断言
(ele as HTMLDivElement).style.color ='red'
  • 双重断言

将某个值通常断言成 any 再断言成 其他类型,any类型可以赋值给任何类型

let str: string | number
let boo = (str! as any) as boolean

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

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

相关文章

QQ频道导航退出

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/140413538 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…

Jquery常用操作汇总,dom操作,ajax请求

这段时间在写一些小Demo&#xff0c;用的都是很远古的Jquery,哈哈哈&#xff0c;但是呢也挺好玩儿的。想着记录一下。 题外话&#xff1a;补充一些自己欠缺的前端知识&#xff0c;&#xff08;我的前端学的比较乱&#xff0c;哈哈哈&#xff0c;原生的js不是很熟&#xff0c;&a…

链表的回文结构(链表的中间节点+反转链表)

链表的回文结构 一.链表的中间节点思路1&#xff1a;暴力求解思路2&#xff1a;快慢指针 二.返回倒数第k个节点思路1&#xff1a;暴力求解思路2&#xff1a;快慢指针 三.反转链表思路1&#xff1a;头插法思路2&#xff1a;反转指针的指向 四.链表的回文结构思路1&#xff1a;利…

「C++系列」一篇文章讲透【运算符】

文章目录 一、运算符1. 算术运算符2. 关系运算符3. 逻辑运算符4. 位运算符5. 赋值运算符6. 条件运算符&#xff08;三元运算符&#xff09;7. 成员访问运算符8. 指针和地址运算符9. 类型转换运算符10. 其他运算符 二、其他特殊运算符1. 成员访问运算符2. 指针和地址运算符3. 类…

Prometheus 云原生 - 监控 Linux、MySQL、Redis、RabbitMQ、Docker、SpringBoot 3.x

目录 开始 Exporter 采集数据&#xff0c;Prometheus 拉取并监控 Linux MySQL Redis RabbitMQ Docker SpringBoot 3.x 开始 Exporter 采集数据&#xff0c;Prometheus 拉取并监控 Note&#xff1a;Prometheus 和 Grafana 的部署已经在前面的章节中讲过了&#xff0c;不…

Solana Blink和SEND的崛起:技术与市场效应的结合

随着Solana生态系统的不断发展&#xff0c;新的项目和技术不断涌现&#xff0c;吸引了大量的关注和投资。最近&#xff0c;Solana的Blink项目及其相关的SEND代币成为了市场的焦点&#xff0c;引发了广泛的讨论和投资热潮。本文将探讨Blink和SEND的技术创新、市场表现以及未来的…

基于MATHCAD的傅里叶级数模拟和方波图像绘制

一、MATHCAD软件简介 MATHCAD是一款功能强大的数学计算软件&#xff0c;它允许用户以类似手写公式的方式输入数学表达式&#xff0c;并即时显示计算结果和图形。在工程研究和学术写作的世界里&#xff0c;MathCAD以其强大的符号运算能力和直观的数学书写体验脱颖而出。MATHCAD…

三相PWM整流器PI双闭环控制Simulink

1.模型简介 本仿真模型基于MATLAB/Simulink&#xff08;版本MATLAB 2017Rb&#xff09;软件。建议采用matlab2017 Rb及以上版本打开。&#xff08;若需要其他版本可联系代为转换&#xff09; 2.拓扑结构&#xff1a; 3.模型算法架构&#xff1a; 4.仿真算法&#xff1a; &am…

[AHK] WinHttpRequest.5.1报错 0x80092004 找不到对象或属性

目录 背景描述 用浏览器访问&#xff0c;正常返回 ​编辑 AHK v2官方示例源代码 AHK v2运行结果报错(0x80092004) 找不到对象或属性 用thqby大佬的WinHttpRequest.ahk库测试报错 0x80092004 找不到对象或属性 附&#xff1a; 用Apifox访问&#xff0c;也正常返回 AHK v1 …

克洛托光电再度合作福晶科技,高精度光学镜头装调仪正式交付

近日&#xff0c;苏州东方克洛托光电技术有限公司&#xff08;下称“克洛托光电”&#xff09;高精度光学镜头装调仪正式交付于福建福晶科技股份有限公司&#xff0c;研发人员在现场完成设备安装调试并介绍使用方法。据悉&#xff0c;这已是双方第二次展开合作。 前沿产品力助推…

【tomcat】Tomcat如何扩展Java线程池原理

池化技术 在后端中&#xff0c;对于经常使用池化就是来提升系统性能&#xff0c;比如数据库连接池、线程池连接池等&#xff0c;本质都是利用空间换时间的来提升性能&#xff0c;用来避免资源的频繁创建和销毁&#xff0c;以此提高资源的复用率&#xff0c;所以合理设置系统所…

大语言模型诞生过程剖析

过程图如下 &#x1f4da; 第一步&#xff1a;海量文本的无监督学习 得到基座大模型&#x1f389; &#x1f50d; 原料&#xff1a;首先&#xff0c;我们需要海量的文本数据&#xff0c;这些数据可以来自互联网上的各种语料库&#xff0c;包括书籍、新闻、科学论文、社交媒体帖…

简单搭建卷积神经网络实现手写数字10分类

搭建卷积神经网络实现手写数字10分类 1.思路流程 1.导入minest数据集 2.对数据进行预处理 3.构建卷积神经网络模型 4.训练模型&#xff0c;评估模型 5.用模型进行训练预测 一.导入minest数据集 MNIST--->raw--->test-->(0,1,2...) 10个文件夹 MNIST--->raw-…

VRRP虚拟路由冗余技术

VRRP虚拟路由冗余技术&#xff1a;是一种路由容错协议&#xff0c;用于在网络中提供路由器的冗余备份。它通过将多个路由器虚拟成一个虚拟路由器并且多个路由器之间共享一个虚拟IP地址来实现冗余和高可用性。当承担转发业务的主路由器出现故障时&#xff0c;其他备份路由器可以…

安全防御:防火墙概述

目录 一、信息安全 1.1 恶意程序一般会具备一下多个或全部特点 1.2 信息安全五要素&#xff1a; 二、了解防火墙 2.1 防火墙的核心任务 2.2 防火墙的分类 2.3 防火墙的发展历程 2.3.1 包过滤防火墙 2.3.2 应用代理防火墙 2.3.3 状态检测防火墙 补充防御设备 三、防…

骑士人才系统74cms专业版实现本地VUE打包和在线升级方法以及常见问题

骑士人才系统我就不多说了目前来说我接触的人才系统里面除了phpyun就是骑士人才了&#xff0c;两个历史都很悠久&#xff0c;总起来说功能方面各分伯仲&#xff0c;前几期我作过Phpyun的配置教程这次我们针对骑士人才系统说说怎么使用VUE源码本地一键打包后台和在线升级方式&am…

每日Attention学习10——Scale-Aware Modulation

模块出处 [ICCV 23] [link] [code] Scale-Aware Modulation Meet Transformer 模块名称 Scale-Aware Modulation (SAM) 模块作用 改进的自注意力 模块结构 模块代码 import torch import torch.nn as nn import torch.nn.functional as Fclass SAM(nn.Module):def __init__…

redisTemplate报错为nil,通过redis-cli查看前缀有乱码

public void set(String key, String value, long timeout) {redisTemplate.opsForValue().set(key, value, timeout, TimeUnit.SECONDS);} 改完之后 public void set(String key, String value, long timeout) {redisTemplate.setKeySerializer(new StringRedisSerializer()…

opencascade AIS_InteractiveContext源码学习8 trihedron display attributes

AIS_InteractiveContext 前言 交互上下文&#xff08;Interactive Context&#xff09;允许您在一个或多个视图器中管理交互对象的图形行为和选择。类方法使这一操作非常透明。需要记住的是&#xff0c;对于已经被交互上下文识别的交互对象&#xff0c;必须使用上下文方法进行…

最优化(10):牛顿类、拟牛顿类算法

4.4 牛顿类算法——介绍了经典牛顿法及其收敛性&#xff0c;并介绍了修正牛顿法和非精确牛顿法&#xff1b; 4.5 拟牛顿类算法——引入割线方程&#xff0c;介绍拟牛顿算法以及拟牛顿矩阵更新方式&#xff0c;然后给出了拟牛顿法的全局收敛性&#xff0c;最后介绍了有限内存BFG…