详解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中继承的三种方式
Oct 16 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
JavaScript驾驭网页-获取网页元素
Mar 24 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
Nov 09 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
javascript前端实现多视频上传
Dec 13 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制作图型计数器的例子
2006/10/09 PHP
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
一个PHP的QRcode类与大家分享
2011/11/13 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
PHP实现小偷程序实例
2016/10/31 PHP
php格式文件打开的四种方法
2018/02/24 PHP
HTML上传控件取消选择
2013/03/06 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
Python模拟用户登录验证
2017/09/11 Python
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
化学教师教学反思
2014/01/17 职场文书
简单的项目建议书模板
2014/03/12 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
五年级作文之劳动作文
2019/11/12 职场文书