详解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控制frame,iframe的src属性代码
Dec 31 Javascript
Jquery Ajax的Get方式时需要注意URL地方
Apr 07 Javascript
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
Jul 18 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
JS验证字符串功能
Feb 22 Javascript
JS中min函数实例讲解
Feb 18 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
详解React路由传参方法汇总记录
Nov 29 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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
微信支付开发维权通知实例
2016/07/12 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
解决FLASH需要点击激活的代码
2006/12/20 Javascript
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
[57:12]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第一场 10.31
2020/11/02 DOTA
[38:32]完美世界DOTA2联赛循环赛 Forest vs DM 第二场 11.06
2020/11/06 DOTA
python创建线程示例
2014/05/06 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
python实现银行实战系统
2020/02/26 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
浅析HTML5 Landmark
2020/09/11 HTML / CSS
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
迟到早退检讨书
2014/02/10 职场文书
五五普法心得体会
2014/09/04 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android