详解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 插件开发方法小结
Oct 23 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
微信小程序实现多张图片上传功能
Nov 18 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
做个自己站内搜索引擎
2006/10/09 PHP
无数据库的详细域名查询程序PHP版(2)
2006/10/09 PHP
php数组的一些常见操作汇总
2011/07/17 PHP
PHP 导出Excel示例分享
2014/08/18 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
lib.utf.js
2007/08/21 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
python通过floor函数舍弃小数位的方法
2015/03/17 Python
Python多线程编程(一):threading模块综述
2015/04/05 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
Python实现针对中文排序的方法
2017/05/09 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
音乐教学反思
2014/02/02 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
活动新闻稿范文
2015/07/17 职场文书
早恋主题班会
2015/08/14 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python