详解TypeScript的基础类型

 更新时间:2022年01月07日 15:07:57   作者:星野喵内  
这篇文章主要为大家介绍了TypeScript的基础类型,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

布尔类型

// 布尔类型--->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动态获取登录时间和在线时长

    这篇文章主要为大家详细介绍了javascript动态获取登录时间和在线时长的相关资料,获得登录时候的时间,用来和动态的时间做差来求时长,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • JavaScript 的方法重载效果

    JavaScript 的方法重载效果

    JavaScript 语言的方法声明中,不能明确指定参数的类型和个数,所以不能实现方法的重载,但是我们可以用其他的方法来实现重载的效果。
    2009-08-08
  • JavaScript栏目列表隐藏/显示简单实现

    JavaScript栏目列表隐藏/显示简单实现

    隐藏侧边栏,并将图片换成右箭头图片;显示侧边栏,并将图片换成左箭头,这样的效果想必大家都很熟悉吧,接下来实现下,感兴趣的朋友可以参考下哈
    2013-04-04
  • js模拟3D场景效果代码打包

    js模拟3D场景效果代码打包

    这几个demo上星期平安夜做的,感觉效果不错,就放在出来,分享给大家
    2012-01-01
  • JS判断字符串包含的方法

    JS判断字符串包含的方法

    这篇文章主要介绍了JS判断字符串包含的方法,可有效的检测字符串中是否包含固定字符或子字符串,涉及javascript中indexOf的使用技巧,非常简单实用,需要的朋友可以参考下
    2015-05-05
  • JS获取农历日期具体实例

    JS获取农历日期具体实例

    这篇文章介绍了JS获取农历日期具体实例,有需要的朋友可以参考一下
    2013-11-11
  • 详解JS数组方法

    详解JS数组方法

    这篇文章主要为大家介绍了JS的数组方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • 详解CocosCreator制作射击游戏

    详解CocosCreator制作射击游戏

    这篇文章主要介绍了CocosCreator制作射击游戏,各个方面都讲的比较详细,希望同学们自己动手试一下
    2021-04-04
  • 原生js和css实现图片轮播效果

    原生js和css实现图片轮播效果

    这篇文章主要为大家详细介绍了原生javascript和css实现图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 利用JS实现二叉树遍历算法实例代码

    利用JS实现二叉树遍历算法实例代码

    众所周知javascript语言中只提供了几种基本类型的数据类型,而二叉树是一种数据结构,在一些查询等操作中能提供较好的性能,这篇文章主要给大家介绍了关于利用JS实现二叉树遍历算法的相关资料,需要的朋友可以参考下
    2021-11-11

最新评论