TypeScript 类型入门教程：轻松掌握基础类型和高级用法

概述

本文详细介绍了Typescript 类型的基本概念和高级用法，包括基础类型、数组类型、元组类型、枚举类型以及联合类型和交叉类型。文章还探讨了接口和类型别名的使用，以及如何定义和使用函数类型。此外，还讲解了类型推论和泛型的概念。

TypeScript 简介

TypeScript 是由微软开发的一种开源编程语言，它是 JavaScript 的超集，可以在任何运行 JavaScript 的地方运行。TypeScript 的主要目标是为开发大型 JavaScript 项目提供一种静态类型检查来帮助开发者避免某些常见的错误。

什么是 TypeScript

TypeScript 是一种静态类型语言，它在 JavaScript 的基础上增加了类型系统。这意味着开发者可以在编写代码时指定变量、函数、类等的类型，从而在编译阶段就能捕获到某些类型相关的错误。

TypeScript 相对于 JavaScript 的优势

• 类型检查：在开发过程中可以提前发现类型错误，避免运行时错误。
• 更好的工具支持：IDE 可以利用类型信息提供更好的代码补全和导航。
• 可读性和维护性：类型注释使代码更易于理解和维护。
• 大型项目支持：更适合于大型项目，提高代码的可维护性。

安装和配置 TypeScript 开发环境

要开始使用 TypeScript，首先需要安装 Node.js，因为 TypeScript 编译器是作为一个 npm 包提供的。安装 Node.js 后，可以通过以下命令安装 TypeScript 编译器：

npm install -g typescript

安装完成后，可以通过 tsc 命令来编译 TypeScript 文件。例如，假设你有一个 example.ts 文件，你可以通过以下命令将其编译成 example.js：

tsc example.ts

你也可以在项目中创建一个 tsconfig.json 文件来配置编译选项。例如：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true
  },
  "include": ["src/**/*"]
}

这样，你就可以通过 tsc 命令来编译整个项目了：

tsc

基础类型

TypeScript 支持多种基础类型，包括数值类型、字符串类型、布尔类型、空值类型、符号类型和混合类型。

数值类型（Number）

数值类型表示数字，可以是整数或浮点数。以下是一个使用数值类型的例子：

let age: number = 25;
let height: number = 1.78;

字符串类型（String）

字符串类型表示文本，可以包含任何 Unicode 字符。以下是一个使用字符串类型的例子：

let name: string = "Alice";
let greeting: string = "Hello, " + name + "!";

布尔类型（Boolean）

布尔类型表示逻辑值，只有 true 和 false 两种取值。以下是一个使用布尔类型的例子：

let isStudent: boolean = true;
let isEmployed: boolean = false;

空值类型（Null 和 Undefined）

空值类型表示没有值的情况，即 null 和 undefined。以下是一个使用空值类型的例子：

let value: null = null;
let anotherValue: undefined = undefined;

符号类型（Symbol）

符号类型是一种特殊的值，通常用于不可枚举的对象属性。以下是一个使用符号类型的例子：

let symbol: symbol = Symbol();

混合类型

混合类型允许同时定义多种类型，例如：

let mixed: number | string = 10;
mixed = "Hello";
let mixed2: number | boolean = true;
mixed2 = 20;

高级类型

TypeScript 还提供了一些高级类型，包括数组类型、元组类型、枚举类型、类型断言、联合类型和交叉类型。

数组类型

数组类型表示数组中的元素类型，例如：

let numbers: number[] = [1, 2, 3];
let strings: string[] = ["a", "b", "c"];

元组类型

元组类型表示具有固定数量和类型的元素，例如：

let tuple: [string, number] = ["Alice", 25];

枚举类型

枚举类型允许定义一组命名的常量，例如：

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

类型断言

类型断言允许开发者告诉 TypeScript 编译器某个值的类型，例如：

