TypeScript 菜鸟教程

发布时间：2023-05-23

TypeScript 是 JavaScript 的超集，为 JavaScript 添加了类型注解和其他高级特性，使得编码更加可靠、易于维护和高效。TypeScript 可以编译成纯 JavaScript，被广泛应用于开发大型的 Web 应用程序和框架。本教程将从入门基础到高级特性，逐步展示 TypeScript 的强大。

一、TypeScript 入门

1、安装 TypeScript

对于新手，建议使用 npm（Node.js 自带的包管理器）进行安装。打开终端，输入以下命令即可安装 TypeScript。

npm install -g typescript

2、第一个 TypeScript 程序

首先，我们需要创建一个 TypeScript 文件，即以 .ts 后缀结尾的文本文件。在我们的编辑器中，创建一个 main.ts 文件，写入以下代码：

function greeter(person: string) {
   return "Hello, " + person;
}
let user = "TypeScript";
document.body.innerHTML = greeter(user);

3、编译 TypeScript

通过以下命令编译 TypeScript 文件：

tsc main.ts

该命令将 main.ts 编译为 main.js 文件，我们可以在浏览器中打开该文件来运行我们的程序。

二、TypeScript 基础

1、类型注解

TypeScript 的一个关键特性是类型注解，在变量声明或函数参数前面加上类型注解，可以指定变量或参数的类型。例如：

let num: number = 42;
function add(a: number, b: number): number {
   return a + b;
}

2、接口

TypeScript 中的接口用来描述对象的形状，即对象具有哪些属性和方法。例如：

interface Person {
   firstName: string;
   lastName: string;
   age?: number;
}
function greeter(person: Person) {
   return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "TypeScript", lastName: "Learner", age: 25 };
document.body.innerHTML = greeter(user);

注意，age 属性是可选的，即可以有也可以没有。

三、TypeScript 进阶

1、类和继承

TypeScript 支持面向对象编程，可以通过 class 关键字定义类和继承关系。例如：

class Animal {
   name: string;
   constructor(name: string) {
      this.name = name;
   }
   move(distanceInMeters: number = 0) {
      console.log(`${this.name} moved ${distanceInMeters}m.`);
   }
}
class Snake extends Animal {
   constructor(name: string) {
      super(name);
   }
   move(distanceInMeters = 5) {
      console.log("Slithering...");
      super.move(distanceInMeters);
   }
}
let sam = new Snake("Sammy");
sam.move();

2、泛型

TypeScript 支持泛型，即可以在定义函数、类、接口时使用未知类型。例如：

function identity<T>(arg: T): T {
   return arg;
}
let output = identity<string>("TypeScript");
console.log(output);

3、枚举

TypeScript 中的枚举用于定义命名常量，可以方便地表示一组关联的值。例如：

enum Color {
   Red,
   Green,
   Blue,
}
let c: Color = Color.Green;
console.log(c);

四、TypeScript 实战

1、React with TypeScript

TypeScript 可以为 React 提供类型检查，使得 React 开发更加稳定可靠。以下是一个简单的 TypeScript React 组件的示例：

interface Props {
   name: string;
}
const Hello: React.FC<Props> = ({ name }) => {
   return <h1>Hello, {name}!</h1>;
};
ReactDOM.render(<Hello name="TypeScript Learner" />, document.getElementById("root"));

2、Express with TypeScript

TypeScript 可以为 Express 提供类型检查和智能提示，使得 Node.js 后端开发更加高效。以下是一个简单的 TypeScript Express 应用程序的示例：

import express, { Request, Response } from "express";
const app = express();
app.get("/", (req: Request, res: Response) => {
   res.send("Hello, TypeScript!");
});
app.listen(3000, () => {
   console.log("Server started on port 3000");
});

3、TypeScript with Firebase Cloud Functions

Firebase Cloud Functions 可以使用 TypeScript 进行开发，通过 TypeScript 提供的类型安全和智能提示，可以更加轻松地构建出高效可靠的云函数。以下是一个简单的 TypeScript Firebase Cloud Function 的示例：

import * as functions from "firebase-functions";
export const helloWorld = functions.https.onRequest((request, response) => {
   response.send("Hello, TypeScript!");
});

总结

本教程只是介绍了 TypeScript 的入门、基础、进阶和实战等方面，实际上 TypeScript 还有很多其他强大的特性和用法。希望本教程能够帮助大家快速入门 TypeScript，从而提高开发效率和代码质量。

推荐文章