vue3入门19 - typescript 基础类型

297 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第26天,点击查看活动详情

前言

  • 基础数据类型包括:原始数据类型、Any、void、数组和元组、枚举、never、object。
  • 下面我们来一一介绍一下他们的定义和使用场景。

原始数据类型

在JavaScript中,基础数据类型一共又7种:

  • Boolean
  • Number
  • BigInt
  • String
  • Symbol
  • Null
  • Undefined

这7种类型在typeScript中都有对应的定义

let isDone: boolean = false;

// 接下来来到 number,注意 es6 还支持2进制和8进制,让我们来感受下

let age: number = 10;
let binaryNumber: number = 0b1111;

// 定义 BigInt
const intNumber: BigInt = 9007199254740995n;

// 之后是字符串,注意es6新增的模版字符串也是没有问题的
let firstName: string = "viking";
let message: string = `Hello, ${firstName}, age is ${age}`;

// 然后是symbol
const sym: symbol = Symbol();

// 还有就是两个奇葩兄弟两,undefined 和 null
let u: undefined = undefined;
let n: null = null;

// 注意 undefined 和 null 是所有类型的子类型。
// 也就是说 undefined 类型的变量,可以赋值给 number 类型的变量:
let num: number = undefined;

Any类型

有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量。

let notSure: any = 4;
notSure = "maybe it is a string";
notSure = "boolean";
// 在任意值上访问任何属性都是允许的:
notSure.myName;
// 也允许调用任何方法:
notSure.getName();

void类型

void类型一般是当函数没有返回值时,定义为void类型

function warnUser(): void {
    console.log("This is my warning message");
}

数组

TypeScript像JavaScript一样可以操作数组元素。我们有两种方式可以定义数组:

  • 「类型 + 方括号」来表示数组
let arrOfNumbers: number[] = [1, 2, 3, 4];
//数组的项中不允许出现其他的类型:
//数组的一些方法的参数也会根据数组在定义时约定的类型进行限制:
arrOfNumbers.push(3);
arrOfNumbers.push("abc");
  • 使用泛型表示数组Array<元素类型>(后面会讲泛型)
let list: Array<number> = [1, 2, 3];

元组

元组类型的标识和数组非常相似,它可以表示已知数组中元素的数量和类型,每个元素的类型可以不一样。比如我们知道一个数组中有字符串和数字两个元素,可以这样表示

let user: [string, number] = ["viking", 20];

这个表示我们第一个元素是字符串,第二个元素是数字,对每一项都有限定,如果多写少写,都会报错 image.png

enum 枚举类型

枚举类型是对JavaScript数据类型的一个补充,可以表示一组数据,比如上、下、左、右

enum Direction {
  Up,
  Down,
  Left,
  Right,
}
console.log(Direction.Up); // 0

数字枚举,一个数字枚举可以用 enum 这个关键词来定义,我们定义一系列的方向,然后这里面的值,枚举成员会被赋值为从 0 开始递增的数字,

never 类型

never类型表示的是那些永不存在的值的类型。一般会用在抛出错误或者没有返回值的函数中

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}
// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

object 类型

object表示非原始类型,比如我们定义:Object.create

declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

总结

基础类型的定义也是最常用的,掌握好这些我们就能对我们的数据类型做一些基本的限制了。