当前位置: 首页 > 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华数杯…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...