【typeScript】typeScript攻略

typeScript 攻略

相关文章

typeScript攻略

一、什么是TypeScript

TS 是 TypeScript 的简称，它是一种由微软开发的开源编程语言。TypeScript 是 JavaScript 的一个超集，意味着任何有效的 JavaScript 代码也是有效的 TypeScript 代码，同时 TypeScript 提供了额外的静态类型检查和语法扩展。

二、TypeScript特性

静态类型检查：TypeScript 具有静态类型系统，可以在编译时检查变量、函数参数、返回值等的类型是否匹配，从而减少代码中的类型错误，提高代码的健壮性和可维护性。
类型注解：TypeScript 允许开发者为变量、函数、对象等显式地添加类型注解，以指定其类型。这样做不仅可以提高代码的可读性，还可以帮助 TypeScript 进行更准确的类型推断和类型检查。
接口和类型别名：TypeScript 支持接口和类型别名的定义，可以用于描述对象的结构、函数的签名等。接口和类型别名可以在代码中提供更清晰的类型约束，提高代码的可读性和可维护性。
类和模块：TypeScript 支持类和模块的定义，可以使用类来组织代码，并通过模块来实现代码的模块化和组织。这样做不仅可以提高代码的可复用性和可维护性，还可以更好地组织和管理大型项目。
编译时类型检查：TypeScript 编译器会在编译时进行类型检查，检查代码中的类型错误，并生成与目标 JavaScript 版本兼容的纯 JavaScript 代码。这样可以确保最终生成的代码不会包含类型错误，并且与目标环境兼容。
工具支持：TypeScript 提供了丰富的开发工具和编辑器支持，如 Visual Studio Code、Sublime Text、Atom 等，这些工具可以帮助开发者更轻松地编写、调试和管理 TypeScript 代码。

三、TypeScript语法

变量声明

1 2	`let num: number = 10; const str: string = "Hello";`

函数

1
2
3

function greet(name: string): string {
    return `Hello, ${name}!`;
}

接口

interface Person {
    name: string;
    age: number;
}

const person: Person = {
    name: 'Alice',
    age: 30
};

// 编译错误：对象缺少属性 age
const anotherPerson: Person = {
    name: 'Bob'
};

接口可以被继承和实现，可以扩展或者实现多个接口，从而形成更复杂的类型结构。
接口是开放式的，如果目标类型拥有与接口中定义的属性兼容的属性，那么它就被认为是实现了该接口。
接口通常用于描述对象的结构和行为，以及类之间的关系。
接口通常用于描述一种抽象概念，比如一个人、一辆车，因此它的可读性更好。

类型别名

type Point = {
    x: number;
    y: number;
};

const point: Point = {
    x: 10,
    y: 20
};

// 编译通过：对象拥有额外的属性 z
const anotherPoint: Point = {
    x: 5,
    y: 15,
    z: 25
};

类型别名不支持继承和实现，它只能用于给现有类型起别名。
类型别名是封闭式的，它创建了一个新的类型，必须完全匹配以便被认为是相同的类型。
类型别名通常用于定义复杂的类型，或者给现有的类型起一个更简洁的名称。
类型别名通常用于定义复杂的类型，它的可读性取决于所起的别名是否能清晰地表达该类型的含义。

类

class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    sayHello() {
        console.log(`Hello, my name is ${this.name}.`);
    }
}

泛型

泛型函数

泛型函数允许我们在函数定义时不指定参数的类型，而是在调用函数时动态确定参数的类型。示例：

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

let result = identity<string>("Hello");
// result 的类型为 string，值为 "Hello"

泛型类

泛型类可以使用类型参数来创建可重用的类。示例：

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

let result = identity<string>("Hello");
// result 的类型为 string，值为 "Hello"

泛型接口

泛型接口允许我们在接口定义中使用类型参数，从而创建具有泛型特性的接口。示例：

interface Pair<T, U> {
    first: T;
    second: U;
}

let pair: Pair<string, number> = { first: "one", second: 1 };

泛型约束

泛型约束允许我们限制泛型类型的范围，以确保泛型参数满足特定条件。示例：

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log("Length: " + arg.length);
    return arg;
}

let result1 = loggingIdentity("Hello");
// 输出：Length: 5
console.log(result1); // 输出：Hello

let result2 = loggingIdentity([1, 2, 3]);
// 输出：Length: 3
console.log(result2); // 输出：[1, 2, 3]

let result3 = loggingIdentity({ length: 10, value: 3 });
// 输出：Length: 10
console.log(result3); // 输出：{ length: 10, value: 3 }

在上面的示例中，我们定义了一个泛型函数 loggingIdentity，它接受一个泛型参数 arg，并要求这个参数必须拥有 length 属性。为了实现这个约束，我们使用了泛型约束 extends Lengthwise，它告诉编译器，T 必须是 Lengthwise 接口或者其子类型。因此，我们可以安全地在函数内部访问 arg.length 属性，而不用担心在运行时出现错误。

泛型类型别名

泛型类型别名允许我们为泛型类型定义一个别名，使代码更加简洁清晰。示例：

type Result<T> = {
    success: boolean;
    data: T;
};

let result: Result<number> = { success: true, data: 10 };

可选参数和默认参数

1
2
3

function greet(name: string, greeting: string = "Hello"): string {
    return `${greeting}, ${name}!`;
}

枚举

枚举（Enums）是一种在编程中表示一组命名的常量集合的方式。在 TypeScript 中，枚举提供了一种方便的方式来定义一组有序的常量，从而提高代码的可读性和可维护性。

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

类型断言

类型断言（Type Assertion）是在 TypeScript 中一种用来告诉编译器一个值的类型的方式。它类似于其他编程语言中的类型转换，但在 TypeScript 中更加安全，因为它不会在运行时真正地改变值的类型，而是告诉编译器你已经确定了值的类型。

尖括号语法

1 2	`let value: any = "this is a string"; let strLength: number = (<string>value).length;`

as语法

1 2	`let value: any = "this is a string"; let strLength: number = (value as string).length;`

命名空间

在 TypeScript 中，命名空间（Namespace）是一种组织代码的方式，它可以将具有相似功能的代码组织到一个命名空间下，避免全局作用域的污染，并提供了一种将相关代码分组的方式。命名空间在早期版本的 TypeScript 中被引入，后来被模块（Module）所取代，但仍然可以用于一些特定的场景。

定义

namespace MyNamespace {
    export interface MyInterface {
        // 接口成员
    }

    export class MyClass {
        // 类成员
    }

    export function myFunction() {
        // 函数实现
    }
}