当前位置: 首页 > news >正文

TypeScript的基本类型

typescript的定义

  • 以JavaScript为基础构建的语言
  • 是js的超集
  • 可以在任何支持js的平台执行
  • ts 拓展了js并增加了类型
  • Ts不能被js解析器直接执行。

TS=> 编译为js 执行的还是js.
js 不易于维护,而ts易于维护。
可提高项目的可维护性。

类似less、sass 完善的语法写 样式,最终转为css . 所有浏览器都能渲染
ts 都需要转为js ,编译ts ,比js 多一道工序
可以完全按照js来写。

TS增加了什么?

  • 类型(有js的类型number、string 、boolean等, 也有新增:给变量设置类型、 元祖 枚举、 抽象类)
  • 支持ES的新特性
  • 添加ES不具备的新特性 (抽象类 接口 工具 装饰器等)
  • 丰富的配置选项(严格 松散 ts可编译为任意版本 解决浏览器兼容性问题,比如ie老版本的浏览器也可兼容,将ts编译为ES3)
  • 强大的开发工具(编辑器的提示)

基本类型

  • 类型声明: let 变量:类型=值 ; let fn(参数:类型,参数:类型):类型{}
  • 自动类型判断 当对变量的声明和赋值是同时进行时,ts编译器会自动判断变量的类型,所以可以省略掉类型声明
  • 类型:number、string、boolean、使用字面量进行类型声明、any、unknown、void、never、object、array、tuple元祖、enum枚举
//声明一个变量a,同时指定类型为number
let a :number;
// a 的类型设置为number,在以后的使用过程中a的值只能是数字
a = 10;
//a='hi' // 是会报错的,因为变量a的类型是number,不能赋值字符串
// 在写上述代码过程中,虽然有错误,但通过tsc 1.ts 还是会继续编译
//不会阻止编译,后续可以通过编辑器的配置,设置为书写错误就不编译ts
let b:string;
b = 'hello';
//声明完变量就直接赋值
//let c:boolean = true;
//如果变量的声明和赋值是同时进行时,ts编译器会自动判断变量的类型
let c = false
c=true//JS中的函数是不考虑参数的类型和个数的
//function sum(a,b){
//	return a+b
//}
//console.log(sum(a:123,b:456)) // 579
console.log(sum(a:123,b:'456')) // '123456'//TS 写法 可以给参数 和返回值指定类型 都是小写
function sum(a:number,b:number):number{return a+b
}
sum(123,456) // 579
//sum(123,'456') // 会报错// 使用字面量声明变量
let a1:10;
a1 = 10;
//a1 = 11 // 会报错 ,指定了a1为10
// 可以使用|连接多个类型(联合类型)
let b1 : 'male' | 'female';
b1 = 'male'
b1 = 'female'
//b1 = 'hello' // 这里会报错
let c1 : boolean|string;
c1 = true;
c1 = 'hi'
// any 表示任意类型 ,一个变量设置类型为any后,相当于对该变量关闭了TS的类型检测
// 使用TS时不建议使用any类型
//let d:any;
// 声明变量如果不指定类型,则TS解析器会自动判断变量的类型为any(隐式的any)
let d;
d=true;
d = 'zifuchuan'
d=21
//unknown 表示未知类型的值 只霍霍自己,不会改变其他的变量
let e: unknown;
e = 12
e = true
e = 'hello'let s :string;
//d的类型是any,他可以赋值给任意变量;(不止是自己修改了,还会改其他的变量)
//s = d;
//unknown 是一个类型安全的any
//unknown类型的变量,不能直接赋值给其他变量
e = 'hello2'
//s = e // 会报错 不能把unknown类型的值赋值给其他类型的值
//可使用以下方式
if(typeof e === 'string'){s = e
}// 可使用类型断言 ,用来告诉解析器变量的实际类型 
/*
*  语法:
* 	变量 as 类型
* 	<类型>变量
*/
//尽管解析器不知道是什么类型,确定是string类型
s = e as string;
s = <string>e;// void 表示空,以函数为例,表示没有返回值的函数,单纯的console。alert
function fn1():void{}// never 表示永远不会返回结果
function fn2():never{throw new Error('报错啦')
}// object 表示js的对象
let o :object;
o = {};
o = function (){}
// {} 用来指定对象中可以包含哪些属性
//语法:{属性名:属性值,属性名:属性值}
// 在属性名后加?表示属性是可选的
let o1:{name:string,age?:number};
o1 = {name:'七公主',age:23};// [propName:string]:any 表示任意类型的属性 定义对象的属性
// 例子 :o2对象里有一个name属性,其他属性不管
let o2 :{name:string,[propName:string]:any}
o2 = {name:'七公主',age:23,set:'2'}// 对象中,要同时满足两个类型 &表示同时
let o3:{name:string} &{age:number}
o3 = {name:'八戒',age:23}/*
*  设置函数结构的类型声明
* 	语法:(形参:类型,形参:类型,形参:类型...)=> 返回值
*/
let func:(a:number,b:number)=> number
func = function(n1:number,n2:number):number{return n1+n2
}// array 数组
/*
*   数组的类型声明:
* 		类型[]
* 		Array<类型>
*/
// string[] 表示字符串数组
let stringArr:string[];
stringArr=['aa','b','cc']
// number[] 表示数值的数组
let numArr:number[];
numArr=[1,2,3]
// number[] 等同于Array<number>  
let numArr2:Array<number>;
numArr2 = [2,3,4];// 元祖:固定长度的数组 语法:[类型,类型]
let h:[string,number];
h = ['hello',21];//enum 枚举
/*
*	enum 枚举
*/
enum Gender{Male=0,FeMale=1
}
let i:{name:string,gender:Gender};
i = {name:'孙悟空',gender:Gender.Male  // 'male'
};
console.log(i.gender===Gender.Male) // true//类型的别名  可以简化类型的使用
type Mytype = 1|2|3|4|5;
let k:Mytype;
let m:Mytype;
let n:Mytype;
k = 2

