详解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 相关文章推荐
js 内存释放问题
Apr 25 Javascript
JavaScript日历实现代码
Sep 12 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
Mar 10 Javascript
jQuery控制输入框只能输入数值的小例子
Mar 20 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
Vue.js实现一个todo-list的上移下移删除功能
Jun 26 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
原生js实现简单的焦点图效果实例
Dec 14 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/07/19 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
jquery 选择器部分整理
2009/10/28 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
js实现带进度条提示的多视频上传功能
2020/12/13 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
深入浅析var,let,const的异同点
2018/08/07 Javascript
微信浏览器左上角返回按钮监听的实现
2020/03/04 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
python实现rest请求api示例
2014/04/22 Python
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
python实现微信远程控制电脑
2018/02/22 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
Python requests设置代理的方法步骤
2020/02/23 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
C#和SQL Server的面试题
2016/08/12 面试题
公司年终奖分配方案
2014/06/16 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
考试作弊检讨书
2014/10/21 职场文书
医院营销工作计划
2015/01/16 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
大学生实习推荐信
2015/03/27 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android
vue特效之翻牌动画
2022/04/20 Vue.js