TypeScript 基础知识：初学者指南 (✅-js教程-PHP中文网

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

霞舞

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

原创

898人浏览过

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

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

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

一、简介

什么是 TypeScript？

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

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

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

为什么使用 TypeScript？

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

真正的优势：

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

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

登录后复制

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

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

先决条件

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

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

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

二、设置开发环境

安装 TypeScript

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

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

全局安装 TypeScript：

<code class="bash">npm install -g typescript</code>

登录后复制

验证安装：

<code class="bash">tsc --version</code>

登录后复制

设置 VS Code

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

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

创建您的第一个 TypeScript 项目

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

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

<code class="bash">mkdir typescript-starter
cd typescript-starter</code>

登录后复制

初始化一个新项目：

<code class="bash">npm init -y</code>

登录后复制

添加 TypeScript：

<code class="bash">npm install --save-dev typescript</code>

登录后复制

创建 tsconfig.json 文件：

<code class="bash">npx tsc --init</code>

登录后复制

编写您的第一个 TypeScript 文件：

<code class="bash">echo "console.log('Hello, TypeScript!');" > index.ts</code>

登录后复制

编译并运行：

<code class="bash">npx tsc index.ts
node index.js</code>

登录后复制

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

三、基本类型概述

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

原始类型

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

无涯·问知

无涯·问知，是一款基于星环大模型底座，结合个人知识库、企业知识库、法律法规、财经等多种知识源的企业级垂直领域问答产品

查看详情

字符串：

<code class="typescript">let name: string = "Alice";</code>

登录后复制

数字：

<code class="typescript">let age: number = 25;</code>

登录后复制

布尔值：

<code class="typescript">let isStudent: boolean = true;</code>

登录后复制

高级类型

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

数组：

<code class="typescript">let scores: number[] = [90, 85, 88];</code>

登录后复制

元组：

<code class="typescript">let user: [string, number] = ["Alice", 25];</code>

登录后复制

any（谨慎使用）：

<code class="typescript">let data: any = "可以是任何类型";</code>

登录后复制

unknown（比 any 更安全）：

<code class="typescript">let value: unknown = 10;</code>

登录后复制

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

<code class="typescript">function logMessage(message: string): void {
  console.log(message);
}</code>

登录后复制

null 和 undefined：

<code class="typescript">let something: null = null;
let nothing: undefined = undefined;</code>

登录后复制

四、使用类型注释

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

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

基本变量类型

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

<code class="typescript">let firstName: string = "Alice";
let age: number = 30;</code>

登录后复制

函数参数类型

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

<code class="typescript">// 注意每个参数的“number”关键字
function add(a: number, b: number): number {
  return a + b;
}</code>

登录后复制

返回类型注释

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

登录后复制

实际示例：用户配置文件

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

<code class="typescript">interface UserProfile {
  name: string;
  age: number;
  isActive: boolean;
}

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

登录后复制

五、接口快速入门

基本语法

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

<code class="typescript">interface User {
  name: string;
  age: number;
}

const user: User = {
  name: "Bob",
  age: 30,
};</code>

登录后复制

可选属性

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

<code class="typescript">interface Product {
  name: string;
  price?: number;
}

const item: Product = { name: "笔记本" };</code>

登录后复制

只读属性

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

<code class="typescript">interface Book {
  readonly title: string;
}

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

登录后复制

真实示例：API 响应

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

<code class="typescript">interface ApiResponse {
  data: unknown;
  status: number;
}</code>

登录后复制

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

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

创建一个 Todo 类型：

<code class="typescript">interface Todo {
  id: number;
  title: string;
  completed: boolean;
}</code>

登录后复制

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

<code class="typescript">const todos: Todo[] = [
  { id: 1, title: "学习 TypeScript", completed: false },
];</code>

登录后复制

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

<code class="typescript">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;
    }
}</code>

登录后复制