详解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高级程序设计 学习笔记 js高级技巧
Sep 20 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
当jquery ajax遇上401请求的解决方法
May 19 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
node实现的爬虫功能示例
May 04 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
从PHP $_SERVER相关参数判断是否支持Rewrite模块
2013/09/26 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
Add a Table to a Word Document
2007/06/15 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
python在不同层级目录import模块的方法
2016/01/31 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
Python如何读取文件中图片格式
2020/01/13 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
如何判断计算机可能已经中马
2013/03/22 面试题
函授毕业自我鉴定
2013/12/19 职场文书
教师旷工检讨书
2014/01/18 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
关于责任的演讲稿
2014/05/20 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL