TypeScript基础总结

一、TS 基础类型

(1)JavaScript 中的数据类型:

        string               字符串

        number             数值

        boolean           布尔

        null                   空

        undefined         未定义

        bigint                整数数据类型

        symbol              symbol 原始数据类型,独一无二的值

        object                引用数据类型,包含:Array、Function、Date、Error等

(2)TypeScript 类型

        TS 支持的变量类型如下:

类型描述
any限制为任意类型
unknown可以理解为一个类型安全的any,适用于:不确定数据的具体类型
never限制函数没有返回值,函数无线循环,抛出异常得函数
void限制为 undefined, 一般用来限制函数的返回值
字面量限制为某个字面量的值
boolean限制为布尔类型, true 或者 false
number限制为任意的数字。 二进制,八进制,十进制,十六进制均可
string限制为任意的字符串。单引号,双引号,反引号均可
object限制为对象类型
array限制为数组类型
tuple 元组限制为固定长度与类型的数组
enum 枚举限制为枚举的数据

(3)TypeScript类型具体声明

1. 字符串类型(string小写)

使用 string 表示文本数据类型,可以使用双引号(")或单引号(')表示字符串

let str :string = 'hanzhaohua'

2. 数字类型(number小写)

除了支持十进制和十六进制字面量,也支持二进制和八进制字面量。

let num :number = -666

3. 布尔类型(boolean小写)

最基本的数据类型就是简单的 true/false 值

let bool:boolean = true

4. 字面量类型

TS 允许限制某个变量为固定的某个值,用的很少

let x:123 = 123

5. any

any 类型允许变量的值为任意类型, 并且可以进行任意类型的赋值

let o: any;
o = 100
o = 'hello'
o = true

6. never

never的含义是:任何值都不是,简言之就是不能有值,多用于函数无线循环,抛出异常得函数

function fn():never {throw new Error('错误日志')
}
// 调用fn函数
fn()

7. void

void 限制值为 undefined,可以限制变量的值或者是函数的返回值,更多的时候是限制函数的返回值,通常用于函数返回值声明,含义:【函数返回值为空,调用者也不应依赖其返回值进行任何操作】

注意:undefined和void区别

void是一个广泛的概念,用来表达“空”,而 undefined 则是这种“空”的具体实现之一。
● 因此可以说 undefined是void能接受的“空”状态的一种具体形式。
● 换句话说:void包含undefined,但void表达的语义超越了单纯的 undefined,它是一种意图上的约定,而不仅仅是特定值的限制

let v: void;
console.log(v); //undefinedfunction fn1(): void {return;
}
console.log(fn1()); //undefinedlet fn = (): void => {return;
}
console.log(fn());  //undefined

8. 数组 Array[]

有两种方式可以定义数组。

​ (1) 可以在元素类型后面接上[],表示由此类型元素组成的一个数组:

// 1.数字数组
let numberArr :number[] = [1,2,3,4,5,6,7,8,9]
// 2.字符串数组
let stringArr :string[] = ['张三','李四','王五']

​ (2) 使用数组泛型,Array<元素类型>

// 3.泛型 Array<约束类型>
let arr2: Array<Boolean> =[true, false, true]

9. 元组(tuple)

元组(Tuple)类型允许表示一个已知元素数量和类型的数组各元素的类型不必相同用的较少

let personArray :[string, number] = ['韩召华', 28]
let objArr :[object, Array<number>] = [{x: 100}, [1,2,3]]
let arr :[string,number][] = [['张三', 20],['李四',21]]

10. 枚举(enum)

一般用于组织一些有相似之处的常量,让这些常量更规范、更统一。

enum gender {nan = '男',nv = '女',screct = '保密'
}
//11.创建一个枚举类型的变量
let sex: object = {sex: gender.nv
}
console.log(sex)

11. 联合类型

联合类型(Union Types)表示取值可以为多种类型中的一种

let o = string | number
o = 'hanhzaohua'
o = 19961112
// o = true; //其他类型不允许

12. 类型断言

TypeScript中的类型断言是一种将变量或表达式的类型强制转换为开发者指定的类型的方式。可以使用尖括号(<>)语法或者as语法进行类型断言。

let o: string | number;
o = 34.55666;
// console.log(o.toFixed(2));
//方法一:as
// console.log((o as number).toFixed(2))
//方法二:类型
console.log((<number>o).toFixed(2))

13. 类型推断

TS 会在没有明确的指定类型的时候推测出一个类型。主要有下面两种情况

  1. 变量声明时赋值了,推断为值对应的类型
  2. 变量声明时没有赋值, 推断为 any 类型
let t = 123;
// t = true; //已经赋值了的变量规定为number,再次修改也必须为number
t = 23;
console.log(t)let y;
y = 100;
y = 'hello';
y = true;
console.log(y)

 14. 非空断言

非空断言(Non-null Assertion)是 TypeScript 2.0 引入的新特性,用于告诉编译器一个变量不为 null 或 undefined,在某些场景下可以方便地解决一些类型检查问题。

