TypeScript 入门教程：从零开始学习 TypeScript – wiki基地

作者： /

TypeScript 入门教程：从零开始学习 TypeScript

TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，这意味着任何有效的 JavaScript 代码也是有效的 TypeScript 代码。TypeScript 最大的特点是它为 JavaScript 添加了静态类型检查，从而能够在编译时发现潜在的错误，提高代码的可维护性和可读性。

对于习惯了动态类型语言（如 JavaScript）的开发者来说，学习 TypeScript 可能需要一个适应过程。但毋庸置疑的是，TypeScript 带来的好处是巨大的，尤其是在大型项目中，它能够显著提高代码质量，减少运行时错误，并提升开发效率。

本教程旨在帮助你从零开始学习 TypeScript，我们将由浅入深地介绍 TypeScript 的核心概念，并通过实际示例演示其用法，让你能够快速上手并应用到实际项目中。

一、为什么选择 TypeScript？

在深入学习 TypeScript 之前，让我们先了解一下 TypeScript 的优势，以便更好地理解学习它的必要性：

  • 静态类型检查: 这是 TypeScript 最核心的特性。TypeScript 允许你为变量、函数参数、返回值等定义类型，编译器会在编译时检查这些类型是否匹配，从而避免许多因类型错误导致的运行时错误。
  • 更好的代码可读性: 类型定义可以清晰地表达代码的意图，让其他人更容易理解代码的功能和用法。
  • 增强的代码可维护性: 静态类型检查可以帮助你更容易地发现和修复代码中的错误，减少重构的风险。当代码发生变化时，类型检查器可以帮助你确认修改是否会影响其他部分。
  • 强大的代码提示和自动补全: TypeScript 集成了强大的语言服务，可以在编辑器中提供更准确的代码提示、自动补全和重构功能，从而提高开发效率。
  • 支持最新的 JavaScript 特性: TypeScript 能够支持最新的 ECMAScript 标准，让你能够使用最新的 JavaScript 特性，而无需担心浏览器的兼容性。
  • 更强大的工具链: TypeScript 拥有强大的工具链，包括编译器、语言服务和调试工具，可以帮助你更好地管理和开发项目。
  • 更容易进行大型项目开发: TypeScript 的静态类型检查和模块化机制使其更适合进行大型项目的开发，能够更好地组织和管理代码。

二、TypeScript 环境搭建

