搜索

首页 >web前端 >js教程 >TypeScript 基础知识：初学者指南 (✅

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

Patricia Arquette
Patricia Arquette原创
2025-01-07 12:38:40391浏览

TypeScript Fundamentals: A Beginner

TypeScript 在开发者中引起了无休止的争论。有些人将其视为 JavaScript 自由的官僚障碍，而另一些人则将其誉为松散类型代码战壕中的灯塔。不管你喜欢还是讨厌，TypeScript 都会留下来——一旦你了解它，你可能会发现它不是一种负担，而是对你的项目的祝福。

在本系列中，我们将探索 TypeScript 并涵盖基础知识——以及一些技巧和故障排除提示。

一、简介

什么是 TypeScript？

TypeScript 是 JavaScript 的静态类型超集，可编译为纯 JavaScript。简单来说，它是具有额外功能的 JavaScript，可帮助您及早发现错误并编写更好、更易于维护的代码。

将 TypeScript 视为友好的助手，在您提交工作之前仔细检查您的工作。它可以让你：

  • 在编码时发现错误，而不是在部署之后。
  • 编写更易于阅读和理解的代码。
  • 扩展您的项目，同时又不丢失事物的连接方式。

为什么使用 TypeScript？

让我们实际一点吧。当 JavaScript 已经可以工作时，为什么还要关心 TypeScript？

真正的好处：

  1. 尽早捕获错误：避免常见的陷阱，例如将错误的数据类型传递给函数。 
   function greet(name: string) {
     return `Hello, ${name}!`;
   }
   greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

  1. 自动完成和文档：现代编辑器（如 VS Code）在您键入时提供丰富的自动完成建议和文档。

  2. 代码可扩展性：TypeScript 的功能在保持一致性是关键的大型项目中表现出色。

  3. 改进的团队协作：清晰的类型让团队成员更容易一目了然地理解您的代码。

我发现 TypeScript 对于规划更大的应用程序特别有帮助；了解我将处理哪些类型的数据以及我的函数获取/返回哪些数据。

先决条件

开始之前，请确保您具备基本的 JavaScript 知识。您应该熟悉：

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

如果您还没有信心，请花一些时间回顾一下 JavaScript 基础知识。

2. 设置您的环境

安装 TypeScript

TypeScript 是一个需要安装才能开始使用的工具。只需几个步骤，您就可以准备环境以开始使用 TypeScript 进行编码。操作方法如下：

要开始使用 TypeScript，您需要安装 Node.js。一旦你有了：

  1. 全局安装 TypeScript： 
   function greet(name: string) {
     return `Hello, ${name}!`;
   }
   greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.
  1. 验证安装： 
   npm install -g typescript

设置 VS 代码

VS Code 是 TypeScript 开发中最受欢迎的编辑器之一。它提供了一系列功能和扩展，使编码变得更容易、更高效。让我们来设置一下：

VS Code 是 TypeScript 开发人员的首选编辑器。设置方法如下：

  1. 安装 VS Code：在此处下载
  2. 添加这些有用的扩展：
    • ESLint：用于检查 TypeScript 代码。
    • Prettier：保持代码格式一致。
    • TypeScript Hero：提高工作效率。

创建您的第一个 TypeScript 项目

动手实践是学习 TypeScript 的最佳方式。本部分将指导您完成第一个项目的设置，从创建文件到运行代码。

  1. 为您的项目创建一个新文件夹并导航到其中： 
   tsc --version
  1. 初始化一个新项目： 
   mkdir typescript-starter
   cd typescript-starter
  1. 添加打字稿： 
   npm init -y
  1. 创建 tsconfig.json 文件： 
   npm install --save-dev typescript
  1. 编写你的第一个 TypeScript 文件： 
   npx tsc --init
  1. 编译并运行： 
   echo "console.log('Hello, TypeScript!');" > index.ts

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

3. 基本类型概述

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

原始类型

原始类型是 TypeScript 类型系统的构建块。它们包括基本数据类型，如字符串、数字和布尔值。以下是如何使用它们的快速浏览：

  1. 字符串： 
   npx tsc index.ts
   node index.js
  1. 数字： 
   let name: string = "Alice";
  1. 布尔值： 
   let age: number = 25;

高级类型

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

  1. 数组： 
   function greet(name: string) {
     return `Hello, ${name}!`;
   }
   greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.
  1. 元组： 
   npm install -g typescript
  1. 任何（谨慎使用）： 
   tsc --version
  1. 未知（比任何都安全）： 
   mkdir typescript-starter
   cd typescript-starter
  1. void（不返回任何内容的函数）： 
   npm init -y
  1. null 和未定义： 
   npm install --save-dev typescript

4. 使用类型注释的第一步

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

当您像平常一样编写代码时，请注意以下可以集成的功能

基本变量类型

为变量设置类型，以便它们始终设置为正确的值，并且应用程序的其余部分了解它们是什么。

   npx tsc --init

函数参数输入

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

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

返回类型注释 

   npx tsc index.ts
   node index.js

实际示例：用户配置文件

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

   let name: string = "Alice";

5. 接口快速入门

基本语法

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

   let age: number = 25;

可选属性

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

   let isStudent: boolean = true;

只读属性

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

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

真实示例：API 响应

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

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

6. 练习项目：建立一个简单的待办事项列表

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

  1. 创建一个 Todo 类型： 
   function greet(name: string) {
     return `Hello, ${name}!`;
   }
   greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.
  1. 构建一个简单的待办事项数组： 
   npm install -g typescript
  1. 添加一些功能来添加待办事项并将待办事项标记为完成： 
   tsc --version

7. 后续步骤

现在就是这样，希望您喜欢本教程。我将致力于一些额外的教程，以更深入地挖掘有用的 TypeScript 功能和用例。

  • 接下来：深入探讨 TypeScript 函数和高级类型。
  • 资源：
    • TypeScript 文档
    • 用于在线练习 TypeScript 的 CodeSandbox。
  • 挑战：为博客文章创建 TypeScript 接口，并使用它对博客文章列表进行类型检查。

下次见！

以上是TypeScript 基础知识：初学者指南 (✅的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript typescript json String Boolean Array Object NULL define if for while include catch const double void using Interface JS number undefined function this
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：Tree Shaking in JS下一篇：How to Build and Deploy a Full-Stack MERN Application

相关文章

查看更多