====over

相关文章:

TypeScript的基本类型

typescript的定义 以JavaScript为基础构建的语言是js的超集可以在任何支持js的平台执行ts 拓展了js并增加了类型Ts不能被js解析器直接执行。 TS> 编译为js 执行的还是js. js 不易于维护&#xff0c;而ts易于维护。 可提高项目的可维护性。 类似less、sass 完善的语法写 样…...

Docker实战-如何去访问Docker仓库?

导语   仓库在之前的分享中我们介绍过,它主要的作用就是用来存放镜像文件,又可以分为是公共的仓库和私有仓库。有点类似于Maven的中央仓库和公司内部私服。 下面我们就来介绍一下在Docker中如何去访问各种仓库。 Docker Hub 公共镜像仓库 Docker Hub 是Docker官方提供的最…...

【力扣】722. 删除注释

以下为力扣官方题解&#xff0c;及本人代码 722. 删除注释 题目题意示例 1示例 2提示 官方题解模拟思路与算法复杂度 本人代码Java提交结果&#xff1a;通过 题目 题意 给一个 C C C 程序&#xff0c;删除程序中的注释。这个程序 s o u r c e source source 是一个数组&a…...

篇二:工厂方法模式:灵活创建对象

篇二&#xff1a;“工厂方法模式&#xff1a;灵活创建对象” 开始本篇文章之前先推荐一个好用的学习工具&#xff0c;AIRIght&#xff0c;借助于AI助手工具&#xff0c;学习事半功倍。欢迎访问&#xff1a;http://airight.fun/。 另外有2本不错的关于设计模式的资料&#xff…...

Python(六十二)字典元素的增、删、改操作

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…...

从零学算法138

**138.**给你一个长度为 n 的链表&#xff0c;每个节点包含一个额外增加的随机指针 random &#xff0c;该指针可以指向链表中的任何节点或空节点。 构造这个链表的 深拷贝。 深拷贝应该正好由 n 个 全新 节点组成&#xff0c;其中每个新节点的值都设为其对应的原节点的值。新节…...

CTF PWN练习之返回地址覆盖

今天进行的实验是CTF PWN练习之返回地址覆盖&#xff0c;来体验一下新的溢出方式。 学习地址覆盖之前还有些小知识需要掌握&#xff0c;不然做题的时候你肯定一脸懵逼,首先是函数调用约定&#xff0c;然后还要知道基本的缓冲区溢出攻击模型。 函数调用约定 函数调用约定描述…...

OpenCV中图像变换

一、介绍 transform()&#xff1a;Transposes a matrix. perspectiveTransform()&#xff1a;Performs the perspective matrix transformation of vectors. warpAffine()&#xff1a;Applies an affine transformation to an image. warpPerspective()&#xff1a;Applies a p…...

wordpress发表文章时报错: rest_cannot_create,抱歉,您不能为此用户创建文章(已解决)

使用wordpress 的rest api发布文章&#xff0c;首先使用wp-json/jwt-auth/v1/token接口获取token&#xff0c;然后再使用/wp-json/wp/v2/posts 接口发表文章&#xff0c;但是使用axios请求时&#xff0c;却报错&#xff1a; 但是&#xff0c;我在postman上却是可以的&#xff0…...