非空断言的语法是在一个变量名或表达式的末尾添加一个感叹号 !,例如:

const element = document.querySelector('#myElement')!;
// querySelector 方法可能返回 null 或 undefined,但是通过在变量赋值后添加一个感叹号,告诉编译器该   变量不会为空,因此在编写后续的代码时就可以放心地省略对空值的判断了。

15. any中转

当等号左右两次的类型不一致的时候,我们还想让强行赋值,使用any中转一下

// 图片删除的回调
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {spuImageList.value = uploadFiles as any; //左右两边的类型不一致时,强行赋值
}

16. 函数

情况一: TypeScript 可以为参数与返回值设置类型,代码示例如下:

//1、普通函数
//参数添加类型
function fun(a: number, b: number) {console.log(a + b)
}
fun(1, 2);
//添加函数返回值类型
function fun1(x: string, y: number): string {return x + y;
}
console.log(fun1('11', 20));//2、箭头函数
let fun2 = (a: number, b: number): number => {return a + b;
}
console.log(fun2(12, 34));

情况二: 函数声明的完整形式

//4、声明函数
let fun5: (a: number, b: number) => number = (x: number, y: number): number => {return x + y;
}
console.log(fun5(10, 20));

情况三: 可选参数(ypeScript 默认要求函数实参数量要与形参的数量保持一致,不过可以使用 ?: 设置参数为可选参数)

let fn = (a: number, b: number, c?: number) => {console.log(a);console.log(b);console.log(c);
}
fn(1, 2)

情况四:参数默认值

let fun6: (a: number, b: number, c?: number) => number = (x: number, y: number, z: number = 40): number => {return x + y + z;
}
console.log(fun6(10, 20, 100));

(4)接口

//声明接口
interface BoyFriend {name: string;age: number;car ?: string;        // 可选属性readonly id: number, // 只读属性 这样设置后, 如果修改 id 属性, 编译器就会报错
}
//声明对象 满足接口结构与类型要求
let zhangsan: BoyFriend = {name: '张三',age: 18,
}
console.log(zhangsan);

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

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

相关文章

机器学习与深度学习2:梯度下降算法和BP反向传播算法

梯度下降算法&#xff1a; 算法原理 上一章我们已知神经网络算法就是求解拟合函数&#xff0c;通过线性变换和非线性变换来得出损失函数最小的模型。那么是如何进行求解的呢&#xff0c;其中之一就是梯度下降算法。 如图&#xff0c;当我们需要求解拟合曲线时&#xff0c;如何…

Verilog基础:层次化标识符的使用

相关阅读 Verilog基础https://blog.csdn.net/weixin_45791458/category_12263729.html?spm1001.2014.3001.5482 一、前言 Verilog HDL中的标识符(identifier)是一个为了引用而给一个Verilog对象起的名字&#xff0c;分为两大类&#xff1a;普通标识符大类和层次化标识符大类。…

HarmonyOS NEXT 应用开发实战(六、组件导航Navigation使用详解)

在鸿蒙应用开发中&#xff0c;Navigation 组件是实现界面间导航的重要工具。本文将介绍如何使用 Navigation 组件实现页面跳转及参数传递&#xff0c;确保你能轻松构建具有良好用户体验的应用。 当前HarmonyOS支持两套路由机制&#xff08;Navigation和Router&#xff09;&…

字典学习算法

分为固定基字典和学习型字典 学习型字典 是指通过训练大量与目标数据相似的数据&#xff0c;学习其特征获得的字典。字典学习主要包括两个阶段&#xff0c;一个是字典构建阶段&#xff0c;一个是利用字典进行样本表示阶段。 首次提出&#xff1a;最优方向法&#xff08;Method …

Euporie 是一款功能强大、使用便捷的终端 Jupyter 交互工具,让Jupyter Notebook在终端下运行

在现代数据科学领域&#xff0c;Jupyter Notebook 已成为不可或缺的工具&#xff0c;它以其强大的交互性、可读性和可移植性而闻名。然而&#xff0c;在某些场景下&#xff0c;例如远程服务器、容器环境或仅仅个人偏好&#xff0c;使用终端进行操作更便捷。 Euporie 应运而生&a…

spring day 1021

ok了家人们&#xff0c;这周学习spring框架&#xff0c;我们一起去看看吧 Spring 一.Spring概述 1.1 Spring介绍 官网&#xff1a; https://spring.io/ 广义的 Spring &#xff1a; Spring 技术栈 &#xff08;全家桶&#xff09; 广义上的 Spring 泛指以 Spring Framework…

STM32L010F4 最小系统设计

画一个 STM32L010F4 的测试板子...... by 矜辰所致前言 最近需要用到一个新的 MCU&#xff1a; STM32L010F4 &#xff0c;上次测试的 VL53L0X 需要移植到这个芯片上&#xff0c;网上一搜 STM32L010F4&#xff0c;都是介绍资料&#xff0c;没有最小系统&#xff0c;使用说明等。…