let someValue: any = "hello";
let strLength: number = (someValue as string).length;
let someValue2: any = 123;
let numLength: number = (someValue2 as number).toString().length;

联合类型

联合类型表示一个值可以是几种类型中的任何一个，例如：

let union: number | string = 10;
union = "Hello";
let union2: number | boolean = true;
union2 = 5;

交叉类型

交叉类型表示一个值可以同时具有多个类型的属性和方法，例如：

interface A {
  a: string;
}

interface B {
  b: number;
}

let obj: A & B = { a: "Hello", b: 10 };

接口和类型别名

接口用于定义对象的结构，类型别名则用于定义新的类型。

定义接口

接口可以定义对象的结构，例如：

interface User {
  id: number;
  name: string;
}

使用接口

定义接口后，可以通过接口来定义对象，例如：

let user: User = { id: 1, name: "Alice" };

类型别名与接口的区别

类型别名可以用于定义新的类型，与接口类似，但有一些区别。类型别名可以用于交叉类型和联合类型，而接口不可以。例如：

type UserAlias = { id: number; name: string };
let user: UserAlias = { id: 1, name: "Alice" };

type UserAlias2 = A & B;
let user2: UserAlias2 = { a: "Hello", b: 10 };

接口中的可选属性

接口可以定义可选属性，例如：

interface User {
  id: number;
  name: string;
  email?: string; // 可选属性
}

let user: User = { id: 1, name: "Alice" };
let userWithEmail: User = { id: 2, name: "Bob", email: "[e-mail]" };

函数类型接口

接口可以定义函数的类型，例如：

interface SearchFunction {
  (source: string, subString: string): boolean;
}

let search: SearchFunction = function(source: string, subString: string) {
  return source.includes(subString);
};

函数类型

函数类型允许开发者定义函数的参数和返回类型。

定义函数类型

可以使用接口来定义函数的类型，例如：

interface SearchFunction {
  (source: string, subString: string): boolean;
}

let search: SearchFunction = function(source: string, subString: string) {
  return source.includes(subString);
};

了解函数返回类型

函数可以返回特定类型的值，例如：

function getAge(name: string): number {
  return 25;
}

了解参数类型

函数中的参数可以指定类型，例如：

function greet(person: { name: string, age: number }) {
  return "Hello, " + person.name + "!";
}

function printName(firstName: string, lastName?: string, fullName?: string) {
  if (fullName) {
    console.log(fullName);
  } else {
    console.log(firstName + " " + lastName);
  }
}

printName("Alice", "Smith");
printName("Bob", undefined, "Bob");

类型推论和泛型

类型推论和泛型是 TypeScript 中非常强大的特性，可以帮助开发者编写更通用和灵活的代码。

了解类型推论

类型推论允许 TypeScript 根据上下文自动推断变量的类型，例如：

let numberVariable = 10; // 类型推断为 number
let stringVariable = "Hello"; // 类型推断为 string
let booleanVariable = true; // 类型推断为 boolean
let objectVariable = { name: "Alice", age: 25 }; // 类型推断为 { name: string; age: number; }

泛型类型的概念

泛型可以定义一种类型，使其可以用于任何类型，例如：

function identity<T>(arg: T): T {
  return arg;
}

let result = identity<string>("test");

使用泛型定义函数或类

泛型可以用于函数和类，例如：

function identity<T>(arg: T): T {
  return arg;
}

class GenericNumber<T> {
  constructor(public zeroValue: T, public add: (x: T, y: T) => T) { }
}

let myGenericNumber = new GenericNumber<number>(0, (x, y) => x + y);

泛型约束和类型参数

泛型可以通过约束来限制类型参数的类型，例如：

interface Lengthy {
  length: number;
}

function getLength<T extends Lengthy>(arg: T): number {
  return arg.length;
}

let myString: string = "Hello";
let myArray: any[] = [1, 2, 3];

console.log(getLength(myString)); // 5
console.log(getLength(myArray));  // 3