数学建模学习(7):Matlab绘图

一、二维图像绘制 1.绘制曲线图 最基础的二维图形绘制方法&#xff1a;plot -plot命令自动打开一个图形窗口Figure&#xff1b; 用直线连接相邻两数据点来绘制图形 -根据图形坐标大小自动缩扩坐标轴&#xff0c;将数据标尺及单位标注自动加到两个坐标轴上&#xff0c;可自定…...

CSS中所有选择器详解

文章目录 一、基础选择器1.标签选择器2.类选择器3.id选择器4.通配符选择器 二、复合选择器1.交集选择器2.并集选择器 三、属性选择器1.[属性]2.[属性属性值]3.[属性^属性值]4.[属性$属性值]5.[属性*属性值] 四、关系选择器1.父亲>儿子2.祖先 后代3.兄弟4.兄~弟 五、伪类选择…...

STM32 低功耗学习

STM32 电源系统结构介绍 电源系统&#xff1a;VDDA供电区域、VDD供电区域、1.8V供电区域、后备供电区域。 器件的工作电压&#xff08;VDD&#xff09;2.0~3.6V 为了提高转换精度&#xff0c;给模拟外设独立供电。电压调节器为1.8V供电区域供电&#xff0c;且1.8V供电区域是电…...

HCIP--云计算题库 V5.0版本

在国家政策的支持下&#xff0c;我国云计算应用市场发展明显加快&#xff0c;越来越多的企业开始介入云产业&#xff0c;出现了大量的应用解决方案&#xff0c;云应用的成功案例逐渐丰富&#xff0c;用户了解和认可程度不断提高&#xff0c;云计算产业发展迎来了“黄金机遇期”…...

小白到运维工程师自学之路 第六十五集 (docker-compose)

一、概述 Docker Compose 的前身是 Fig&#xff0c;它是一个定义及运行多个 Docker 容器的工具。可以使用YAML文件来配置应用程序的服务。然后&#xff0c;使用单个命令&#xff0c;您可以创建并启动配置中的所有服务。Docker Compose 会通过解析容器间的依赖关系&#xff08;…...

量子机器学习

量子机器学习(QML)是结合量子计算和机器学习的交叉领域&#xff0c;旨在利用量子计算的优势来改进机器学习算法的性能。下面是一些有关量子机器学习的学习资源和技术应用&#xff1a; 学术论文和研究资料&#xff1a; ArXiv.org&#xff1a;在ArXiv的量子物理和机器学习类别中&…...

WEB集群——tomcat

1. 简述静态网页和动态网页的区别。 2. 简述 Webl.0 和 Web2.0 的区别。 3. 安装tomcat8&#xff0c;配置服务启动脚本&#xff0c;部署jpress应用。 一、简述静态网页和动态网页的区别 &#xff08;1&#xff09;静态网页 1.什么是静态网页 请求响应信息&#xff0c;发…...

Vulnhub: blogger:1靶机

kali&#xff1a;192.168.111.111 靶机&#xff1a;192.168.111.176 信息收集 端口扫描 nmap -A -sC -v -sV -T5 -p- --scripthttp-enum 192.168.111.176 在80端口的/assets/fonts/目录下发现blog目录&#xff0c;访问后发现为wordpress 利用wpscan发现wordpress插件wpdisc…...

老版MFC工程迁移到VC2019编译EXE太大的问题

有个老版静态链接MFC库的MFC程序需要迁移到VC2019编译&#xff0c;直接用VC2019打开就会自动迁移过去&#xff0c;然后编译一下&#xff0c;生成的EXE大小将近3MB&#xff0c;老版的工程编译出来也就600多KB。 肯定哪里不对劲&#xff01; 好一顿研究之后发现原来默认会把MFC…...

Curve深陷安全事件,OKLink如何破局

出品&#xff5c;欧科云链研究院 作者&#xff5c;Matthew Lee 7月31号&#xff0c;Curve 在平台表示 Vyper 0.2.15 的稳定币池由于编译器的漏洞所以遭到攻击。具体因为重入锁功能的失效&#xff0c;所以黑客可以轻易发动重入攻击&#xff0c;即允许攻击者在单次交易中执行某…...

2023华数杯数学建模思路A题B题C题模型代码分析

目录 一.2023华数杯数学建模最新思路&#xff1a;比赛开始后第一时间更新 更新查看文末名片 二.往年华数杯赛题简介分析&#xff1a; 一.2023华数杯数学建模最新思路&#xff1a;比赛开始后第一时间更新 更新查看文末名片 二.往年华数杯赛题简介分析&#xff1a; 2022华数杯…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...

MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...