详解TypeScript的基础类型


Posted in Javascript onFebruary 18, 2022

布尔类型

// 布尔类型--->boolean
// let 变量名:数据类型 = 值
let flag: boolean = true;
console.log(flag)

数字类型

// 数字类型--->number
let a1: number = 10 // 十进制
let a2: number = 0b1010 // 二进制
let a3: number = 0o12// 八进制
let a4: number = 0xa // 十六进制
console.log(a1 + a2 + a3 + a4)

字符串类型

// 字符串类型--->string
let str1: string = '床前明月光';
let str2: string = '地上鞋两双';
console.log(str1 + ',' + str2)

字符串和数字进行拼接

let str3: string = '我现在的岁数:'
let a5: number = 24
console.log(`${str3}${a5}`)

总结:ts中变量一开始是什么类型,那么后期赋值的时候,只能用这个类型的数据,是不允许用其他类型的数据赋值给当前的这个变量中

undefined和 null

// undefined和 null都可以作为其他类型的子类璧,把undefined和nu1l赋值给其他类型的变量的,如: number类型的变量
let und: undefined = undefined
let n1l: null = null
console.log(und)
console.log(n1l)

数组类型

// 方式一:let变量名:数据类型[]=[值1,值2,值3,...]
let arr1: number[] = [10, 20, 30, 40, 50]
console.log(arr1);
// 方式二:泛型的写法
// 语法: let变量名: Array<数据类型>=[值1,值2,值3]
let arr2: Array<number> = [100, 200, 300]
console.log(arr2);

注意问题:数组定义后,里面的数据的类型必须和定义数组的时候的类型是一致的,否则有错误提示信息,也不会编译通过的

元组类型

// 元组类型:在定义数组的时候,类型和数据的个数一开始就已经限定了
let arr3: [string, number, boolean] = ['小甜甜', 100, true];
console.log(arr3)
// 注意问题:元组类型在使用的时候,数据的类型的位置和数据的个数应该和在定义元组的时候的数据类型及位置应该是一致的
console.log(arr3[0].split(''));
console.log(arr3[1].toFixed(2));

枚举类型

enum Color {
       red,
       green,
       blue
}
// 定义一个Color的枚举类型的变量来接收枚举的值
let color: Color = Color.red
console.log(color);
console.log(Color[2])

any类型

let str5: any = 100;
str5 = '宇智波带土'
console.log(str5);
// 当一个数组中要存储多个数据,个数不确定,类型不确定,此时也可以使用any类型来定义数组
let arr6: any = [100, '宇智波带土', true];
console.log(arr6)
// 这种情况下也没有错误的提示信息, any类型有优点,也有缺点
console.log(arr6[1].split(''));

void类型

function getobj(obj: object): object {
       console.log(obj);
       return {
           name: '卡卡西',
           age: 27
       }
}
console.log(getobj({ name: '佐助', age: 20 }))

联合类型

// 需求1:定义一个函数得到一个数字或字符串值的字符串形式值
function getString(str: number | string): string {
      return str.toString();
}
console.log(getString('萨斯给'))
 
// 需求2:定义一个一个函数得到一个数字或字符串值的长度
function getString1(str: number | string): number {
      return str.toString().length
      if ((<string>str).length) {
          return (str as string).length
      } else {
          return str.toString().length
      }
}
  console.log(getString1(12345))
  console.log(getString1('12345'))

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注三水点靠木的更多内容! 

Javascript 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
JavaScript实现图片上传并预览并提交ajax
Sep 30 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 Javascript
详解jQuery的核心函数和事件处理
Feb 18 #jQuery
JavaScript事件的委托(代理)的用法示例详解
Feb 18 #Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 #Vue.js
vue3获取当前路由地址
Feb 18 #Vue.js
如何利用React实现图片识别App
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 #Javascript
微信小程序中使用vant框架的具体步骤
You might like
PHP 调试工具Debug Tools
2011/04/30 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
原生Javascript和jQuery做轮播图简单例子
2016/10/11 Javascript
javascript学习之json入门
2016/12/22 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
2019/07/24 Javascript
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
商务专员岗位职责
2013/11/23 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
房产公证书范本
2014/04/10 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
我的暑假生活作文(五年级)范文
2019/08/07 职场文书
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android