详解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 相关文章推荐
splice slice区别
Oct 09 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
简单的jQuery入门指引
Jul 28 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
jQuery实现遮罩层登录对话框
Dec 29 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 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
APMServ使用说明
2006/10/23 PHP
php array_search() 函数使用
2010/04/13 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
Laravel框架Request、Response及Session操作示例
2019/05/06 PHP
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
详解webpack babel的配置
2018/01/09 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
python实现堆栈与队列的方法
2015/01/15 Python
Python按钮的响应事件详解
2019/03/04 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
python中return的返回和执行实例
2019/12/24 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
使用html5制作loading图的示例
2014/04/14 HTML / CSS
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
linux面试题参考答案(5)
2014/09/01 面试题
责任书格式范文
2014/07/28 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
单位作风建设自查报告
2014/10/23 职场文书
停发工资证明范本
2015/06/12 职场文书
【2·13】一图读懂中国无线电发展
2022/02/18 无线电