TypeScript 饱受开发者争议。有人认为它是 JavaScript 自由的绊脚石，也有人将其视为在松散类型代码中的一盏明灯。无论您持何种观点，TypeScript 都将继续存在——深入了解后，您可能会发现它并非负担，而是项目的一大助力。
本系列教程将探索 TypeScript 基础知识，并提供一些技巧和疑难解答提示。
一、简介
什么是 TypeScript？
TypeScript 是 JavaScript 的静态类型超集，可编译成纯 JavaScript。简单来说，它是在 JavaScript 基础上添加了类型检查功能，帮助您尽早发现错误，编写更优质、更易维护的代码。
您可以将 TypeScript 视为一位友好的助手，在您提交代码之前仔细检查您的工作。它能帮助您：
在编码阶段发现错误，而非部署后。 编写更易读、更易懂的代码。 扩展项目规模，同时保持代码结构清晰。为什么使用 TypeScript？
让我们务实一些。既然 JavaScript 已经能工作，为什么还要关心 TypeScript 呢？
真正的优势： 尽早捕获错误：避免常见错误，例如将错误的数据类型传递给函数。1
2
3
4
function greet(name: string): string {
return `Hello, ${name}!`;
}
greet(42); // 错误：参数类型“number”无法赋值给参数类型“string”。
我发现 TypeScript 在规划大型应用时特别有用；它能清晰地展现我将处理的数据类型以及函数的输入/输出类型。
先决条件
开始之前，请确保您具备基本的 JavaScript 知识，包括：
变量和数据类型（例如，let、const、字符串、数字） 函数 数组和对象如果您对这些知识点不熟悉，请先回顾一下 JavaScript 基础知识。
二、设置开发环境
安装 TypeScript
TypeScript 需要安装才能使用。只需几个步骤即可准备您的开发环境：
首先，您需要安装 Node.js。安装完成后：
全局安装 TypeScript：1
npm install -g typescript
1
tsc --version
设置 VS Code
VS Code 是 TypeScript 开发中最流行的编辑器之一，它提供了一系列功能和扩展，提高开发效率。设置方法如下：
安装 VS Code：请访问官方网站下载。 安装以下实用扩展： ESLint：用于检查 TypeScript 代码。 Prettier：用于代码格式化。 TypeScript Hero：提高开发效率。创建您的第一个 TypeScript 项目
创建一个新文件夹并导航到其中：1
2
mkdir typescript-starter
cd typescript-starter
1
npm init -y
1
npm install --save-dev typescript
1
npx tsc --init
1
echo "console.log(Hello, TypeScript!);" > index.ts
1
2
npx tsc index.ts
node index.js
您刚刚编写并编译了您的第一个 TypeScript 程序！
三、基本类型概述
TypeScript 的强大之处在于其类型系统。让我们探讨一些基本类型：
原始类型
原始类型是 TypeScript 类型系统的基石，包括基本数据类型，如字符串、数字和布尔值。以下是它们的简要介绍：
字符串：1
let name: string = "Alice";
1
let age: number = 25;
1
let isStudent: boolean = true;
高级类型
除了原始类型外，TypeScript 还支持更复杂的类型，例如数组、元组和特殊类型（例如 any 和 unknown）。这些类型使您的代码更灵活，同时保持类型安全。
数组：1
let scores: number[] = [90, 85, 88];
1
let user: [string, number] = ["Alice", 25];
1
let data: any = "可以是任何类型";
1
let value: unknown = 10;
1
2
3
function logMessage(message: string): void {
console.log(message);
}
1
2
let something: null = null;
let nothing: undefined = undefined;
四、使用类型注释
TypeScript 中的类型注释允许开发人员指定变量、参数或函数返回值的类型，确保代码符合定义的结构，从而更容易在开发过程中捕获错误并保持项目的一致性。
在编写代码时，请注意以下集成功能：
基本变量类型
为变量设置类型，确保它们始终被赋予正确的值，并且应用程序的其余部分能正确识别其类型。
1
2
let firstName: string = "Alice";
let age: number = 30;
函数参数类型
同样，对于函数，您可以定义参数的类型，以及返回值的类型。
1
2
3
4
// 注意每个参数的“number”关键字
function add(a: number, b: number): number {
return a + b;
}
返回类型注释
1
2
3
4
// 注意结尾处的“string”关键字
function greet(name: string): string {
return `Hello, ${name}!`;
}
实际示例：用户配置文件
TypeScript 允许您声明自定义类型，以更好地构建代码并强制执行规则。通过使用类型或接口，您可以为对象、函数甚至联合类型定义自定义类型。这不仅使您的代码更健壮，而且还提高了大型项目的可读性和一致性。
1
2
3
4
5
6
7
8
9
10
11
interface UserProfile {
name: string;
age: number;
isActive: boolean;
}
const user: UserProfile = {
name: "Alice",
age: 25,
isActive: true,
};
五、接口快速入门
基本语法
TypeScript 中的接口定义了对象的结构，确保它们具有特定的属性和类型。本节将向您展示如何创建和使用接口：
1
2
3
4
5
6
7
8
9
interface User {
name: string;
age: number;
}
const user: User = {
name: "Bob",
age: 30,
};
可选属性
有时，并非对象中的所有属性都是必需的。TypeScript 允许您在接口中定义可选属性以优雅地处理这种情况。
1
2
3
4
5
6
interface Product {
name: string;
price?: number;
}
const item: Product = { name: "笔记本" };
只读属性
当您想要确保某些值在设置后无法更改时，只读属性非常有用。以下是如何在接口中使用它们：
1
2
3
4
5
6
interface Book {
readonly title: string;
}
const myBook: Book = { title: "TypeScript 手册" };
// myBook.title = "另一本书名"; // 错误：无法赋值给“title”。
真实示例：API 响应
使用接口来定义 API 响应可以确保您安全有效地处理来自服务器的数据。这是一个实际示例：
1
2
3
4
interface ApiResponse {
data: unknown;
status: number;
}
六、练习项目：构建简单的待办事项列表
实践是掌握 TypeScript 的关键。在此项目中，您将创建一个简单的待办事项列表应用程序，该应用程序将运用您迄今为止学到的知识：
创建一个 Todo 类型：1
2
3
4
5
interface Todo {
id: number;
title: string;
completed: boolean;
}
1
2
3
const todos: Todo[] = [
{ id: 1, title: "学习 TypeScript", completed: false },
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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 接口，并使用它对博客文章列表进行类型检查。期待下次与您相见！
以上就是TypeScript 基础知识：初学者指南 (✅的详细内容，更多请关注php中文网其它相关文章！