详解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设计模式之适配器模式介绍
Dec 28 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
js创建数组的简单方法
Jul 27 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
JavaScript门道之标准库
May 26 Javascript
JS图片预加载三种实现方法解析
May 08 Javascript
基于canvas实现手写签名(vue)
May 21 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 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内核解析:PHP中的哈希表
2014/01/30 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
thinkPHP框架实现类似java过滤器的简单方法示例
2018/09/05 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
深入理解js promise chain
2016/05/05 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
JS中微信小程序自定义底部弹出框
2016/12/22 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
js cookie实现记住密码功能
2017/01/17 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
python中异常捕获方法详解
2017/03/03 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
python进行TCP端口扫描的实现
2018/12/21 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
我们的节日清明节活动方案
2014/03/05 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
护士自荐信范文
2015/03/25 职场文书
幼师求职自荐信
2015/03/26 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python