详解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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
javascript的数组和常用函数详解
May 09 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
Javascript Event(事件)的传播与冒泡
Jan 23 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
jquery实现轮播图特效
Apr 12 jQuery
uniapp实现可滑动选项卡
Oct 21 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
详解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访问查询mysql数据的三种方法
2006/10/09 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
php 启动报错如何解决
2014/01/17 PHP
php使用codebase生成随机数
2014/03/25 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
php工具型代码之印章抠图
2018/07/18 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
jquery处理json对象
2014/11/03 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
js实现自动图片轮播代码
2017/03/22 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
基于python plotly交互式图表大全
2019/12/07 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
Pandas之缺失数据的实现
2021/01/06 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
天网面试题
2013/04/07 面试题
预备党员党课思想汇报
2014/01/13 职场文书
公司请假条范文
2014/04/11 职场文书
求职推荐信范文
2015/03/27 职场文书
信访维稳承诺书
2015/05/04 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
python 中的jieba分词库
2021/11/23 Python
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang