vite+vue项目之不得不学的TypeScript定义基础类型的变量和类型断言

208 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第4天,点击查看活动详情


写在前面

上篇文章介绍了如何在vite+vue项目中引入vue-router和Element Plus,本篇文章介绍如何用TypeScript定义基础类型变量和类型断言。

基础类型有哪些?

布尔值:boolean

数字:number

字符串:string

数组[]

元组

枚举

any

void

undefined

null

Never

Object

如何定义?

1、布尔值:boolean

布尔值类型变量的定义:

let isDone: boolean = false;

2、数字:number

数字类型变量的定义:

let decLiteral: number = 6;

3、字符串:string

字符串类型变量的定义:

let name: string = "bob";
name = "smith";
// 使用模板字符串
let sentence: string = `My name is ${ name }`;

4、数组[]

数组类型变量的定义有两种方式:

// 第一种
let list: number[] = [1, 2, 3];
// 第二种
let list: Array<number> = [1, 2, 3];

5、元组

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

// 定义一个元组类型的变量,它允许第一个为字符串类型,第二个为数组类型
let x: [string, number];
// 当我们改变它的值的时候
x = ['hello', 10]; // 这不会报错
x = [10, 'hello']; // 这会报错
// 当我们增加这个数组的元素的时候
x[3] = "world"; // 这是可以的,允许增加字符串类型或数组类型
x[4] = true; // 这是错误的,不能增加布尔类型

6、枚举

枚举类型是对js的补充,js中没有这个类型,枚举类型变量的定义:

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

7、any

any类型是为不清楚类型的变量指定的一个类型:

let notSure: any = 4; // notSure可以是任意类型

8、void

void类型表示没有任何类型,一般会在一个函数没有返回值时见到,只能为它赋予undefinednull

function warnUser(): void { 
  // 没有返回值
}
// 定义变量
let unusable: void = undefined;

9、undefined 和 null

定义变量:

let u: undefined = undefined; 
let n: null = null;

10、Never

never类型表示的是那些永不存在的值的类型

11、非原始类型:object

object表示非原始类型,也就是除numberstringbooleansymbolnullundefined之外的类型

类型断言

类型断言有两种形式:

// 尖括号<>语法
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
// as语法
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

写在最后

以上就是如何用TypeScript定义基础类型变量和类型断言的全部介绍