详解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 相关文章推荐
javascript实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
JavaScript 比较时间大小的代码
Apr 24 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
理解javascript中try...catch...finally
Dec 25 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
详解jquery easyui之datagrid使用参考
Dec 05 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 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开发微信支付的代码分享
2014/05/25 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
PHP强制转化的形式整理
2020/05/22 PHP
限制文本框输入N个字符的js代码
2010/05/13 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
跟老齐学Python之dict()的操作方法
2014/09/24 Python
Python读写配置文件的方法
2015/06/03 Python
在Mac OS上搭建Python的开发环境
2015/12/24 Python
Python批量查询域名是否被注册过
2017/06/21 Python
python3实现磁盘空间监控
2018/06/21 Python
Python切片操作深入详解
2018/07/27 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
鲜花方阵解说词
2014/02/13 职场文书
大学活动总结格式
2014/04/29 职场文书
试用期转正后的自我评价
2014/09/21 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书