Vue3+TypeScript从入门到精通系列之：TypeScript基础类型

一、布尔类型boolean

//基础类型
(()=>{
//布尔类型-------boolean
//let变量名：数据类型=值
let flag:boolean = true
console.log(flag)
})()

true

二、数字类型number

//基础类型
(()=>{
//数字类型-------number
let a1:number = 10 //十进制
console.log(a1)
let a2:number = 0b1010  //二进制
let a3:number = 0o12    //八进制
let a4:number = 0xa     //十六进制
})()

10

三、字符串string

//基础类型
(()=>{
//字符串----------string
let a1:number = 10 //十进制
let str1:string = '窗前明月光'
let str2:string = '努力学vue3'

//字符串和数字拼接
let strNum = str1 + a1
console.log(strNum)
})()

窗前明月光10

四、数组

//基础类型
(()=>{
//数组和元组
//数组定义方式1
//let 变量名:数据类型[] = [值1，值2，值3]
let arr1:number[] = [10,20,30]
console.log(arr1)
//数组定义方式2：范型的写法
//语法：let 变量名:Array<数据类型> = [值1，值2，值3]
let arr2:Array<number> = [100,200,300]
console.log(arr2)
})()

[ 10, 20, 30 ]
[ 100, 200, 300 ]

五、元组

//基础类型
(()=>{
//元组类型
//元组类型在使用的时候，数据类型的位置和数据的个数应一致
let tup1:[string,number,boolean] = ["喜欢",100,true]
console.log(tup1)
})()

[ '喜欢', 100, true ]

六、枚举类型

//基础类型
(()=>{
//枚举类型，枚举里面的每个数值都可以叫元素，每个元素都有自己的编号
//默认情况下从0开始编号
enum Color{
  red,
  green,
  blue
}
//定义一个Color的枚举类型的变量来接收枚举的值
let color:Color = Color.red
console.log(color)
console.log(Color.red)
console.log(Color[2])
})()

0
0
blue

七、any类型

//基础类型
(()=>{
//any类型
let str: any = 100
str = '好好学vue'
console.log(str)

//当一个数组中要存储多个数据，个数不确定，类型不确定，可以使用any类型来定义数组
let anyarr:any[] = [100,'加,油',true]
console.log(anyarr)

})()

好好学vue
[ 100, '加,油', true ]

八、void类型

//基础类型
(()=>{
//void类型，在函数声明的时候，小括号的后面使用:void,代表的是该函数没有任何的返回值
function showMsg():void{
  console.log("全力以赴")
}
console.log(showMsg())
})()

全力以赴
undefined

九、object类型

//基础类型
(()=>{
//object类型
//定义一个函数，参数是object类型，返回值也是object类型
function getObj(obj:object):object{
  console.log(obj)
  return{
    name: "喜欢vue",
    age: '1'
  }
}

console.log(getObj({name:'不喜欢vue',age:'18'}))
})()

{ name: '不喜欢vue', age: '18' }
{ name: '喜欢vue', age: '1' }

十、联合类型

//基础类型
(()=>{
//联合类型(Union Types)表示取值可以为多种类型中的一种
function getString(str:number|string):string{
  return str.toString()
}
console.log(getString('123'))
})()

123

十一、断言

//基础类型
(()=>{
//类型断言；告诉编译器类型
//类型断言的语法方式1:<类型>变量名
//类型断言宕语法方式2:值 as 类型
function getLength(str:number|string):number{
  if((<string>str).length){
    return (<string>str).length
    //return (str as string).length
  }
  else{
    return str.toString().length
  }
}

console.log(getLength(12345))
console.log(getLength('123456'))
})()

5
6

十二、类型推断

//基础类型
(()=>{
//类型推断
//没有明确指定类型的时候会推测出一个类型
let txt = 100

let txt2;//any类型
txt2 = 100
txt2 = '加油学vue3'
console.log(txt2)
})()

加油学vue3