专栏名称: 前端大全

分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

TypeScript 初学者快速入门指南 2024 版

前端大全 · 公众号 · · 2024-07-01 11:50

正文

转自：前端达人

在这个数字化的时代，Web开发技术正在以惊人的速度进步。如果你是一个前端、后端甚至是全栈开发者，那么跟上这些技术的步伐绝对是必须的。今天，我要介绍的是一个让JavaScript焕发新生的神奇工具——TypeScript。通过这篇文章，我将带你快速了解TypeScript的基础概念，不仅适合初学者，还希望能为有经验的开发者提供一些有趣的视角。

1) TypeScript简介

想象一下，如果JavaScript穿上了一件“类型”的盔甲，那么这就是TypeScript。TypeScript扩展了JavaScript，通过添加静态类型，不仅能在编译时捕获错误，还能提升代码的组织性和可维护性。例如，一个简单的问候函数如下所示：

function greet(name: string) {
    return `Hello, ${name}!`;
}
console.log(greet("Alice"));

这个例子演示了如何指定参数name的类型为string，帮助确保使用该函数时的数据类型正确性。

小技巧：利用TypeScript定义变量、函数等的类型，可以大大提高代码的可靠性。

最佳用例：对于需要类型安全的大型应用来说，TypeScript是理想选择。

2) 基础类型

TypeScript支持多种基础类型，包括数字（number）、字符串（string）、布尔值（boolean）、数组等，让变量的定义更加清晰明确：

let age: number = 25;
let name: string = "Bob";
let isStudent: boolean = true;
let numbers: number[] = [1, 2, 3, 4, 5];

小技巧：尽可能利用类型推断，让TypeScript自动确定变量的类型。

最佳用例：适用于代码中需要定义简单数据类型的场景。

3) 接口（Interfaces）

接口是TypeScript定义对象结构的一种强大方式，它能确保对象遵循特定的格式：

interface Person {
    name: string;
    age: number;
}
function greet(person: Person) {
    return `Hello, ${person.name}!`;
}

小技巧：接口可以帮助你在对象间强制实现一致的结构。

最佳用例：在应用程序中定义数据契约时非常有用。

4) 类（Classes）

TypeScript的类让你能够利用面向对象编程的概念，如继承和封装，以一种结构化的方式来模拟现实世界的实体：

class Animal {
    constructor(public name: string) {}
    move(distance: number) {
        console.log(`${this.name} moved ${distance} meters.`);
    }
}

小技巧：利用public、private和protected等访问修饰符来实现更好的封装。

最佳用例：非常适合在代码中建模现实世界的实体。

5) 泛型（Generics）

泛型提供了一种方式，使你能够创建可以适用于多种数据类型的可重用组件：

function identity<T>(arg: T): T {
    return arg;
}
let output = identity<string>("hello");

小技巧：当你希望一个函数或类能够与任何数据类型一起工作时，使用泛型。

最佳用例：创建灵活且可重用的代码时非常有帮助。

6) 枚举（Enums）

枚举允许你定义一组命名的常量，通过这种方式可以使代码更加清晰易读：

enum Direction {
    Up,
    Down,
    Left,
    Right
}
let heading: Direction = Direction.Up;

小技巧：枚举通过为数字值赋予友好的名称，帮助使你的代码更易于阅读和理解。

最佳用例：当你有一组相关的常量时非常有用，如方向、状态码等。

7) 类型断言（Type Assertion）

类型断言允许你在TypeScript无法推断变量类型时，明确告诉编译器变量的类型：

let input: any = "hello";
let length: number = (input as string).length;

小技巧：当你对某个值的了解超过TypeScript时，使用类型断言。

最佳用例：在处理外部数据源的数据时特别有帮助。

8) 装饰器（Decorators）

装饰器是一种特殊的声明，可以附加到类、方法、访问器、属性或参数上：

function log(target: any, key: string) {
    console.log(`Method ${key} called`);
}

class Example {
    @log
    someMethod() {
        // 方法实现
    }
}

小技巧：在Angular等框架中，装饰器广泛用于元数据反射。

最佳用例：对于向类及其成员添加元数据非常有用。

9) 模块（Modules）

TypeScript中的模块帮助将代码组织成可重用的单元：

// math.ts
export function add(a: number, b: number): number {
    return a + b;
}

// app.ts
import { add } from './math';
console.log(add(2, 3)); // 输出: 5

小技巧：利用模块保持你的代码库整洁和可维护。

最佳用例：对于构建大型应用结构至关重要。

10) 命名空间（Namespaces）

命名空间允许你通过分组逻辑相关的对象来组织代码：

namespace Geometry {
    export class Circle {
        // Circle类的实现
    }
}

let circle = new Geometry.Circle();

在现代JavaScript和TypeScript开发中，模块已经成为组织代码的首选方式。然而，在某些特定场景下，命名空间仍然非常有用，特别是在将现有的大型代码库迁移到TypeScript时。

11) 类型推断（Type Inference）

TypeScript的类型推断能力意味着即使在未显式指定类型的情况下，编译器也能自动确定变量的类型：

let num = 10; // TypeScript推断出类型为number

小技巧： TypeScript的类型推断能节省时间，使代码更加清晰。

最佳用例：编写简洁的代码时，不牺牲类型安全。

12) 类型守卫（Type Guards）

类型守卫允许你在条件块内缩小变量的类型范围：

function isNumber(x: any): x is number {
    return typeof x === "number";
}

if (isNumber(value)) {
    // 在这个块里，TypeScript知道'value'是一个数字
}

小技巧：类型守卫在处理联合类型时特别有帮助。

