详解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 showModalDialog参数的使用详解
Jan 07 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
js获取select默认选中的Option并不是当前选中值
May 07 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
Sep 13 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 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
用PHP编程语言开发动态WAP页面
2006/10/09 PHP
PHP 和 MySQL 基础教程(一)
2006/10/09 PHP
MySQL修改密码方法总结
2008/03/25 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
详谈PHP程序Laravel 5框架的优化技巧
2016/07/18 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
web前端开发也需要日志
2010/12/09 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
Python ZipFile模块详解
2013/11/01 Python
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
Tostadora意大利:定制T恤
2019/04/08 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
美术国培研修感言
2014/02/12 职场文书
美容院店长岗位职责
2014/04/08 职场文书
大二学生自我检讨书
2014/10/23 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
加薪通知
2015/04/25 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL