Quantcast
Channel: 小蓝博客
Viewing all articles
Browse latest Browse all 3145

TypeScript类型声明:基础与进阶

$
0
0

TypeScript类型声明:基础与进阶

TypeScript是一种为JavaScript添加了静态类型的编程语言,能够提高代码的可维护性和可靠性。类型声明是TypeScript的核心功能之一,通过定义明确的类型,开发者可以更好地约束代码行为,减少运行时错误。本文将详细介绍TypeScript的基础和进阶类型声明。

一、基础类型声明

1. 基本数据类型

TypeScript提供了与JavaScript相同的基本数据类型,并在其基础上添加了类型约束。

数字(Number)

let num: number = 10;

字符串(String)

let str: string = "Hello, TypeScript!";

布尔值(Boolean)

let isActive: boolean = true;

数组(Array)

可以使用两种方式声明数组类型:

let numArray: number[] = [1, 2, 3];
let strArray: Array<string> = ["one", "two", "three"];

元组(Tuple)

元组用于表示已知数量和类型的数组:

let tuple: [number, string] = [1, "one"];

枚举(Enum)

枚举类型用于定义一组命名常量:

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

任意类型(Any)

any类型用于动态内容,不进行类型检查:

let randomValue: any = 42;
randomValue = "A string";
randomValue = true;

空值(Void)

void类型通常用于没有返回值的函数:

function logMessage(message: string): void {
    console.log(message);
}

Null和Undefined

可以分别使用 nullundefined类型:

let u: undefined = undefined;
let n: null = null;

2. 接口(Interface)

接口用于定义对象的类型:

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

let john: Person = {
    name: "John Doe",
    age: 30
};

3. 函数类型

可以为函数定义类型,包括参数和返回值:

function add(x: number, y: number): number {
    return x + y;
}

let myAdd: (a: number, b: number) => number = add;

4. 类型别名(Type Alias)

类型别名用于给类型起一个新名字:

type StringOrNumber = string | number;

let value: StringOrNumber;
value = "Hello";
value = 123;

二、进阶类型声明

1. 联合类型(Union Types)

联合类型表示一个值可以是几种类型之一:

let id: number | string;
id = 10;
id = "A123";

2. 交叉类型(Intersection Types)

交叉类型将多个类型合并为一个类型:

interface CanFly {
    fly(): void;
}

interface CanSwim {
    swim(): void;
}

type Amphibious = CanFly & CanSwim;

let frog: Amphibious = {
    fly() { console.log("Flying"); },
    swim() { console.log("Swimming"); }
};

3. 类型推断

TypeScript能够根据赋值自动推断变量的类型:

let inferredString = "Hello, World!";  // 推断为string类型

4. 类型守卫(Type Guards)

类型守卫用于细化联合类型:

function isString(value: any): value is string {
    return typeof value === "string";
}

function example(value: string | number) {
    if (isString(value)) {
        console.log("It's a string: " + value);
    } else {
        console.log("It's a number: " + value);
    }
}

5. 泛型(Generics)

泛型用于创建可重用的组件:

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

let output = identity<string>("Hello");

6. 高级类型

条件类型(Conditional Types)

根据条件选择类型:

type NonNullable<T> = T extends null | undefined ? never : T;

映射类型(Mapped Types)

根据旧类型创建新类型:

type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

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

let readonlyPerson: Readonly<Person> = {
    name: "John",
    age: 30
};

索引类型(Index Types)

用于查询对象类型的属性:

function getProperty<T, K extends keyof T>(obj: T, key: K) {
    return obj[key];
}

let person = { name: "Alice", age: 25 };
let name = getProperty(person, "name");

分析说明表

类型用法示例
基本类型定义基本数据类型let num: number = 10;
数组定义数组类型let numArray: number[] = [1, 2, 3];
元组定义已知类型和长度的数组let tuple: [number, string] = [1, "one"];
枚举定义一组命名常量enum Color { Red, Green, Blue }
接口定义对象的结构interface Person { name: string; age: number; }
函数类型定义函数的参数和返回值类型let myAdd: (a: number, b: number) => number = add;
类型别名给类型起别名`type StringOrNumber = string
联合类型定义可以是多种类型之一的变量`let id: number
交叉类型将多个类型合并为一个类型type Amphibious = CanFly & CanSwim;
泛型创建可重用的组件function identity<T>(arg: T): T { return arg; }
条件类型根据条件选择类型`type NonNullable = T extends null
映射类型根据旧类型创建新类型type Readonly<T> = { readonly [P in keyof T]: T[P]; };
索引类型查询对象类型的属性function getProperty<T, K extends keyof T>(obj: T, key: K) { return obj[key]; }

总结

通过本文的介绍,我们详细探讨了TypeScript的基础与进阶类型声明。从基本数据类型到复杂的泛型和高级类型,TypeScript提供了丰富的工具来确保代码的类型安全和可维护性。掌握这些类型声明能够帮助开发者编写更加健壮和高效的代码,提高开发效率和代码质量。希望本文能为您在使用TypeScript时提供实用的参考和指导。


Viewing all articles
Browse latest Browse all 3145

Trending Articles