正文

掌握TypeScript类型系统：从基础到高级的实用指南

/0 浏览量
0814

TypeScript是一种由微软开发的JavaScript的超集，它添加了静态类型和基于类的面向对象编程特性。这些特性使得TypeScript在开发大型应用程序时提供了更好的类型安全性和代码组织性。在本指南中，我们将从基础到高级，详细探讨TypeScript的类型系统。

基础类型

TypeScript中的基础类型包括数字、字符串、布尔值和null或undefined。这些类型是所有其他类型的基础。

let isDone: boolean = false;
let count: number = 10;
let message: string = "Hello, TypeScript!";
let undefinedVariable: undefined;
let nullVariable: null;

数组类型

在TypeScript中，可以通过指定元素类型来定义数组。

let numbers: number[] = [1, 2, 3];
let strings: string[] = ["TypeScript", "is", "fun"];

元组类型

元组类型允许你声明一个已知元素数量和类型的数组。

let tuple: [string, number];
tuple = ["Hello", 42];

枚举类型

枚举类型允许你为一组数值定义友好的名称。

enum Color {
    Red,
    Green,
    Blue
}

let c: Color = Color.Green;

任意类型

当不确定一个变量的类型时，可以使用any类型。

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = true; // okay, let it be a boolean

类型断言

类型断言告诉编译器如何解释一个变量。

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

接口

接口定义了一个对象的结构。

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

let person: Person = {
    name: "Alice",
    age: 25
};

类

类是面向对象编程的基础。

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");
console.log(greeter.greet());

高级类型

联合类型

联合类型表示可能具有多种类型之一。

let input: string | number;
input = "Hello";
input = 42;

类型别名

类型别名可以给类型起一个新名字。

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

let p1: Point = { x: 10, y: 20 };

类型守卫

类型守卫用于确保一个变量是特定类型的。

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

function printSomething(value: any) {
    if (isNumber(value)) {
        console.log(value + 1);
    } else {
        console.log(value.toUpperCase());
    }
}

映射类型

映射类型通过扩展一个已知的类型来创建新的类型。

type mappedType = {
    [Property in keyof T as T[Property] extends U ? Property : never]: T[Property];
}

interface User {
    name: string;
    age: number;
    address: string;
}

type UserKeys = mappedType<User, string>;

交叉类型

交叉类型允许你合并多个类型。

interface Animal {
    name: string;
}

interface Mammal {
    walk(): void;
}

type Dog = Animal & Mammal;

索引访问类型

索引访问类型用于从对象类型中提取属性的类型。

interface StringArray {
    [index: number]: string;
}

let myArray: StringArray = ["Hello", "TypeScript"];

可选属性和只读属性

可选属性和只读属性可以添加到接口中。

interface Person {
    readonly id: number;
    name: string;
    age?: number;
}

通过以上内容，我们可以看到TypeScript的类型系统是非常强大的，它为JavaScript带来了静态类型的好处，同时保持了其动态类型的灵活性。希望这个指南能够帮助你更好地理解和运用TypeScript的类型系统。

-- 展开阅读全文 --