TypeScript核心

常用操作方式

1、类型推断

在这里插入图片描述

ts会根据变量存放的初始值来进行变量类型限定。
如上:开始str是字符串,则此变量以后就只能存字符串值。
开发中的意义:变量分配字符串值,后期可能会书写一些字符串功能、方法等相关的操作,如果在过程中突然分配了一个数值,意味着这些针对字符串的操作都会出现错误,为了避免这种情况,ts有这种类型约束功能。
不建议书写,看起来不直观

2、类型注解

在这里插入图片描述

3、类型断言

在这里插入图片描述
程序在推断的时候认为有可能是 undefined,而 undefined * 5 就会变成 NaN

假如确定里面的值是必然有值大于2,可以通过类型断言的方式来设置,操作如下:

在这里插入图片描述

语法:变量 as 类型 或者 <类型>变量

4、基础类型和联合类型
let v1: string = 'abc'
let v2: number = 10
let v3: boolean = true
let nu: null = null
let un: undefined = undefined
any类型

any 表示任意类型,设置后相当于关闭了TS的类型检查,不建议使用;如果声明变量不指定类型,则TS解析器会自动判断变量为 any

let an: any
let s: string
s = an

any类型变量可以赋值给任意变量
在这里插入图片描述

unknown类型

unknown 表示未知类型的值,实际上就是一个类型安全的any,unknown类型的变量,不能直接赋值给其他变量

let unk: unknown
unk = "hello"
let s: string
if(typeof unk === "string") {s = unk
}
// 或者使用类型断言
s = unk as string
s = <string>unk

联合类型,希望值有可能被分配为字符串或null

let v4: string | null = null

null默认是可以分配给其他任意类型的

除了限定类型以外还可以做一些具体值的限定

在这里插入图片描述

let v5: 1 | 2 | 3 = 2
5、对象

{ } 用来指定对象中可以包含哪些属性

let a: {name: string, age?: number}
a = {name: "张三", age: 18}

[propName: string]: any表示任意类型的属性

let b: {name: string, [propName: string]: any}
b = {name: "张三", age: 18, gender: "男"}

设置函数结构的类型声明

let c (a: number, b: number) => number
6、数组、元组、枚举
数组

在这里插入图片描述

由数值组成的数组

let arr: number[] = [1, 2, 3]

let arr: Array<number> = [1, 2, 3]
元组

元组也可以存储多个数据,但它限定了存储的数据个数及每个数据的类型(固定长度的数组)

在这里插入图片描述
必须都匹配上

let t: [number, string, number] = [1, 'abc', 2]

希望某个值可选,在类型后加?

let t: [number, string, number?] = [1, 'abc']
枚举

枚举需要使用关键字enum,后面书写要声明的枚举类型名称,接着大括号里写要使用的数据

在这里插入图片描述

把所有可能的情况都列举出来,设置多个值,结果在多个值之间选择的时候适合用枚举

enum Gender {Male,Female
}
let r: {name: string, gender: Gender}
r = {name: "张三",gender: Gender.Male
}
7、函数

void类型 只能被分配 undefined 值(严格模式)

一般在使用的时候很少会给变量去赋这个值,通常用在函数上,比如函数没有返回值的时候默认就是 undefined

在这里插入图片描述

在配置的时候配置了不允许由 any 的情况,可以给参数分配类型

function MyFun (a: number, b: string) {return a + b
}

可以给返回值分配类型

在这里插入图片描述

当函数有返回值的时候不能写 void ,要写一个具体类型

function MyFun (a: number, b: string): string {return a + b
}
function MyFun (a: number, b: string): number {return 1
}

当类型与返回值不一致时也会报错

在这里插入图片描述

可以把参数设置成可选,注意:可选参数要放在必选参数之后

function MyFun (a = 10, b: string, c?: boolean, ...rest: number[]): number {return 1
}
const f = MyFun(10, 'abc', true, 1, 2, 3)
8、接口

通常用来进行一个对象的定义

interface Obj {name: string,age: number
}
const obj: Obj = {name: 'abc',age: 18
}
9、类型别名
type Username = string | number
let username: Username = 'jack'type myType = 1 | 2 | 3 | 4 | 5
let k: myType
10、泛型
function myFn (a: number, b: number): number[] {return [a, b]
}