在开始编写 TypeScript 代码之前，我们需要先安装 TypeScript 编译器。

  1. 安装 Node.js 和 npm: TypeScript 依赖于 Node.js 和 npm（Node Package Manager）。请确保你的电脑上已经安装了 Node.js 和 npm。你可以从 Node.js 官网 (https://nodejs.org/) 下载并安装。

  2. 全局安装 TypeScript: 打开你的终端或命令提示符，运行以下命令：

bash
npm install -g typescript

这个命令会将 TypeScript 编译器 tsc 安装到你的全局环境中，你可以在任何地方使用它。

  1. 验证安装: 安装完成后，可以运行以下命令来验证 TypeScript 是否安装成功：

bash
tsc -v

如果成功安装，你会看到 TypeScript 编译器的版本号。

三、第一个 TypeScript 程序：Hello, World!

让我们来编写一个简单的 Hello, World! 程序，来体验一下 TypeScript 的基本语法。

  1. 创建 hello.ts 文件: 在你喜欢的代码编辑器中创建一个名为 hello.ts 的文件，并输入以下代码：

“`typescript
function greet(name: string): string {
return “Hello, ” + name + “!”;
}

let user: string = “World”;
console.log(greet(user));
“`

在这个例子中，我们定义了一个名为 greet 的函数，它接受一个字符串类型的参数 name，并返回一个字符串。我们还定义了一个字符串类型的变量 user，并将它赋值为 “World”。最后，我们调用 greet 函数，并将 user 作为参数传入，并将结果打印到控制台。

  1. 编译 TypeScript 代码: 打开你的终端或命令提示符，切换到 hello.ts 文件所在的目录，并运行以下命令：

bash
tsc hello.ts

这个命令会使用 TypeScript 编译器 tsc 将 hello.ts 文件编译成 JavaScript 文件 hello.js。

  1. 运行 JavaScript 代码: 运行以下命令来执行编译后的 JavaScript 代码：

bash
node hello.js

你会在控制台上看到 “Hello, World!”。

四、TypeScript 基础语法

现在，让我们来了解一下 TypeScript 的一些基础语法。

  • 类型声明: TypeScript 允许你为变量、函数参数、返回值等声明类型。类型声明可以提高代码的可读性和可维护性，并帮助编译器发现潜在的错误。

  • 基本类型: TypeScript 支持 JavaScript 的所有基本类型，包括：

    • number: 数字类型，包括整数和浮点数。
    • string: 字符串类型。
    • boolean: 布尔类型，true 或 false。
    • null: 空类型，表示一个空值。
    • undefined: 未定义类型，表示一个未初始化的变量。
    • symbol: ES6 中新增的符号类型，用于创建唯一的标识符。
    • bigint: ES2020 中新增的大整数类型，用于表示超过 JavaScript Number 类型安全范围的整数。

  • 其他类型:

    • any: 任意类型，可以赋值为任何值。 应尽量避免使用 any 类型，因为它会失去 TypeScript 的类型检查优势。
    • void: 空类型，用于表示函数没有返回值。
    • never: 永不存在的值的类型。 例如：函数抛出异常或进入死循环。
    • unknown: 表示一个未知类型，与 any 类似，但更安全，因为它要求在使用前进行类型断言或类型检查。

  • 数组类型: 可以使用以下两种方式声明数组类型：

    typescript
    let numbers: number[] = [1, 2, 3];
    let names: Array<string> = ["Alice", "Bob", "Charlie"];

  • 元组类型: 元组类型允许你定义一个固定长度和类型的数组。

    typescript
    let person: [string, number] = ["Alice", 30];

  • 对象类型: 可以使用接口或类型别名来定义对象类型。

    “`typescript
    // 使用接口定义对象类型
    interface Person {
    name: string;
    age: number;
    }

    let alice: Person = {
    name: “Alice”,
    age: 30
    };

    // 使用类型别名定义对象类型
    type Point = {
    x: number;
    y: number;
    };

    let origin: Point = {
    x: 0,
    y: 0
    };
    “`

  • 函数: TypeScript 允许你为函数参数和返回值声明类型。

“`typescript
function add(x: number, y: number): number {
return x + y;
}

let result: number = add(1, 2);
“`

  • 接口 (Interfaces): 接口是一种定义对象结构的方式。它可以用来描述对象应该有哪些属性，以及这些属性的类型。

“`typescript
interface Person {
firstName: string;
lastName: string;
age?: number; // 可选属性
greet(): string; // 方法
}

let employee: Person = {
firstName: “John”,
lastName: “Doe”,
age: 30,
greet: function() {
return “Hello, my name is ” + this.firstName + ” ” + this.lastName;
}
};
“`

  • 类 (Classes): TypeScript 支持面向对象编程，允许你定义类和对象。

“`typescript
class Animal {
name: string;

   constructor(name: string) {
       this.name = name;
   }

   move(distanceInMeters: number = 0) {
       console.log(`${this.name} moved ${distanceInMeters}m.`);
   }

}

class Dog extends Animal {
bark() {
console.log(“Woof!”);
}
}

let dog = new Dog(“Buddy”);
dog.bark();
dog.move(10);
“`

  • 泛型 (Generics): 泛型允许你编写可以处理不同类型的代码，而无需为每种类型编写单独的函数或类。

“`typescript
function identity(arg: T): T {
return arg;
}

let myString: string = identity(“hello”);
let myNumber: number = identity(123);
“`

  • 模块 (Modules): TypeScript 支持模块化编程，允许你将代码分割成多个模块，并使用 import 和 export 关键字来导入和导出模块。

“`typescript
// math.ts
export function add(x: number, y: number): number {
return x + y;
}

// main.ts
import { add } from “./math”;

console.log(add(1, 2));
“`

五、tsconfig.json 配置文件

tsconfig.json 文件是 TypeScript 项目的配置文件，它指定了 TypeScript 编译器的配置选项。

  • 创建 tsconfig.json 文件: 在你的项目根目录下创建一个名为 tsconfig.json 的文件。

  • 配置选项: tsconfig.json 文件中包含各种配置选项，例如：

  • compilerOptions: 指定编译器的选项，例如：

    • target: 指定编译的目标 ECMAScript 版本 (例如: “es5”, “es6”, “esnext”).
    • module: 指定模块化系统 (例如: “commonjs”, “es6”, “umd”).
    • outDir: 指定输出目录。
    • rootDir: 指定源代码根目录。
    • sourceMap: 是否生成 source map 文件，方便调试。
    • strict: 是否启用严格模式，建议启用。 严格模式会启用一系列的类型检查，可以帮助你发现更多的错误。

  • 示例 tsconfig.json 文件:

json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"sourceMap": true,
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}

  • "include" 和 "exclude" 指定了需要编译和排除的文件或目录。

六、TypeScript 与 React/Vue/Angular

TypeScript 可以很好地与主流的 JavaScript 框架（如 React、Vue 和 Angular）集成，为它们提供更强大的类型检查和代码提示功能。

  • React: 使用 TypeScript 开发 React 应用可以更好地管理组件的状态和属性，并减少运行时错误。可以使用 create-react-app 命令创建一个带有 TypeScript 支持的 React 项目：

bash
npx create-react-app my-app --template typescript

  • Vue: Vue 3 已经完全采用 TypeScript 编写，因此使用 TypeScript 开发 Vue 应用可以更好地利用 Vue 的类型系统。可以使用 Vue CLI 创建一个带有 TypeScript 支持的 Vue 项目：

bash
vue create my-app
// 在选择 Features 时，选择 "TypeScript"

  • Angular: Angular 从一开始就设计为与 TypeScript 配合使用，因此使用 TypeScript 开发 Angular 应用可以更好地利用 Angular 的类型系统和依赖注入机制。 可以使用 Angular CLI 创建一个带有 TypeScript 支持的 Angular 项目：

bash
ng new my-app --style=scss --routing=true
// 在创建过程中，CLI 会提示你是否使用严格模式类型检查，建议选择 yes.

七、总结

通过本教程，你已经了解了 TypeScript 的基本概念、语法和用法，并学习了如何搭建 TypeScript 开发环境。 希望你能够继续深入学习 TypeScript，并将其应用到实际项目中，提升你的开发效率和代码质量。 记住，熟能生巧，多多练习才能真正掌握 TypeScript。 祝你学习愉快！

下一步学习方向：

  • 深入理解 TypeScript 的类型系统: 探索更高级的类型特性，如联合类型、交叉类型、条件类型、映射类型等。
  • 学习 TypeScript 的高级用法: 深入了解泛型、装饰器、命名空间等高级特性。
  • 阅读优秀的 TypeScript 项目源码: 学习优秀的 TypeScript 项目源码，可以帮助你更好地理解 TypeScript 的设计思想和最佳实践。
  • 参与 TypeScript 社区: 参与 TypeScript 社区，可以与其他开发者交流学习经验，共同进步。

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部