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概述、简单变量、操作符、列表和数组变量、文件读写、模式匹配、控制结构、子程序、关联数组/哈希表、格式化输出、文件系统、引用、面向对象、包和模块等知识点。适合初学者阅读和了解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;
}
}
七、后续步骤
希望您喜欢本教程。我将继续创作更多教程，更深入地探讨 TypeScript 的功能和用例。
- 下一步：深入探讨 TypeScript 函数和高级类型。
-
资源：
- TypeScript 官方文档
- CodeSandbox（用于在线练习 TypeScript）
- 挑战：为博客文章创建一个 TypeScript 接口，并使用它对博客文章列表进行类型检查。
期待下次与您相见！
