TypeScript 基础知识：初学者指南 (✅

霞舞

发布时间：2025-01-09 10:07:04

911人浏览过

来源于php中文网

原创

typescript 基础知识：初学者指南 (✅

TypeScript 饱受开发者争议。有人认为它是 JavaScript 自由的绊脚石，也有人将其视为在松散类型代码中的一盏明灯。无论您持何种观点，TypeScript 都将继续存在——深入了解后，您可能会发现它并非负担，而是项目的一大助力。

本系列教程将探索 TypeScript 基础知识，并提供一些技巧和疑难解答提示。

一、简介

什么是 TypeScript？

TypeScript 是 JavaScript 的静态类型超集，可编译成纯 JavaScript。简单来说，它是在 JavaScript 基础上添加了类型检查功能，帮助您尽早发现错误，编写更优质、更易维护的代码。

您可以将 TypeScript 视为一位友好的助手，在您提交代码之前仔细检查您的工作。它能帮助您：

在编码阶段发现错误，而非部署后。
编写更易读、更易懂的代码。
扩展项目规模，同时保持代码结构清晰。

为什么使用 TypeScript？

让我们务实一些。既然 JavaScript 已经能工作，为什么还要关心 TypeScript 呢？

真正的优势：

尽早捕获错误：避免常见错误，例如将错误的数据类型传递给函数。

function greet(name: string): string {
  return `Hello, ${name}!`;
}
greet(42); // 错误：参数类型“number”无法赋值给参数类型“string”。

自动完成和代码提示：现代编辑器（如 VS Code）会在您键入时提供丰富的自动完成建议和代码提示。
代码可扩展性：TypeScript 的类型系统在大型项目中尤其有效，保持代码一致性。
改进的团队协作：清晰的类型定义使团队成员更容易理解代码。

我发现 TypeScript 在规划大型应用时特别有用；它能清晰地展现我将处理的数据类型以及函数的输入/输出类型。

先决条件

开始之前，请确保您具备基本的 JavaScript 知识，包括：

变量和数据类型（例如，let、const、字符串、数字）
函数
数组和对象

如果您对这些知识点不熟悉，请先回顾一下 JavaScript 基础知识。

二、设置开发环境

安装 TypeScript

TypeScript 需要安装才能使用。只需几个步骤即可准备您的开发环境：

首先，您需要安装 Node.js。安装完成后：

全局安装 TypeScript：

npm install -g typescript

验证安装：

tsc --version

设置 VS Code

VS Code 是 TypeScript 开发中最流行的编辑器之一，它提供了一系列功能和扩展，提高开发效率。设置方法如下：

安装 VS Code：请访问官方网站下载。
安装以下实用扩展：
- ESLint：用于检查 TypeScript 代码。
- Prettier：用于代码格式化。
- TypeScript Hero：提高开发效率。

创建您的第一个 TypeScript 项目

实践是学习 TypeScript 最佳途径。本节将指导您完成第一个项目的设置，从创建文件到运行代码。

创建一个新文件夹并导航到其中：

mkdir typescript-starter
cd typescript-starter

初始化一个新项目：

npm init -y

添加 TypeScript：

npm install --save-dev typescript

创建 tsconfig.json 文件：

npx tsc --init

编写您的第一个 TypeScript 文件：

echo "console.log('Hello, TypeScript!');" > index.ts

编译并运行：

npx tsc index.ts
node index.js

您刚刚编写并编译了您的第一个 TypeScript 程序！

三、基本类型概述

TypeScript 的强大之处在于其类型系统。让我们探讨一些基本类型：

原始类型

原始类型是 TypeScript 类型系统的基石，包括基本数据类型，如字符串、数字和布尔值。以下是它们的简要介绍：

Perl 基础教程 chm

Perl 基础入门中文教程，chm格式，讲述PERL概述、简单变量、操作符、列表和数组变量、文件读写、模式匹配、控制结构、子程序、关联数组/哈希表、格式化输出、文件系统、引用、面向对象、包和模块等知识点。适合初学者阅读和了解Perl脚本语言。

下载

字符串：

let name: string = "Alice";

数字：

let age: number = 25;

布尔值：

let isStudent: boolean = true;

高级类型

除了原始类型外，TypeScript 还支持更复杂的类型，例如数组、元组和特殊类型（例如 any 和 unknown）。这些类型使您的代码更灵活，同时保持类型安全。

数组：

let scores: number[] = [90, 85, 88];

元组：

let user: [string, number] = ["Alice", 25];

any（谨慎使用）：

let data: any = "可以是任何类型";

unknown（比 any 更安全）：

let value: unknown = 10;

void（不返回任何值的函数）：

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

null 和 undefined：

let something: null = null;
let nothing: undefined = undefined;

四、使用类型注释

TypeScript 中的类型注释允许开发人员指定变量、参数或函数返回值的类型，确保代码符合定义的结构，从而更容易在开发过程中捕获错误并保持项目的一致性。

在编写代码时，请注意以下集成功能：

基本变量类型

为变量设置类型，确保它们始终被赋予正确的值，并且应用程序的其余部分能正确识别其类型。

let firstName: string = "Alice";
let age: number = 30;

函数参数类型

同样，对于函数，您可以定义参数的类型，以及返回值的类型。

// 注意每个参数的“number”关键字
function add(a: number, b: number): number {
  return a + b;
}

返回类型注释

// 注意结尾处的“string”关键字
function greet(name: string): string {
  return `Hello, ${name}!`;
}

实际示例：用户配置文件

TypeScript 允许您声明自定义类型，以更好地构建代码并强制执行规则。通过使用类型或接口，您可以为对象、函数甚至联合类型定义自定义类型。这不仅使您的代码更健壮，而且还提高了大型项目的可读性和一致性。

interface UserProfile {
  name: string;
  age: number;
  isActive: boolean;
}

const user: UserProfile = {
  name: "Alice",
  age: 25,
  isActive: true,
};

五、接口快速入门

基本语法

TypeScript 中的接口定义了对象的结构，确保它们具有特定的属性和类型。本节将向您展示如何创建和使用接口：

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

const user: User = {
  name: "Bob",
  age: 30,
};

可选属性

有时，并非对象中的所有属性都是必需的。TypeScript 允许您在接口中定义可选属性以优雅地处理这种情况。

interface Product {
  name: string;
  price?: number;
}

const item: Product = { name: "笔记本" };

只读属性

当您想要确保某些值在设置后无法更改时，只读属性非常有用。以下是如何在接口中使用它们：

interface Book {
  readonly title: string;
}

const myBook: Book = { title: "TypeScript 手册" };
// myBook.title = "另一本书名"; // 错误：无法赋值给“title”。

真实示例：API 响应

使用接口来定义 API 响应可以确保您安全有效地处理来自服务器的数据。这是一个实际示例：

interface ApiResponse {
  data: unknown;
  status: number;
}

六、练习项目：构建简单的待办事项列表

实践是掌握 TypeScript 的关键。在此项目中，您将创建一个简单的待办事项列表应用程序，该应用程序将运用您迄今为止学到的知识：

创建一个 Todo 类型：

interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

构建一个简单的待办事项数组：

const todos: Todo[] = [
  { id: 1, title: "学习 TypeScript", completed: false },
];

添加一些功能来添加待办事项并将待办事项标记为已完成：

function markAsComplete(todo: Todo): boolean {
    let bUpdated = false;
    todos.map((td: Todo) => {
        if (td.id === todo.id) {
            bUpdated = true;
            td.completed = true;
        }
    });
    return bUpdated;
}

function addToDo(todo: Todo): boolean {
    try {
        todos.push(todo);
        console.log(`已将 "${todo.title}" 添加到列表！`);
        return true;
    } catch (error) {
        console.error("添加待办事项时出错！", error);
        return false;
    }
}