vue3.0 + typescript 变量基本类型及使用介绍

基本类型

布尔值

let a: boolean = false // 也只能将boolean类型的值赋值给a

数字

let a: number = 1	// 也只能将number 类型的值赋值给a
// 和JavaScript一样，TypeScript里的所有数字都是浮点数。 这些浮点数的类型是 number。
// 除了支持十进制和十六进制字面量，TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。
let b: number = 6;
let c: number = 0xf00d;
let d: number = 0b1010;
let e: number = 0o744;

// 当然js有一句万物皆对象，这里也可以,官网介绍，但我在vue中用不了，估计时严格模式或者其他吧
let f: object = 555

字符串

let a: string = 'a'
let b: string = 'a' + 'b'
let c: string = `${b} good` // 也支持模板字符串写法

数组

  let arr: number[] = [1, 2, 3]	// 里面只能含有数字
  let arr1: Array<number> = [1, 2, 3]	// 同上
  let arr2: [string, number] = ['1', 1]	// 固定内容格式
  // let arr2: [string, number] = ['1', 1, 0] ,这种方式其中严格按照[]内的格式来，多了少了不行
  // 这样有时就会用起来不是很方便，所以在不确定其中的内容格式时用any定义可以随便写
  let arr3:any [] = [{ a: 1, b: 'b' }]	// 其他方式换成any即可

object

let a: object = { b: 1 }
// 在vue的函数内只能对a进行赋值，其中的属性时不能用的
change () {
	console.log(this.a.b) //这里会提示报错，读取不到a中的属性b
}
// 但是在标签上时可以用的，正常显示
<span>{{ a.b }}</span>

any

// any可定义任何类型，任何类型的值也可以赋值给any
let a: any = 2
let b: any = '3'
a = b；（a : '3'）

void:

  // 类型为void时只能设置为undefinde，官网说的还以为null，我试了不行
  // 并且其他类型的值也不能赋给a8(除了any类型)
  let a1: number = 2
  let a2: any = 0
  let a8: void = undefined	
  a8 = a1;(error)
  a8 = a2;(a8 : 0)

示例

<script lang='ts'>
import { Vue } from 'vue-class-component'
export default class Installation extends Vue {
  // arr: Array<number> = [1, 2, 3]
  arr: number[] = [1, 2, 3]
  arr1: Array<number> = [1, 2, 3]
  arr2: [string, number] = ['1', 1]
  a2 : number = 0
  a3: boolean = false
  a4: string = 'a4'
  a5: object = {
    b: 1,
    c: '2',
    d: false,
    e: null
  }
  a6: null = null
  a7: undefined = undefined
  // 类型为void时只能设置为undefinde，官网说的还以为null，我试了不行
  // 并且其他类型的值也不能赋给a8(除了any类型)，例：this.a8 = '1'
  a8: void = undefined	
  a9: any = '123'
  a10: number = (this.a9 as string).length
  a11: number = (<string>this.a4).length
  install () :void {
     // this.a2 = this.a5.b
     for (let i in this.a5) {
      console.log(this.a5[i])	// 这种循环是可以取到a5 中的属性的
     }
     this.a5.c = 5
     console.warn('very good')
    this.a5 = { d: 2}
    //	console.log(this.a5.b),这里会报错this.a5中没有b属性
  }
}
</script>