【前端】Typescript利用教程

目次
一、概述
二、 TypeScript开发环境
2.1 安装和设置
2.2 编译和运行
2.3 工具和编辑器支持
三、 TypeScript基本语法
3.1 基本类型
3.2 接口
3.3 类
3.4 函数
3.5 泛型
3.6 模块
3.7 高级类型
四、TypeScript示例
4.1 枚举（Enumerations） 
4.2 类型别名（Type Aliases）
4.3 模块解析（Module Resolution）
4.4 高级类型（Advanced Types）
4.5 TypeScript 与 React
4.6 TypeScript 与 Node.js
4.7 TypeScript 设置（tsconfig.json）
五、TypeScript应用场景
5.1 装饰器（Decorators）
5.2 定名空间（Namespaces）
5.3 泛型束缚
5.4 泛型接口
5.5 异步编程

---

一、概述

        TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的底子上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。
        TypeScript添加了很多尚未正式发布的ECMAScript新特性（如装饰器 ）。2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在履历了一个预览版之后微软正式发布了正式版TypeScript。当前最新正式版本为TypeScript 5.2, 2023年8月发布。
二、 TypeScript开发环境

2.1 安装和设置

        安装Node.js和npm。
        利用npm安装Typescript：`npm install -g typescript`。
        创建一个`tsconfig.json`文件来设置编译选项。
2.2 编译和运行

        编译Typescript文件：`tsc 文件名.ts`。
        运行编译后的JavaScript文件：`node 文件名.js`。
2.3 工具和编辑器支持

        利用Visual Studio Code等编辑器，安装Typescript插件。
        利用编辑器的智能感知和类型检查功能。
三、 TypeScript基本语法

3.1 基本类型

        定义变量时指定类型：`let isDone: boolean = false;`。
        数组类型：`let list: number[] = [1, 2, 3];` 或利用泛型数组类型：`let list: Array<number> = [1, 2, 3];`。
        元组类型：`let x: [string, number]; x = ["hello", 10];`。
        枚举类型：`enum Color {Red, Green, Blue}; let c: Color = Color.Green;`。
        任意类型：`let notSure: any = 4;`。
        void类型：`function warnUser(): void { alert("This is my warning message"); }`。
        never类型：`function error(message: string): never { throw new Error(message); }`。
3.2 接口

   - 定义接口：`interface LabelledValue { label: string; }`。
   - 利用接口：`function printLabel(labelledObj: LabelledValue) { console.log(labelledObj.label); }`。
3.3 类

        定义类：`class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } }`。
        继承：`class Animal { move() { } } class Dog extends Animal { woof() { } }`。
        访问修饰符：`public`、`private`、`protected`。
        静态属性和方法：`static`关键字。
3.4 函数

        定义函数类型：`function add(x: number, y: number): number { return x + y; }`。
        可选参数和默认参数：`function buildName(firstName: string, lastName?: string) { }` 和 `function buildName(firstName: string, lastName = "Smith") { }`。
        剩余参数：`function buildName(firstName: string, ...restOfName: string[]) { }`。
3.5 泛型

        定义泛型函数：`function identity<T>(arg: T): T { return arg; }`。
        泛型类：`class GenericNumber<T> { zeroValue: T; add: (x: T, y: T) => T; }`。
3.6 模块

        导入模块：`import { sum } from "./module";`。
        导出模块：`export function sum(x: number, y: number) { return x + y; }`。
3.7 高级类型

        联合类型：`let myFavoriteNumber: string | number; myFavoriteNumber = "seven";`。
        交织类型：`interface ErrorHandling { error: string; } interface Artworks {艺术作品: string[]; } interface Artists {艺术家: string[]; } type ArtworksAndErrorHandling = Artworks & ErrorHandling;`。
        类型保护和区分类型：`if ("string" === typeof value) { /* value 是字符串 */ }`。
        以上是Typescript的基本利用教程，涵盖了安装、基本语法、高级特性以及如何编译和运行Typescript代码。随着学习的深入，可以进一步探索Typescript的更多高级功能和最佳实践。固然，我可以继续扩展Typescript的利用教程，涵盖一些更进阶的主题和实际应用场景。
四、TypeScript示例

4.1 枚举（Enumerations） 

        TypeScript 提供了枚举类型，它是对JavaScript尺度数据类型的一个增补。枚举是一种特殊的类，它包罗了一组定名的常量值。

1.      enum Color {Red, Green, Blue}
3.      let c: Color = Color.Green;
5.      // 或者，你也可以显式地指定成员的数值
7.      enum ColorWithNumbers {
9.          Red = 1,
11.          Green,
13.          Blue
15.      }
17.      console.log(ColorWithNumbers.Green); // 输出 2

复制代码

4.2 类型别名（Type Aliases）

        类型别名用来给一个类型起一个新名字。类型别名常用于联合类型、元组等复杂类型，以进步代码的可读性。

1.      type Name = string;
3.      type NameResolver = () => string;
5.      type NameOrResolver = Name | NameResolver;
7.      function getName(n: NameOrResolver): string {
9.          if (typeof n === "string") {
11.              return n;
13.          } else {
15.              return n();
17.          }
19.      }

复制代码

4.3 模块解析（Module Resolution）

        TypeScript 编译器在编译时如何找到模块文件的过程称为模块解析。了解这一点对于设置大型项目中的模块导入非常紧张。
        TypeScript 支持两种模块解析策略：Node.js 风格的解析和 Classic 风格的解析。