最佳用例：处理复杂或动态数据类型时非常有用。

13) 联合类型（Union Types）

联合类型允许一个变量具有多种类型：

let result: number | string;
result = 10; // 有效
result = "error"; // 也有效

小技巧：使用联合类型来处理变量的不同场景。

最佳用例：适用于表示多样化的数据类型。

14) 交叉类型（Intersection Types）

交叉类型允许将多种类型组合成一个类型：

type A = { a: number };
type B = { b: string };
type C = A & B; // C同时拥有number类型的属性和string类型的属性

小技巧：交叉类型用于组合不同类型，处理复杂场景。

最佳用例：创建复杂的数据结构时非常有帮助。

15) 类型别名（Type Aliases）

类型别名让你为任何数据类型创建一个名称：

type Age = number;
let userAge: Age = 25;

小技巧：使用类型别名为复杂的类型提供描述性名称。

最佳用例：提高代码的可读性和可维护性。

16) 三斜线指令（Triple-Slash Directives）

三斜线指令是包含单个XML标签的单行注释，常用于声明文件间的依赖关系：

///

小技巧：三斜线指令通常用于声明文件之间的依赖，有助于模块和声明文件的工作。

最佳用例：在处理模块和声明文件时非常有用。

17) 对JavaScript文件的类型检查

TypeScript不仅可以用来编写TypeScript代码，还可以用于检查和类型检查JavaScript文件：

// @ts-check
let num: number = "not a number"; // TypeScript会抛出类型错误

小技巧：对JavaScript文件进行类型检查可以捕获bug并提升代码质量。

最佳用例：对于逐渐将JavaScript代码库迁移到TypeScript的项目非常有用。

18) 解构对象的类型推断

TypeScript能够为解构的对象推断出类型：

let person = { name: "Alice", age: 30 };
let { name, age } = person; // TypeScript推断出'name'和'age'




    
的类型

小技巧：解构对象的类型推断能节省时间，减少冗余。

最佳用例：在处理复杂的数据结构时非常有帮助。

19) 条件类型（Conditional Types）

TypeScript中的条件类型允许你创建依赖于其他类型的类型：

type NonNullable = T extends null | undefined ? never : T;
type StringOrNumber = string | number;
type NonNullableStringOrNumber = NonNullable; // 结果: string | number

小技巧：条件类型对于创建灵活和条件依赖的类型定义非常强大。

最佳用例：对于创建依赖于条件的泛型类型非常有用。

20) 映射类型（Mapped Types）

TypeScript的映射类型允许你从现有类型创建新类型：

type Flags = {
    option1: boolean;
    option2: boolean;
};
type NullableFlags = { [K in keyof Flags]: Flags[K] | null }; // 结果: { option1: boolean | null, option2: boolean | null }

小技巧：映射类型用于将现有类型转换为新类型。

最佳用例：在创建现有类型的变体时非常有帮助。

21) 声明合并（Declaration Merging）

在TypeScript中，声明合并允许为同一个实体合并多个声明：

interface User {
    name: string;
}
interface User {
    age: number;
}
let newUser: User = { name: "Alice", age: 30 };

小技巧：声明合并对于扩展现有类型非常有用，且不需要直接修改它们。

最佳用例：对第三方库添加功能时特别有帮助。

22) 类型守卫与类（Type Guards with Classes）

类型守卫也可以用于类，以缩小实例的类型范围：

class Animal {
    move() {
        console.log("Moving...");
    }
}
class Dog extends Animal {
    bark() {
        console.log("Woof!");
    }
}
function isDog(animal: Animal): animal is Dog {
    return (animal as Dog).bark !== undefined;
}

小技巧：对于处理多态性行为，使用类的类型守卫非常有用。

最佳用例：在处理继承和多态性时非常有效。

23) 元组类型（Tuple Types）

TypeScript的元组类型允许表达一个数组，其中固定数量的元素的类型是已知的：

let coordinates: [number, number] = [10, 20];

小技巧：在处理已知元素类型的固定长度数组时使用元组类型。

最佳用例：用于表示结构化数据，如坐标、RGB值等。

24) 索引签名（Index Signatures）

索引签名允许定义对象如何被索引：

interface StringArray {
    [index: number]: string;
}
let myArray: StringArray = ["a", "b", "c"];

小技巧：索引签名用于处理表现得像数组的对象。

最佳用例：在处理动态数据结构时非常有帮助。

25) 使用typeof和instanceof的类型守卫（Type Guards with typeof and instanceof）

可以使用typeof和instanceof操作符创建类型守卫：

function logValue(value: string | number) {
    if (typeof value === "string") {
        console.log(value.toUpperCase());
    } else if (value instanceof Number) {
        console.log(value.valueOf());
    }
}

小技巧：使用typeof来检查原始类型，使用instanceof来检查类的实例。

最佳用例：在条件块中检查特定类型时非常有用。

26) 递归类型（Recursive Types）

TypeScript支持定义递归类型，即一个类型可以引用它自身：

interface TreeNode {
    value: string;
    children: TreeNode[];
}

小技巧：递归类型对于表示层级数据结构非常有用。

最佳用例：非常适合模拟树形数据，如文件系统的目录结构。

27) 字符串字面量类型（String Literal Types）

字符串字面量类型允许定义一个类型，它只能有特定的字符串值：

type Direction = "up" | "down" | "left" | "right";
let move: Direction = "up";

小技巧：字符串字面量类型有助于创建具体和简洁的类型定义。

最佳用例：用于表示一组固定的字符串值，如命令、方向等。

28) 命名空间合并（Namespace Merging）