5 TypeScript 入门之基本类型与接口

在上一篇文章中，我们对 TypeScript 进行了基本的介绍，了解了它的主要特性及其相对于 JavaScript 的优势。今天，我们将深入探讨 TypeScript 的基本类型与接口，帮助你更好地理解如何在 React 应用中使用 TypeScript 提升代码的可读性与可维护性。

基本类型

TypeScript 提供了一些基本的数据类型，支持 JavaScript 中的所有基本类型，并在此基础上进行了扩展。以下是 TypeScript 的基本类型及其说明：

• number：表示数值，可以是整数或浮点数。
• string：表示字符串。
• boolean：表示布尔值，只有两种可能：true 和 false。
• void：表示没有任何类型，常用于函数没有返回值时。
• null 和 undefined：分别表示空值和未定义值。
• any：表示任意类型，可以是任何类型的值。
• never：表示永远不会发生的值，通常用于抛出异常或无限循环的函数。

示例

以下是几个基本类型的示例：

let age: number = 30;
let name: string = "Alice";
let isStudent: boolean = false;
let money: any = 100.5; // 这里可以赋值其他类型
let notAssigned: undefined = undefined;
let noValue: null = null;

数组与元组

数组

在 TypeScript 中，数组可以使用两种方式声明类型：使用 tipo[] 或 Array<tipo>。

let numbers: number[] = [1, 2, 3, 4];
let fruits: Array<string> = ["apple", "banana", "orange"];

元组

元组是一个已知元素数量和类型的数组，可以用来表示一些固定结构的数据。

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

接口

接口是 TypeScript 中的一种强大的用来定义对象的结构的方式。通过接口，可以定义对象的类型，以及对象应该包含哪些属性。

定义接口

下面是如何定义一个接口的示例：

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

使用接口

可以使用定义好的接口来为对象类型注解，使得类型更加明确和安全：

let person: Person = {
    name: "Alice",
    age: 30,
    isStudent: false
};

可选属性

在接口中，可以使用问号 ? 来定义可选属性：

interface Person {
    name: string;
    age: number;
    isStudent?: boolean; // 可选属性
}

let person1: Person = {
    name: "Alice",
    age: 30
};

let person2: Person = {
    name: "Bob",
    age: 25,
    isStudent: true
};

函数类型与接口

你也可以使用接口来定义函数的类型，包括函数的参数和返回类型：

interface Greet {
    (name: string): string;
}

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

结合 React 的应用

当你在 React 中使用 TypeScript 时，接口和基本类型的使用变得尤为重要。例如，定义组件的 props 类型，可以提升代码的可读性及可维护性。

import React from 'react';

interface UserProps {
    username: string;
    age: number;
}

const User: React.FC<UserProps> = ({ username, age }) => {
    return (
        <div>
            <h1>{username}</h1>
            <p>Age: {age}</p>
        </div>
    );
};

export default User;

在这个例子中，我们使用了 UserProps 接口来定义 User 组件所需的 props 类型。这使得组件在使用时会提供类型检查，保证所传参数的类型正确。

结论

在本篇文章中，我们深入探讨了 TypeScript 的基本类型与接口。通过这些基础知识，我们可以更好地在 React 应用中管理数据结构，确保代码的类型安全和可维护性。接下来，在下一篇文章中，我们将学习如何掌握 TypeScript 的类型推断，进一步提升我们的开发能力。希望大家继续关注！