详解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 相关文章推荐
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 Javascript
JQuery 在线引用及测试引用是否成功
Jun 24 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
jQuery实现本地存储
Dec 22 jQuery
详解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如何编写易读的代码
2007/07/10 PHP
PHP 程序员应该使用的10个组件
2009/10/31 PHP
PHP面向对象之旅:深入理解static变量与方法
2014/01/06 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
php面向对象值单例模式
2016/05/03 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
javascript数组的使用
2013/03/28 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
Python计算三角函数之asin()方法的使用
2015/05/15 Python
python实现读取命令行参数的方法
2015/05/22 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
浅述python2与python3的简单区别
2018/09/19 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
项目经理任命书内容
2014/06/06 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python