在VMware上创建虚拟机以及安装Linux操作系统,使用ssh进行远程连接VMware安装注意点 (包含 v1,v8两张网卡如果没有的解决办法)

一&#xff0c;VMware上创建虚拟机 1.VMware下载 1&#xff09;点击VMware官网进入官网 网址:VMware by Broadcom - Cloud Computing for the EnterpriseOptimize cloud infrastructure with VMware for app platforms, private cloud, edge, networking, and security.https…

NAT工作原理详解:网络地址转换的关键角色

NAT工作原理详解&#xff1a;网络地址转换的关键角色 在现代计算机网络中&#xff0c;网络地址转换&#xff08;NAT&#xff09;扮演着至关重要的角色。它不仅仅是简单地将私有IP地址转换为公共IP地址&#xff0c;而是在多个方面保证了网络的正常运行和安全性。本文将详细讲解…

从网络请求到Excel:自动化数据抓取和保存的完整指南

背景介绍 在投资和财经领域&#xff0c;论坛一直是投资者们讨论和分享信息的重要平台&#xff0c;而东方财富股吧作为中国最大的财经论坛之一&#xff0c;聚集了大量投资者实时交流股票信息。对于投资者来说&#xff0c;自动化地采集这些发帖信息&#xff0c;并进行分析&#…

Maven私服架构

目录 1.maven私服介绍 1.1 私服介绍 1.2 Nexus介绍 2. maven私服实战 2.1 nexus安装 2.2 nexus仓库类型 2.3 将项目发布到私服 2.4 从私服下载jar包 2.5 将第三方jar包发布到私服 1.maven私服介绍 1.1 私服介绍 正式开发时&#xff0c;不同的项目组开发不同的工程。m…

《深度学习》 了解YOLO基本知识

目录 一、关于YOLO 1、什么是YOLO 2、经典的检测方法 1&#xff09;one-stage单阶段检测 模型指标介绍&#xff1a; 2&#xff09;two-stage多阶段检测 二、关于mAP指标 1、概念 2、IOU 3、关于召回率和准确率 4、示例 5、计算mAP 一、关于YOLO 1、什么是YOLO YOL…

一文2500字从0到1实现压测自动化!

大家好&#xff0c;我是小码哥&#xff0c;最近工作有点忙&#xff0c;一直在实现压测自动化的功能&#xff0c;今天来分享一下实现思路 我所在的业务线现在项目比较少了&#xff0c;所以最近一个月我都没有做业务测试&#xff0c;需求开发完后RD直接走免测就上线&#xff0c;…

手机ip切换成全局模式怎么弄

在当今数字化时代&#xff0c;智能手机已成为我们日常生活中不可或缺的一部分&#xff0c;无论是工作、学习还是娱乐&#xff0c;都离不开它的陪伴。随着网络技术的不断发展&#xff0c;手机IP地址的切换技术也逐渐走进大众视野&#xff0c;中&#xff0c;“全局模式” 作为IP切…

windows环境下vscode编写c语言连接mysql

创建一个文件夹test02 在文件夹中创建test.c文件 用vscode打开test02文件夹 自动生成tasks.json和launch.json文件&#xff0c;需要安装这里通C/C Runner插件来自动生成json文件和一些文件夹。 接下来配置mysql 本地已经安装了mysql数据库&#xff0c;此安装过程省略。 有…

java如何部署web后端服务

java如何部署web后端服务 简单记录一下&#xff0c;方便后续使用。 部署流程 1.web打包 2.关掉需要升级的运行中的服务 /microservice/hedgingcustomer-0.0.1-SNAPSHOT/conf/bin/ 执行脚本 sh shutdown.sh 3.解压文件 返回到/microservice 将升级包上传到该路径&#x…

JAVA IDEA 取消掉Warning:(22, 14) Class ‘XXXController‘ is never used 提示信息

方法一&#xff1a;代码修改 无用的方法&#xff1a; 删除对应的代码。增加该类对应的应用实现。 方法二&#xff1a;取消掉提示 找到settings—Editor—Inspections&#xff0c;搜索Unused declaration 右边的勾取消掉&#xff0c;对应的校验属性。

座舱软件开发“道与术”

脑图 仅仅个人归纳见解&#xff0c;欢迎专家莅临指导。

【CHI】CHI协议自问自答

学习CHI有一段时间了&#xff0c;如今回过头来&#xff0c;再读协议&#xff0c;一些问题做个记录。如果有错误的地方&#xff0c;欢迎指正。如果有其他的问题&#xff0c;也欢迎留言讨论。 spec&#xff1a; IHI0050F_amba_chi_architecture_spec 【持续更新ing】 目录 1. …

react18中如何实现同步的setState来实现所见即所得的效果

在react项目中&#xff0c;实现添加列表项&#xff0c;最后一项自动显示在可视区域范围&#xff01;&#xff01; 实现效果 代码实现 import { useState, useRef } from "react"; import { flushSync } from "react-dom"; function FlushSyncRef() {con…