4.4 高级类型（Advanced Types）

        TypeScript 提供了许多高级类型特性，如交织类型（Intersection Types）、联合类型（Union Types）、条件类型（Conditional Types）、映射类型（Mapped Types）等。
        示例：交织类型：

1.      interface Alarm {
3.          alert(): void;
5.      }
7.      interface Light {
9.          lightOn(): void;
11.          lightOff(): void;
13.      }
15.      type AlarmLight = Alarm & Light;
17.      const alarmLight: AlarmLight = {
19.          alert() {
21.              console.log('Alert!');
23.          },
25.          lightOn() {
27.              console.log('Light is on');
29.          },
31.          lightOff() {
33.              console.log('Light is off');
35.          }
37.      };

复制代码

4.5 TypeScript 与 React

        TypeScript 与 React 的联合可以极大地进步大型前端项目的可维护性和可扩展性。
        示例：React 组件的 TypeScript 声明：

1.      import React from 'react';
3.      interface GreetingProps {
5.          name: string;
7.      }
9.      const Greeting: React.FC<GreetingProps> = ({ name }) => {
11.          return <h1>Hello, {name}!</h1>;
13.      };
15.      export default Greeting;

复制代码

4.6 TypeScript 与 Node.js

        TypeScript 同样实用于 Node.js 后端开发，可以提供类型检查和更好的代码提示。
        示例：一个简单的 Node.js HTTP 服务器：

1.      import http from 'http';
3.      const server = http.createServer((req, res) => {
5.          res.writeHead(200, {'Content-Type': 'text/plain'});
7.          res.end('Hello World\n');
9.      });
11.      server.listen(3000, () => {
13.          console.log('Server running at http://localhost:3000/');
15.      });

复制代码

4.7 TypeScript 设置（tsconfig.json）

        `tsconfig.json` 文件是 TypeScript 项目的设置文件，它包罗了编译选项和其他设置。
        示例：一个基本的 `tsconfig.json` 文件：

1.      {
3.          "compilerOptions": {
5.              "target": "es5",
7.              "module": "commonjs",
9.              "strict": true,
11.              "esModuleInterop": true,
13.              "skipLibCheck": true,
15.              "forceConsistentCasingInFileNames": true
17.          }
19.      }

复制代码

        这些主题涵盖了 TypeScript 的许多高级特性和应用场景，从枚举和类型别名到与 React 和 Node.js 的集成，再到 TypeScript 设置文件的设置。掌握这些内容将帮助你更深入地明确和利用 TypeScript。
五、TypeScript应用场景

5.1 装饰器（Decorators）

        装饰器是一种特殊类型的声明，它能够被附加到类声明、方法、访问器、属性或参数上。装饰器利用`@expression`这种形式，`expression`必须求值为一个函数，它会在运行时被调用，被装饰的声明信息作为参数传入。
        例如，利用装饰器来记录函数调用的日志：

1.      function log(target: any, propertyName: string, descriptor: TypedPropertyDescriptor<any>) {
3.          let originalMethod = descriptor.value;
5.          descriptor.value = function (...args: any[]) {
7.              console.log(`Method ${propertyName} has been called with ${args}`);
9.              return originalMethod.apply(this, args);
11.          };
13.          return descriptor;
15.      }
17.      class Greeter {
19.          @log
21.          greet(name: string) {
23.              return `Hello, ${name}!`;
25.          }
27.      }
29.      const g = new Greeter();
31.      g.greet('world'); // 控制台输出：Method greet has been called with ["world"]

复制代码

5.2 定名空间（Namespaces）

        定名空间用于构造代码，以便更好地举行模块化。它可以帮助制止全局定名辩论。
        示例：

1.      namespace Validation {
3.          export interface StringValidation {
5.              isRequired: boolean;
7.              maxLength?: number;
9.          }
11.          export function validateInput(input: string, validations: StringValidation) {
13.              // 实现验证逻辑
15.          }
17.      }
19.      // 使用命名空间
21.      Validation.validateInput('hello', { isRequired: true, maxLength: 10 });

复制代码

5.3 泛型束缚

        偶然你想对泛型举行束缚，比如你想限制泛型参数只能是某种类型。这可以通过`extends`关键字来实现。

1.      interface Lengthwise {
3.          length: number;
5.      }
7.      function loggingIdentity<T extends Lengthwise>(arg: T): T {
9.          console.log(arg.length);
11.          return arg;
13.      }
15.      loggingIdentity({length: 10, value: 3}); // 正确
17.      loggingIdentity({value: 3}); // 错误，因为没有length属性

复制代码

5.4 泛型接口

        你可以创建泛型接口，来定义一系列方法，这些方法可以操作差别的类型。

1.      interface GenericIdentityFn<T> {
3.          (arg: T): T;
5.      }
7.      function identity<T>(arg: T): T {
9.          return arg;
11.      }
13.      let myIdentity: GenericIdentityFn<number> = identity;

复制代码

5.5 异步编程

        Typescript 支持异步编程模式，包罗`Promise`、`async/await`等。

2.      async function fetchData(): Promise<string> {
4.          return new Promise<string>((resolve, reject) => {
6.              setTimeout(() => resolve('Data fetched'), 1000);
8.          });
10.      }
12.      async function processData() {
14.          try {
16.              const data = await fetchData();
18.              console.log(data);
20.          } catch (error) {
22.              console.error('Error fetching data:', error);
24.          }
26.      }
28.      processData();

复制代码

        这些扩展内容涵盖了Typescript中更高级和实用的特性，包罗装饰器、定名空间、泛型束缚、泛型接口以及异步编程。掌握这些内容将帮助你更有效地利用Typescript来构建大型、复杂的应用步伐。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。