01Typescript 的基础类型+vue3

44 阅读3分钟

1.布尔值

//1.普通声明方式
let isDone: boolean = false;

// 2.ref
let isDone = ref(false);
let isDone = ref<boolean>(true)//通过泛型显示约束

2.字符串

//1.普通声明方式
let str:string='abc'
//2.ref
const str=ref('') //根据参数推导类型
const str=ref<string>('')//通过泛型显示约束

3.数字

let count:number=5

4.数组

1.数组中都是同一类型的元素

let arrr1:number[]=[1,2,3]
    等同于 Array<number> 数组泛型
let arr2:Array<number>=[1,2,3]

2.数组中由多种类型的元素组合而成 管道符(|) 用于分隔每个类型,例如number |字符串 | boolean 是值的类型

let arrr1:(number|string)[]=[1,'2']
    等同于
let arr2:Array<number|string>=[1,'2']

3 .定义数组对象时

///使用 interface 来定义数组对象中的属性类型
interface PersonInfo {
	name: string;
	age: number;
	hobby?:string;//可选参数
}
let arr=[
	{ name: '张三', age: 18,},
	{ name: '李四', age: 18, },
	{ name: '王五', age: 18 ,hobby:'coding' }
  ]
const personArr= ref<PersonInfo []>(arr);

5.元组

元组类型表示一个已知元素数量类型的数组,各元素的类型不必相同

let arr:[number,string]
arr=['123',132] X 第一个元素类型必须是number 
arr=[132,] X 缺少一个string类型的元素
arr=[132,'123'] √

元组有数组的方法,在添加元素时会受所定义的类型限制

arr.push('789') //ok
arr.push(100) //ok
arr.push(true) // error
//ts提示: Argument of type 'boolean' is not assignable to parameter of type 'string | number'.
译:boolean类型的实参不能赋值给string | number类型的形参

6.枚举

使用枚举我们可以定义一些带名字的常量。 使用枚举可以清晰地表达意图或创建一组有区别的用例。 Typescript 支持数字的和基于字符串的枚举。

1.数字枚举

enum Direction {
    Up = 1,
    Down,
    Left,
    Right
}
当Up使用初始值为 1。 其余的成员会从 1开始自动增长。
Up值为1Down2Left3Right4

2.字符串枚举

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}
使用枚举很简单:通过枚举的属性来访问枚举成员,和枚举的名字来访问枚举类型
console.log('--->Direction',Direction) //{Up: 'UP', Down: 'DOWN', Left: 'LEFT', Right: 'RIGHT'}

3.异构枚举(通常不建议这么做)

enum Direction {
    Up = 1,
    Down='down'
}

7.any

有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容这时可以使用 any 。既然使用了 Typescript,开发中应尽量避免使用 any 类型

let a: any = 4;
a= "abc";
a= false; 

8.void

当一个函数没有返回值时可以使用 void

function test(): void {
   
}

9.null和undefined

当你指定了--strictNullChecks标记,null和undefined只能赋值给void和它们各自。 这能避免 很多常见的问题 –strictNullChecks标记的启用是在tsconfig.json文件里进行配置。

{
 //编译选项,可以被忽略,这时编译器会使用默认值
  "compilerOptions": {
	  //在严格的null检查模式下,null和undefined值不包含在任何类型里,
	  //只允许赋值给void和本身对应的类型。
	  "strictNullChecks": false, 
   }
}

10.object

object表示非原始类型,也就是除number,string,boolean,symbol,null或undefined之外的类型。

11.never

表示的是那些永不存在的值的类型,开发中使用较少,一般用于抛出异常、无限循环的函数返回类型