TypeScript（持续更新）

QH-Theory-Web

已于 2023-10-08 07:56:40 修改

阅读量145

点赞数

文章标签： typescript javascript 前端

于 2023-09-12 08:47:05 首次发布

本文链接：https://blog.csdn.net/weixin_72600599/article/details/132799224

版权

一、介绍

TypeScript 是JavaScript 的类型的超集，支持Es6语法支持面向对象的编程的概念，如类、接口、继承、泛型、接口等。

TypeScript是一种静态类型检查的语言，提供了类型注解，在代码编译阶段就可以检测出数据的类型是什么，可以帮助我们判断类型的错误，TypeScript也提供了JavaScript的语法，所以任何现有的JavaScript程序也可以在TypeScript环境下运行代码。

使用TypeScript 编译代码的时候，由编译器自动编译成JavaScript来运行，是为大型应用开发而设计的语言。

二、TypeScript 的特性

1. 类型批注和编译时的类型检查：在编译的时候，批注变量类型.

eg：

2. 类型推断：在ts 中，如果变量没有指定类型，ts会自动推断出类型。

eg：

3. 类型擦除：在编译代码的过程中，批注的内容和接口，会在运行时利用工具，将类型擦除。

4. 接口：在ts 中利用接口来定义对象的数据类型。interface

eg：

5. 枚举 enum：用于定义一组命名常量的数据类型。枚举可以帮助我们在代码中使用更具有可读性和易维护性的常量。

作用：

（1）提高代码可读性：通过给常量赋予具有意义的名称，我们可以更清晰地表达代码的含义。例如，使用枚举来表示颜色可以使用更直观的名称：“Red”、“Green”、“Blue”，而不是具体的数值。

（2）避免魔法数字：在代码中使用魔法数字（未经解释的硬编码数字）会导致代码难以理解和维护。枚举可以将这些数字命名化，使代码更易于理解和修改。

扩展：魔法数字（未经解释的硬编码数字）？

1）未经解释的硬编码数字是指在代码中直接使用的没有明确含义的具体数值。这种做法是容易出现问题的，因为它们缺乏可读性和可维护性.

2）可读性差：硬编码数字通常缺乏对应的含义描述，代码的读者可能无法理解其用途。这使得代码变得晦涩难懂，并增加了阅读和理解代码的困难。

3）易出错：由于硬编码数字没有类型检查和范围限制，所以在使用它们时很容易出现拼写错误或者使用了错误的数值。这些错误可能不会立即被发现，因为编译器不会提示这种潜在问题。

（3）类型安全：枚举类型提供了类型检查的好处。当使用枚举作为变量的类型时，只能为该变量赋予枚举中定义的值，这可以避免一些潜在的错误。

（4）增加可扩展性：枚举可以很容易地扩展。可以在现有的枚举上添加新的常量，而无需更改代码中的其他部分。

5. Mixin：用于在类之间共享和复用功能的技术。通过 Mixin，我们可以将一个或多个特定的功能集合（方法、属性等）注入到一个或多个类中，从而实现功能的复用，而不需要多重继承或复制粘贴代码。

代码如下：

// 定义 Mixin 接口
interface Loggable {
  log(message: string): void;
}

interface Timestamped {
  timestamp: number;
}

// 目标类
class MyClass implements Loggable, Timestamped {
  log(message: string) {
    console.log(message);
  }
  timestamp: number = Date.now();
}

// 使用类型融合实现 Mixin
function mixin<T extends object, U extends object>(base: T, mixins: U): T & U {
  return Object.assign({}, base, mixins);
}

// 创建 Mixin
const myMixin = mixin(new MyClass(), {
  log(message: string) {
    console.log("[Logged]:", message);
  },
  timestamp: Date.now(),
});

// 使用 Mixin
myMixin.log("Hello, Mixin!");
console.log("Timestamp:", myMixin.timestamp);

6. 泛型编译：泛型（Generics）是一种在定义函数、类、接口等可重用代码的时候，能够指定类型参数的机制。

使用泛型可以创建可以适用于不同类型的代码块，从而增强代码的灵活性和可重用性。通过在代码中使用类型参数，我们可以使用相同的代码逻辑来处理不同类型的数据，而不需要为每种类型编写重复的代码。

代码如下：

//定义函数泛型
function identity<T>(arg: T): T {
  return arg;
}

let result = identity<string>("Hello"); // 明确指定类型参数为 string
let result = identity("Hello"); // 使用类型推断，编译器自动推导出类型为 string


//定义类泛型
class Box<T> {
  private value: T;

  constructor(value: T) {
    this.value = value;
  }

  getValue(): T {
    return this.value;
  }
}

let box = new Box<number>(42); // 明确指定类型参数为 number
let box = new Box("Hello"); // 使用类型推断，编译器自动推导出类型为 string


