详解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+xml生成级联下拉框代码
Jul 24 Javascript
js中的异常处理try...catch使用介绍
Sep 21 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
Aug 29 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
原生js实现贪食蛇小游戏的思路详解
Nov 26 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入门学习的几个不错的实例代码
2008/07/13 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
Symfony查询方法实例小结
2017/06/28 PHP
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
浅析Ajax语法
2016/12/05 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
浅析Python中的序列化存储的方法
2015/04/28 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
如何利用python查找电脑文件
2018/04/27 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
Python lambda表达式用法实例分析
2018/12/25 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
python解析多层json操作示例
2019/12/30 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
会计与审计毕业生自荐信范文
2013/12/30 职场文书
会计出纳员的自我评价
2014/01/15 职场文书
《守株待兔》教学反思
2014/03/01 职场文书
《石榴》教学反思
2014/03/02 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
仰望星空观后感
2015/06/10 职场文书