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. 类…

Laravel入门:快速启动你的第一个应用

当然&#xff01;下面是关于如何使用Laravel快速启动你的第一个应用的教程。 Laravel入门&#xff1a;快速启动你的第一个应用 1. 简介 Laravel是一个现代化的PHP框架&#xff0c;以其优雅的语法和丰富的功能广受欢迎。本教程将引导你从零开始创建一个简单的Laravel应用。 2…

python的自省机制(改bug有用)

在 Python 中&#xff0c;自省&#xff08;Introspection&#xff09;机制是指程序在运行时能够获取自身的信息&#xff0c;例如对象的类型、属性、方法等。 Python 提供了一些内置函数和特殊属性来支持自省。以下是一些常见的例子&#xff1a; type() 函数&#xff1a;返回对象…

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的技术创新、市场表现以及未来的…

C++中的自定义数据类型:类和结构体

目录 自定义数据类型(1)类A.面向对象的四大特征B.What&#xff08;什么是类&#xff09;C.Why&#xff08;类的作用&#xff09;D.How&#xff08;如何定义和使用类&#xff09; (2)结构体 自定义数据类型 (1)类 A.面向对象的四大特征 谈到类&#xff0c;就必须讲一下面向对…

基于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…

Lua协程(同步的多线程)

1.coroutine.create( func ) 创建一个协程&#xff0c;返回co&#xff08;coroutine&#xff09;&#xff0c;参数是一个函数&#xff0c;当调用resume时就唤醒co并调用函数 2.coroutine.resume(co, 函数参数们) 启动协程co并传入协程调用函数的参数&#xff0c;可以带回协程…

前端XMLHttpRequest、Fetch API、Axios实现文件上传、下载方法及后端Spring文件服务器处理方法

前言 本文总结Web应用开发中文件上传、下载的方法&#xff0c;即从前端表单输入文件并封装表单数据&#xff0c;然后请求后端服务器的处理过程&#xff1b;从基础的JavaScript中XmlHttpRequest对象、Fetch API实现上传、下载进行说明&#xff0c;并给出了前端常用的axios库的请…

[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;这已是双方第二次展开合作。 前沿产品力助推…

django之 annotate,aggrate

annotate&#xff1a;annotate() 不是一个终止子句。 annotate() 子句的输出是一个 QuerySet&#xff1b;这个 QuerySet 可以使用任何其他 QuerySet 操作进行修改&#xff0c;包括 filter()、order_by()&#xff0c;甚至对 annotate() 的额外调用。"增加一列属性" ag…

k8s中kubesphere开启devops总是报错解决

自己搭建过k8s集群遇到各种形式的报错&#xff0c;手动去解决&#xff0c;其实这都是由程序自动去解决的问题&#xff0c;由于自己的的失误导致问题不得不去亲自解决是虽然管用但费时费力&#xff0c;在kubersphere开启devops本身没什么问题&#xff0c;但由于虚拟机配置低导致…

SpringBoot+Vue实现简单的文件上传(策略模式)

SpringBootVue实现简单的文件上传 1 环境 SpringBoot 3.2.1&#xff0c;Vue 2&#xff0c;ElementUI 2 问题 前两篇文章&#xff0c;我们上传了txt、Excel文件&#xff0c;其实文件类型有很多种&#xff0c;如果我们的upload组件没有上传文件类型的限制&#xff0c;那么同一个…

MongoDB Shard 集群 Docker 部署

MongoDB Shard Docker 部署 部署环境 主机地址主机配置主机系统Mongodb1/192.168.31.1352CPU 4GBDebian12Mongodb2/192.168.31.1092CPU 4GBDebian12Mongodb3/192.168.31.1652CPU 4GBDebian12 镜像版本 mongodb/mongodb-community-server:5.0.27-ubuntu2004 部署集群 部署…

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

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