TypeScript基础（一）基本类型与类型运算

✨ 专栏介绍

TypeScript是一种由微软开发的开源编程语言，它是JavaScript的超集，意味着任何有效的JavaScript代码都是有效的TypeScript代码。TypeScript通过添加静态类型和其他特性来增强JavaScript，使其更适合大型项目和团队开发。

在TypeScript专栏中，我们将深入探讨TypeScript的各个方面，包括语法、类型系统、模块化、面向对象编程等。我们将介绍如何使用TypeScript来构建可维护、可扩展和高效的应用程序。

TypeScript是一种开源的编程语言，它是JavaScript的超集，意味着所有的JavaScript代码都可以在TypeScript中运行。TypeScript添加了静态类型检查和其他一些新特性，以提高代码的可读性、可维护性和可扩展性。

文章目录

- [✨ 专栏介绍](#✨ 专栏介绍)
- 引言
- 基本类型
- 其他常用类型
- 类型运算
- 类型别名
- 类型约束
- 总结
- [😶 写在结尾](#😶 写在结尾)

引言

基本类型

number：数字
string：字符串
boolean：布尔
数组
object: 对象
null 和 undefined

null和undefined是所有其他类型的子类型，它们可以赋值给其他类型

通过添加strictNullChecks:true，可以获得更严格的空类型检查，null和undefined只能赋值给自身。

1. 数字类型（number）

typescript 复制代码

let age: number = 25;

2. 字符串类型（string）

typescript 复制代码

let name: string = "John";

3. 布尔类型（boolean）

typescript 复制代码

let isDone: boolean = false;

4. 数组类型（array）

typescript 复制代码

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

5. 对象（object）

typescript 复制代码

function printValues(obj: object) {
  const values = Object.values(obj)
  values.forEach((v) => console.log(v))
}

printValues({
  name: 'afd',
  age: 33
})

6. null和undefined

typescript 复制代码

let nullValue: null = null;
let undefinedValue: undefined = undefined;

其他常用类型

void类型：通常用于约束函数的返回值，表示该函数没有任何返回

typescript 复制代码

function sayHello(): void {
 console.log("Hello!");
}

never类型：通常用于约束函数的返回值，表示该函数永远不可能结束

typescript 复制代码

function throwError(message: string): never {
 throw new Error(message);
}
function infiniteLoop(): never {
  while (true) {
    // do something...
  }
}

字面量类型：使用一个值进行约束。它可以用于限制变量的取值范围，只允许特定的字面量值赋给变量

typescript 复制代码

let arr: [] // arr永远只能取值为一个空数组

let gender = '男' | '女'

元祖类型（Tuple）: 一个固定长度的数组，并且数组中每一项的类型确定

typescript 复制代码

let person: [string, number] = ["John", 25];

any类型: any类型可以绕过类型检查，因此，any类型的数据可以赋值给任意类型

typescript 复制代码

let data: any = "Hello";
data = 123;

类型运算

类型运算符在TypeScript中用于对类型进行操作和组合。以下是对常见的类型运算符进行介绍：

1. 联合类型（Union Types）

使用 | 运算符将多个类型组合成一个联合类型。表示变量可以是多个类型中的任意一个。例如：

typescript 复制代码

let age: number | string;
age = 25; // 合法
age = "25"; // 合法

2. 交叉类型（Intersection Types）

使用 & 运算符将多个类型组合成一个交叉类型。表示变量具有多个类型的属性和方法。例如：

typescript 复制代码

interface A {
 name: string;
}
interface B {
 age: number;
}
type C = A & B;
let person: C = {
 name: "John",
 age: 30
};

3. 可选属性（Optional Properties）

使用 ? 运算符将属性标记为可选的。表示该属性可以存在，也可以不存在。例如：

typescript 复制代码

interface Person {
 name: string;
 age?: number;
}
let person1: Person = {
 name: "John"
};
let person2: Person = {
 name: "Jane",
 age: 25
};

4. 泛型约束（Generic Constraints）

使用 extends 关键字对泛型进行约束，限制泛型参数必须满足某些条件。例如：

typescript 复制代码

interface Lengthwise {
 length: number;
}
function logLength<T extends Lengthwise>(arg: T): void {
 console.log(arg.length);
}
logLength("Hello"); // 输出 5
logLength([1, 2, 3]); // 输出 3

在这个示例中，我们使用 extends 关键字约束泛型参数 T 必须满足 Lengthwise 接口的要求，即具有 length 属性。通过泛型约束，我们可以在函数内部使用泛型参数的特定属性或方法。这些类型运算符可以帮助开发者更灵活地操作和组合类型，提供了更强大的类型系统支持。通过合理地使用这些运算符，可以提高代码的可读性和可维护性，并增强类型安全性。

类型别名

类型别名（Type Aliases）是TypeScript中的一种特性，它允许为已有的类型定义一个别名，以提高代码的可读性和可维护性。通过类型别名，可以给复杂或重复出现的类型定义一个简洁的名称。

以下是一些使用类型别名的示例：

1. 基本类型别名

typescript 复制代码

type ID = number;
let userId: ID = 123;

在这个示例中，我们使用type关键字为number类型定义了一个别名ID，然后将其用于声明变量userId。

2. 联合类型别名

typescript 复制代码

type Status = "success" | "failure";
let result: Status = "success";

在这个示例中，我们使用type关键字为字符串字面量类型定义了一个联合类型别名Status，它只允许取值为"success"或"failure"。然后将其用于声明变量result。

3. 复杂对象类型别名

typescript 复制代码

type Point = {
  x: number;
  y: number;
};
let p: Point = { x: 10, y: 20 };

在这个示例中，我们使用type关键字为对象类型定义了一个别名Point，它包含了两个属性x和y。然后将其用于声明变量p。

通过使用类型别名，我们可以将复杂的类型定义简化为一个易于理解和使用的名称。

类型约束

在TypeScript中，函数可以通过参数类型、返回值类型和函数重载等方式进行约束。以下是函数的相关约束和函数重载的示例

1. 参数类型、返回值类型约束

typescript 复制代码

function multiply(a: number, b: number): number {
 return a * b;
}
let result = multiply(2, 3); // 返回 6

在这个示例中，函数multiply接受两个参数，都是number类型，并且返回值也是number类型。通过返回值类型的约束，我们可以确保函数返回的结果符合预期的数据类型。

2.函数重载

typescript 复制代码

function getValue(value: string): string;
function getValue(value: number): number;
function getValue(value: string | number): string | number {
  if (typeof value === "string") {
    return "Hello, " + value;
  } else if (typeof value === "number") {
    return value * 2;
  }
  throw new Error("value不是string或number类型");
}
let result1 = getValue("John"); // 返回 "Hello, John"
let result2 = getValue(5); // 返回 10

在这个示例中，我们定义了一个名为getValue的函数，并使用多个重载声明来定义不同参数类型对应的返回值类型。在函数体内部，我们根据参数的类型进行不同的处理。通过函数重载，我们可以根据不同的参数类型来调用相应的函数实现。

通过参数类型约束、返回值类型约束和函数重载等方式，我们可以在TypeScript中对函数进行更精确的约束和定义，以提高代码的可读性、可维护性和可靠性。

总结

通过了解这些基本类型和类型运算，开发者可以更好地定义变量、函数参数和返回值的数据类型，并在编码过程中捕获潜在的错误。这有助于提高代码质量、减少调试时间，并增强代码的可读性、可维护性和可靠性。

😶 写在结尾

前端设计模式专栏

设计模式是软件开发中不可或缺的一部分，它们帮助我们解决了许多常见问题，并提供了一种优雅而可靠的方式来构建应用程序。在本专栏中，我们介绍了所有的前端设计模式，包括观察者模式、单例模式、策略模式等等。通过学习这些设计模式，并将其应用于实际项目中，我们可以提高代码的可维护性、可扩展性和可重用性。希望这个专栏能够帮助你在前端开发中更好地应用设计模式，写出高质量的代码。点击订阅前端设计模式专栏

Vue专栏

Vue.js是一款流行的JavaScript框架，用于构建用户界面。它采用了MVVM（Model-View-ViewModel）的架构模式，通过数据驱动和组件化的方式，使开发者能够更轻松地构建交互性强、可复用的Web应用程序。在这个专栏中，我们将深入探讨Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。我们将学习如何使用Vue.js构建响应式的用户界面，并探索其强大的生态系统，如Vue Router和Vuex、Pinia。通过学习这些内容，你将能够成为一名熟练的Vue.js开发者，并能够应用这些知识来构建复杂而高效的Web应用程序。点击订阅Vue专栏

JavaScript（ES6）专栏

JavaScript是一种广泛应用于网页开发和后端开发的脚本语言。它具有动态性、灵活性和易学性的特点，是构建现代Web应用程序的重要工具之一。在这个专栏中，我们将深入探讨JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外，我们还将介绍ES6（ECMAScript 2015）及其后续版本中引入的新特性，如箭头函数、模块化、解构赋值等。通过学习这些内容，你将能够成为一名熟练的JavaScript开发者，并能够应用这些知识来构建出高质量和可维护的Web应用程序。点击订阅JavaScript（ES6）专栏