通过这个函数想处理一组字符串值、一组布尔值或者其他各种各样的值,做成一个比较通用的函数

function myFn<T> (a: T, b: T): T[] {return [a, b]
}
myFn<number>(1, 2)
myFn<string>('abc', 'def')

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

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

相关文章

在Linux中,部署及优化Tomcat

tomcat概述 自 2017 年 11月编程语言排行榜 Java 占比 13%,高居榜首&#xff0c;Tomcat 也一度成为 Java开发人员的首选。其开源、占用系统资源少、跨平台等特性深受广大程序员喜爱。本章主要学习如何部署 Tomcat 服务&#xff0c;根据生产环境实现多个虚拟主机的配置&#xf…

GPT-4引领:AI新浪潮的转折点

OneFlow编译 **翻译&#xff5c;贾川、杨婷、徐佳渝 编辑&#xff5c;王金许** 一朝成名天下知。ChatGPT/GPT-4相关的新闻接二连三刷屏朋友圈&#xff0c;如今&#xff0c;这些模型背后的公司OpenAI的知名度不亚于任何科技巨头。 不过&#xff0c;就在ChatGPT问世前&#x…

ISP 代理提供商:互联网安全的关键参与者

简介&#xff1a;互联网安全的演变态势 互联网改变了我们互动、工作和开展业务的方式&#xff0c;但也带来了与安全性和可访问性相关的重大挑战。在这个数字时代&#xff0c;互联网服务提供商 (ISP) 代理提供商在解决这些问题方面发挥着关键作用。他们提供的基本服务不仅可以增…

pytest使用

主要技术内容 1.pytest设计 接口测试 框架设想 common—公共的东西封装 1.request请求 2.Session 3.断言 4.Log 5.全局变量 6.shell命令 ❖ config---配置文件及读取 ❖ Log— ❖ payload—请求参数—*.yaml及读取 ❖ testcases—conftest.py; testcase1.py…….可…

Can we Deploy Web Application in Azure OpenAI of Production Level

题意&#xff1a;我们可以在Azure OpenAI中部署生产级别的Web应用程序吗 问题背景&#xff1a; I have created azure ai search service and used Text split skillset and made index. I also deployed a web Application but have a question that If I want to create to …

【React】JSX 实现列表渲染

文章目录 一、基础语法1. 使用 map() 方法2. key 属性的使用 二、常见错误和注意事项1. 忘记使用 key 属性2. key 属性的选择 三、列表渲染的高级用法1. 渲染嵌套列表2. 条件渲染列表项3. 动态生成组件 四、最佳实践 在 React 开发中&#xff0c;列表渲染是一个非常常见的需求。…

队列的实现

概念与结构 概念&#xff1a;只允许在⼀端进行插入数据操作&#xff0c;在另⼀端进行删除数据操作的特殊线性表&#xff0c;队列具有先进先出FIFO(First In First Out)。 入队列&#xff1a;进行插入操作的⼀端称为队尾。 出队列&#xff1a;进行删除操作的⼀端称为队头。 …

使用echo写入多行文字到文件时换行的处理

目标 想使用echo写入如下内容到文件program.c里 #include<stdio.h> int main(){printf("hello!\n"); } 需要处理 1、如何处理行换 2、代码中的换行如何处理 实际例子 创建文件夹 mkdir test cd test chmod 777 . 创建文件写入内容 查看 cat -n program.c…

基于PSO粒子群优化的GroupCNN分组卷积网络时间序列预测算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 粒子群优化算法&#xff08;PSO&#xff09; 4.2 分组卷积神经网络&#xff08;GroupCNN&#xff09; 4.3 PSO优化GroupCNN 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行…

Mysql注意事项(一)

Mysql注意事项&#xff08;一&#xff09; 最近回顾了一下MySQL&#xff0c;发现了一些MySQL需要注意的事项&#xff0c;同时也作为学习笔记&#xff0c;记录下来。–2020年05月13日 1、通配符* 检索所有的列。 不建议使用 通常&#xff0c;除非你确定需要表中的每个列&am…

