logo
Laucher

Laucher

Laucher

2022年 10月 10日

0

TypeScript的基础类型

TypeScript的基础类型为我们提供了在代码中声明变量和函数类型的方式,这些类型可以帮助我们在开发过程中捕获更多的错误,并提高代码的可读性和可维护性。在学习和使用TypeScript时,掌握这些基础类型是非常重要的一步。

封面图

什么是TypeScript?

TypeScript是一种由微软开发的开源编程语言,它是JavaScript的一个超集。TypeScript扩展了JavaScript,添加了静态类型支持,使得代码更加健壮和可维护。TypeScript代码在编译时会被转换为纯JavaScript代码,因此可以运行在任何支持JavaScript的环境中。

在学习TypeScript的过程中,我们首先需要了解它的基础类型,这些基础类型用于声明变量和函数的类型。

TypeScript的基础类型

TypeScript提供了几种基础类型,让我们逐一来学习它们。

1. 布尔类型(boolean)

布尔类型表示逻辑值,它只有两个可能的值:‘true’和’false’。用于表示条件状态或开关。

// 直接使用
let isDone: boolean = true;
let isFlagged: boolean = false;
// 也可以通过函数返回一个布尔值 
let isBFn: boolean = Boolean(0);
let isBFn1: boolean = Boolean(1);

2. 数字类型(number)

数字类型用于表示数值,包括整数和浮点数。

let num: number = 123;//普通数字
let pi: number = 3.14;  // 浮点
let notANumber: number = NaN;//NaN
let infinityNumber: number = Infinity;//无穷大
let binary: number = 0b1010;//二进制
let octal: number = 0o744;//八进制
let decimal: number = 6;//十进制
let hex: number = 0xf00d;//十六进制

3. 字符串类型(string)

字符串类型用于表示文本数据。

let name: string = "John";
let message: string = "Hello, TypeScript!";

4. 数组类型(array)

数组类型用于表示一个元素的集合,可以是相同类型或不同类型的元素。

let numbers: number[] = [1, 2, 3, 4, 5];
let fruits: string[] = ["apple", "banana", "orange"];

5. 元组类型(tuple)

元组类型是一种特殊的数组类型,它允许在一个数组中存储不同类型的元素,但元素的数量是固定对应的。一般开发中使用不多。

let person: [string, number] = ["Alice", 30];

6. 枚举类型(enum)

枚举类型用于定义一组命名的常量,使代码更易读和维护。

enum Color {
  Red,
  Green,
  Blue,
}

let color: Color = Color.Red;

7. 任意类型(any)

‘any’类型是TypeScript中最宽泛的类型,它可以被赋值为任何类型的值,也可以用于表示不确定类型的变量。使用’any’类型的变量可以绕过TypeScript的类型检查,因为编译器不会对’any’类型进行类型检查。这使得’any’类型的使用非常灵活,但也增加了代码的不稳定性和不安全性。

let value: any = 42;
value = "Hello";
value = true;

在使用’any’类型时,需要特别小心,因为它会丢失类型安全性,可能导致运行时错误。

8.未知类型(unknown)

‘unknown’类型是TypeScript 3.0引入的类型,它也表示不确定类型的值,但比’any’类型更安全。与’any’类型不同,‘unknown’类型在未经确认之前不能进行任何操作,即使它们可能是一种确定的类型。

let value: unknown = 42;
// Error: Object is of type 'unknown'.
console.log(value.foo);

在使用’unknown’类型时,需要进行类型检查或类型断言,才能将其转换为其他类型。

if (typeof value === "number") {
  // 此时value的类型为number
  console.log(value.toFixed(2));
}

或者使用类型断言:

let value: unknown = 42;
let numberValue = value as number;
console.log(numberValue.toFixed(2));

‘unknown’类型在许多情况下比’any’类型更安全,因为它迫使开发者在使用之前进行类型检查,从而减少潜在的运行时错误。

// 如果是any类型在对象没有这个属性的时候还在获取是不会报错的
let obj:any = {o:1}
obj.a  // Error
 
// 如果是unknow 是不能调用属性和方法
let obj:unknown = {o:1,fn:():number => 1024}
obj.b  // Error 
obj.fn() // Error

9. 空类型(void)

空类型表示没有任何类型,通常用于函数没有返回值的情况。

function showMessage(): void {
  console.log("Hello, TypeScript!");
}

空类型void也可以定义undefined 和 null类型

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

10. Null和Undefined类型

‘null’和’undefined’表示没有值,它们是所有其他类型的子类型。当启用’strictNullChecks’选项时,只能将’null’和’undefined’赋值给对应类型或联合类型。

let myVar: number | null = null;
let myData: string | undefined = undefined;

Tips: 如果您在tsconfig.json 中开启了严格模式

{
    "compilerOptions":{
        "strict": true
    }
}

null 类型赋予 void 类型时,会报错:

let n:void = null; // 严格模式下会报错

11 Never类型

‘never’类型表示永远不会发生的类型,通常用于抛出异常或处理无法到达的终点。

function throwError(message: string): never {
  throw new Error(message);
}

12. 类型推断

在很多情况下,TypeScript可以根据赋值自动推断变量的类型,无需显式指定类型。

let inferredType = 42; // TypeScript会自动推断inferredType为number类型

评论

本文章标签

前端TypeScript

更多的Blog

2022年10月

TypeScript的接口和对象类型

typescript

2022年08月

解决 Vue 3 中 ECharts 图表切换页面不渲染的问题

5IpDqzM

外链