//使用泛型约束
interface Lengthwise {
  length: number;
}

function logLength<T extends Lengthwise>(arg: T): void {
  console.log(arg.length);
}

logLength([1, 2, 3]); // 输出数组的长度 3
logLength("Hello"); // 输出字符串的长度 5
logLength(42); // 编译报错，因为数字类型没有 length 属性

三、TypeScript 与 JavaScript 的区别？

TypeScript 是 JavaScript 的一个超集，它扩展了 JavaScript 的功能并引入了静态类型检查。下面列出了 TypeScript 和 JavaScript 之间的几个主要区别：

1. 静态类型检查：TypeScript 具有静态类型检查的功能，可以在开发过程中捕捉类型错误和提供代码补全等强大的开发工具支持。JavaScript 是一种动态类型语言，不进行静态类型检查。

2. 类型注解和类型推断：TypeScript 允许为变量、函数参数、函数返回值等显式地添加类型注解，以指定变量的类型。同时，TypeScript 还可以根据上下文推断出某些变量的类型。相比之下，JavaScript 不需要显式注解变量的类型，变量的类型会随着赋值的内容而自动确定。

3. ES6+ 支持：TypeScript 对 ECMAScript 标准（即 JavaScript 标准）的最新版本提供了广泛的支持，包括 ES6、ES7、ES8 等，可以使用诸如模块、箭头函数、解构赋值等新特性。

4. 面向对象编程的增强：TypeScript 增强了 JavaScript 中的面向对象编程特性，引入了类、接口、泛型等概念，使得代码的组织和复用更加方便和可维护。

5. 编译环境：TypeScript 需要将代码编译成 JavaScript 才能在浏览器或 Node.js 环境中运行。它提供了一个编译器（`tsc`）将 TypeScript 代码转换为 JavaScript 代码。而 JavaScript 则可以直接在浏览器或 Node.js 环境中直接运行。

总之，TypeScript 是 JavaScript 的一个超集，旨在提供更强的类型检查和开发工具支持，以提升代码质量、可维护性和开发效率。TypeScript 代码可以编译成与 JavaScript 兼容的代码，并能够运行在任何支持 JavaScript 的环境中。

四、TypeScript的数据类型？

TypeScript 的数据类型与 JavaScript的数据类型几乎一样，但 TypeScript 在JavaScript 的基础上提供了更加实用的类型，供开发使用。

typescript 的数据类型如下:

1.说明对枚举类型的理解（从三方面入手，是什么、如何使用、使用场景）？

枚举被定义为整型常数的集合，用于声明一组命名的常数，当一个变量有几种可能的取值时，可以将他定义为枚举类型。枚举就是一个对象的所有的可能取值的集合。

枚举类型又可以分为：数字枚举、字符串枚举、异构枚举。

数字枚举：当我们声明一个枚举类型时，虽然没有给他们赋值，但是他们的取值其实是默认的数字类型，默认从0开始，依次累加。

//数字枚举
enum CountEnum {
    a,
    b,
    c,
    d
}
console.log(CountEnum.a===0);//true
console.log(CountEnum.b===1);//true
console.log(CountEnum.c===2);//true
console.log(CountEnum.d===3);//true

//如果将第一个值进行赋值后，后面的值也会依次+1
enum Direction{
    top=5,
    bottom,
    left,
    right
}
conosole.log(Direction.top,Direction.bottom,Direction.left,Direction.right)
//输出结果为5,6,7,8

字符串枚举：

//字符串枚举，枚举类型的值也可以是字符串类型
enum Direction{
    a="me",
    b="learn",
    c="know"
}
console.log(Direction["a"],Direction.b);//me learn
console.log(Direction)
//输出结果为
{
    a:"me",
    b:"learn",
    c:"know"
}
//此时，a,b,c 就成为了键
console.log(Direction["a"],Direction.b);
//枚举类型在javascript中有两种访问方式
   //一种是Direaction.a
   //一种是Direction["a"]



//如果是字符串枚举，注意，如果第一个值被赋值，后面的值不进行赋值，会报错
enum Direction{
    top="top",
    left,// error TS1061: Enum member must have initializer
    //枚举成员必须有初始化式
    bottom // error TS1061: Enum member must have initializer
    //枚举成员必须有初始化式
}

枚举类型经过javascript编译后的代码如下：

//异构枚举
enum Direction{
    a="me",
    b="learn",
    c=123
}

//转换后的代码成一个立即执行函数（IFEE）
var Direction;
(function (Direction){
   Direction[Direction["a"]==0]="me",
   Direction[Direction["b"]==1]="learn",
   Direction[Direction["c"]==2]=123,
})(Direction || (Direction={}))

应用场景：