vue3前端开发-小兔鲜项目-form表单的统一校验

vue3前端开发-小兔鲜项目-form表单的统一校验&#xff01;实际上&#xff0c;为了安全起见&#xff0c;用户输入的表单信息&#xff0c;要满足我们的业务需求&#xff0c;参数类型等种种标准之后&#xff0c;才会允许用户向服务器发送登录请求。为此&#xff0c;有必要进行一次…

重拾CSS,前端样式精读-函数(颜色,计算,图像和图形)

前言 本文收录于CSS系列文章中&#xff0c;欢迎阅读指正 在计算机编程中&#xff0c;函数有着重要的作用和意义&#xff0c;它可以实现封装&#xff0c;复用&#xff0c;模块化&#xff0c;参数等功能效果&#xff0c;在如何在CSS中写变量&#xff1f;一文带你了解前端样式利…

sql注入的专项练习 sqlilabs(含代码审计)

在做题之前先复习了数据库的增删改查&#xff0c;然后自己用本地的环境&#xff0c;在自己建的库里面进行了sql语句的测试&#xff0c;主要是回顾了一下sql注入联合注入查询的语句和sql注入的一般做题步骤。 1.获取当前数据库 2.获取数据库中的表 3.获取表中的字段名 一、sql…

Python升级打怪—Django入门

目录 一、Django简介 二、安装Django 三、创建Dajngo项目 (一) 创建项目 (二) 项目结构介绍 (三) 运行项目 (四) 结果 一、Django简介 Django是一个高级Python web框架&#xff0c;鼓励快速开发和干净、实用的设计。由经验丰富的开发人员构建&#xff0c;它解决了web开…

学习笔记-系统框图简化求传递函数公式例题

简化系统结构图求系统传递函数例题 基础知识回顾 第四讲 控制系统的方框图 (zhihu.com) 「自控原理」2.3 方框图的绘制及化简_方框图化简-CSDN博客 自动控制原理笔记-结构图及其等效变换_结构图等效变换-CSDN博客 例子一 「自控原理」2.3 方框图的绘制及化简_方框图化简-CS…

PYTHON学习笔记(八、字符串及的使用)

目录 1、字符串 1.1、字符串的常用操作 1.2、格式化字符串 1.2.1、占位符格式化字符串 1.2.2、f-string格式化字符串 1.2.3、str.format( )格式化字符串 1.3、数据的验证 1.4、正则表达式 1.5.1元字符 1.5.2限定符 1.5.3其他字符 1.5.4re模块 1、字符串 1.1、字符…

文件解析的终极工具:Apache Tika

文件解析的终极工具&#xff1a;Apache Tika Apache Tika 简介 Apache Tika 是一个开源的、跨平台的库&#xff0c;用于检测、提取和解析各种类型文件的元数据。 它支持多种文件格式&#xff0c;包括文档、图片、音频和视频。 Tika是一个底层库&#xff0c;经常用于搜索引擎…

Python | Leetcode Python题解之第279题完全平方数

题目&#xff1a; 题解&#xff1a; class Solution { public:// 判断是否为完全平方数bool isPerfectSquare(int x) {int y sqrt(x);return y * y x;}// 判断是否能表示为 4^k*(8m7)bool checkAnswer4(int x) {while (x % 4 0) {x / 4;}return x % 8 7;}int numSquares(i…

【Linux】基本指令1

文章目录 1. find2. which3. alias4.whereis5.grep6. sort 、uniq7. linux怎么编辑文件中的内容 1. find 1.1 find: 查找文件所在的位置。&#xff08;当我们进行find搜索的时候&#xff0c;可能需要访问磁盘进而导致效率低下。&#xff09; 1.2 find / file.txt 在Linux系统是…

室内消防逃生通道占用检测AI算法:科技筑防,守护生命通道

随着城市化进程的加快&#xff0c;高层建筑和大型公共场所的数量急剧增加&#xff0c;消防安全问题愈发凸显。其中&#xff0c;室内消防逃生通道的畅通性直接关系到火灾发生时人员的安全疏散。然而&#xff0c;由于各种原因&#xff0c;如杂物堆放、车辆停放等&#xff0c;消防…