详解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实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
九种js弹出对话框的方法总结
Mar 12 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 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实现模拟post请求用法实例
2015/07/11 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
符合标准的js表单提交的代码
2007/09/13 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
Python异步编程之协程任务的调度操作实例分析
2020/02/01 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
南京迈特望C/C++面试题
2012/07/09 面试题
高级Java程序员面试题
2016/06/23 面试题
中班开学寄语
2014/04/04 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
搬迁通知
2015/04/20 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android