鸿蒙开发实战二 TypeScript和JavaScript的区别

简介

基于第一篇文章中提到的：https://mp.csdn.net/mp_blog/creation/editor/143515906

声明式开发范式：采用基于TypeScript声明式UI语法扩展而来的ArkTS语言，从组件、动画和状态管理三个维度提供UI绘制能力。
类Web开发范式：采用经典的HML、CSS、JavaScript三段式开发方式，即使用HML标签文件搭建布局、使用CSS文件描述样式、使用JavaScript文件处理逻辑。该范式更符合于Web前端开发者的使用习惯，便于快速将已有的Web应用改造成方舟UI框架应用。

那么下面介绍TypeScript和JavaScript之间到底有哈区别

一、表格对比列表

二、语法

2.1 类型注解

JavaScript: 不支持类型注解，变量的类型由值来推断。
TypeScript: 支持静态类型注解，可以在变量、函数参数、函数返回值等地方显式指定类型。

// TypeScript
function add(a: number, b: number): number {
  return a + b;
}

2.2 类和接口

JavaScript: 使用原型链来实现对象的继承，没有类和接口的概念。
TypeScript: 引入了类和接口，支持面向对象的编程风格。

// TypeScript
interface Shape {
  calculateArea(): number;
}

class Circle implements Shape {
  constructor(private radius: number) {}

  calculateArea() {
    return Math.PI * this.radius ** 2;
  }
}

2.3 枚举

JavaScript: 不支持枚举类型。
TypeScript: 支持枚举类型，可以定义一组命名的常量值。

// TypeScript
enum Direction {
  Up,
  Down,
  Left,
  Right,
}

二、类型系统

2.1 静态类型检查

JavaScript: 在运行时进行类型检查，类型错误只会在执行阶段被发现。
TypeScript: 使用静态类型检查，在编译时进行类型检查，能够提前发现并避免一些潜在的错误。

// TypeScript
let name: string = "Alice";
name = 123; // 编译时错误

2.2 类型推断

JavaScript: 变量的类型由值来推断。
TypeScript: 支持类型推断，当类型没有显式指定时，会根据上下文自动推断出变量的类型。

// TypeScript
let age = 25; // 推断为 number 类型

提供更丰富的类型

JavaScript: 基本数据类型和对象类型。
TypeScript: 支持基本数据类型、对象类型、元组、联合类型、交叉类型、字面量类型等更丰富的类型。

// TypeScript
type Status = "pending" | "in_progress" | "completed";

interface Fruit {
  name: string;
  color: string;
}

type Apple = Fruit & { type: "apple" };
type Banana = Fruit & { type: "banana" };

function getFruitColor(fruit: Apple | Banana): string {
  return fruit.color;
}

三、工具支持

3.1 编辑器支持

JavaScript: 可以在大多数代码编辑器中编辑 JavaScript 代码，但没有针对 JavaScript 的专用编辑器。
TypeScript: 得益于类型系统，TypeScript 在编辑器中提供了更强大的代码补全、类型检查和重构功能。同时，一些编辑器如 Visual Studio Code 提供了针对 TypeScript 的更完善支持。

3.2 调试支持

JavaScript: 可以通过浏览器的开发者工具进行调试。
TypeScript: 能够生成可调试的 JavaScript 代码，支持在编辑器或浏览器中进行调试。

3.3 文档和社区

JavaScript: 具有成熟的文档和庞大的社区资源，容易找到相关的教程、博客文章和解决方案。
TypeScript: TypeScript 基于 JavaScript，因此可以享受到 JavaScript 社区的一部分资源，此外还有针对 TypeScript 的官方文档、社区论坛和第三方库的支持。

四、生态系统

4.1 第三方库

JavaScript: 拥有世界上最大的开源生态系统，有众多的第三方库和框架可供选择。
TypeScript: TypeScript 与 JavaScript 兼容，可以直接使用 JavaScript 的第三方库。此外，TypeScript 还有自己的类型声明文件（.d.ts）生态系统，提供了大量的类型定义供开发者使用。

TypeScript编写一个API的案例

下面演示用TypeScript 开发一个简单的 Express.js 后端 API：

import express, { Request, Response } from "express";

interface User {
  name: string;
  age: number;
}

const app = express();

app.use(express.json());

app.post("/users", (req: Request, res: Response) => {
  const user: User = req.body;
  // 处理用户数据
  res.json(user);
});

app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

在该案例中，使用 TypeScript 提供的静态类型检查，使你能够更早地发现和解决潜在的错误。此外 TypeScript 还提供了代码补全和类型推断，大大提高开发效率。

五、性能对比

5.1 js

// JavaScript 性能测试1 - 计算两点之间的距离
function calculateDistance(point1, point2) {
   const dx = point2.x - point1.x;
   const dy = point2.y - point1.y;
   return Math.sqrt(dx * dx + dy * dy);
 }
 
 const p1 = { x: 0, y: 0 };
 const p2 = { x: 3, y: 4 };
 console.log('Distance:', calculateDistance(p1, p2));


 // JavaScript 性能测试2 - 冒泡排序
function bubbleSort(arr) {
   const length = arr.length;
   for (let i = 0; i < length - 1; i++) {
     for (let j = 0; j < length - i - 1; j++) {
       if (arr[j] > arr[j + 1]) {
         const temp = arr[j];
         arr[j] = arr[j + 1];
         arr[j + 1] = temp;
       }
     }
   }
   return arr;
 }
 
 const array = [64, 34, 25, 12, 22, 11, 90];
 console.log('Sorted Array:', bubbleSort(array));

使用node直接执行

成绩(测5次)：
[Done] exited with code=0 in 0.038 seconds
[Done] exited with code=0 in 0.036 seconds
[Done] exited with code=0 in 0.035 seconds
[Done] exited with code=0 in 0.036 seconds
[Done] exited with code=0 in 0.035 seconds

5.2 TS

// TypeScript 性能测试1 - 计算两点之间的距离
interface Point {
  x: number;
  y: number;
}

function calculateDistance(point1: Point, point2: Point): number {
  const dx = point2.x - point1.x;
  const dy = point2.y - point1.y;
  return Math.sqrt(dx * dx + dy * dy);
}

const p1: Point = { x: 0, y: 0 };
const p2: Point = { x: 3, y: 4 };
console.log('Distance:', calculateDistance(p1, p2));

// TypeScript 性能测试2 - 冒泡排序
function bubbleSort(arr: number[]): number[] {
  const length = arr.length;
  for (let i = 0; i < length - 1; i++) {
    for (let j = 0; j < length - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        const temp = arr[j];
        arr[j] = arr[j + 1];
        arr[j + 1] = temp;
      }
    }
  }
  return arr;
}

const array: number[] = [64, 34, 25, 12, 22, 11, 90];
console.log('Sorted Array:', bubbleSort(array));

使用ts-node直接执行（不编译）

成绩(测5次)：
[Done] exited with code=0 in 0.691 seconds
[Done] exited with code=0 in 0.686 seconds
[Done] exited with code=0 in 0.686 seconds
[Done] exited with code=0 in 0.702 seconds
[Done] exited with code=0 in 0.684 seconds

使用tsc 编译后执行

成绩(测5次)：
[Done] exited with code=0 in 0.035 seconds
[Done] exited with code=0 in 0.037 seconds
[Done] exited with code=0 in 0.034 seconds
[Done] exited with code=0 in 0.035 seconds
[Done] exited with code=0 in 0.035 seconds

通过以上2个案例可以看出，将ts编译为js之后，和原生js的性能表现几乎是一致的

六、总结
TypeScript 是 JavaScript 的超集，通过引入静态类型检查和其他新功能，使开发更加稳定、可维护和高效。虽然 TypeScript 增加了一些复杂性，并需要进行额外编译，但它为大型项目和团队合作提供了巨大的好处。

JavaScript 仍然是 Web 开发中最重要的语言之一，特别适用于小型项目或需要快速原型开发的场景。

七、JavaScript 中let和var之间的区别

7.1 作用域

var

具有函数级作用域。这意味着使用var声明的变量在整个函数内部都是可见的，无论它是在函数的开头、中间还是结尾声明。例如：

function varScopeExample() {
    if (true) {
        var varVariable = 10;
    }
    console.log(varVariable); // 10，在if语句块外也可以访问varVariable
}
varScopeExample();

let

具有块级作用域。块是指由花括号{}包围的区域，例如if语句、for循环、while循环等。使用let声明的变量只能在声明它的块及其子块中访问。例如：

function letScopeExample() {
    if (true) {
        let letVariable = 20;
    }
    console.log(letVariable); // 报错，letVariable在if语句块外不可访问
}
letScopeExample();

7.2 变量提升 (Hoisting)

var: 当你声明一个变量时，JavaScript 会将 var声明提升到当前作用域的顶部，但不会提升变量的赋值（即使是类似于var a=10，也是会先进行声明再进行赋值）。这意味着你可以先使用变量再声明它，但这可能导致一些意外的行为。

console.log(x); // 输出 undefined，这里并不会报错，说明x声明的语句已经提升到当前作用域的最顶部
var x = 5;

let: 虽然 let 也存在提升现象，但是变量会被绑定到其声明的块级作用域，而且在声明之前访问这些变量会导致一个 ReferenceError。

console.log(y); // 抛出 ReferenceError
let y = 10;

7.3 重复声明

var 允许在同一个作用域内重复声明同一个变量。后面的声明会覆盖前面的声明。例如：

function varReDeclarationExample() {
    var repeatedVar = 50;
    var repeatedVar = 60;
    console.log(repeatedVar); // 60
}
varReDeclarationExample();

let 不允许在同一个作用域内重复声明同一个变量。这样做会导致SyntaxError。例如：

function letReDeclarationExample() {
    let nonRepeatedLet = 70;
    let nonRepeatedLet = 80;// 会抛出 SyntaxError: Identifier 'b' has already been declared
}
letReDeclarationExample();

7.4 暂存死区（TDZ - Temporal Dead Zone）

let 存在暂存死区。从块作用域开始到let变量声明语句之间的区域是暂存死区。在这个区域内，不能访问该变量，否则会报错。例如

{
    console.log(temporalDeadZoneVariable); // 报错，处于暂存死区
    let temporalDeadZoneVariable = 90;
}

var 不存在暂存死区的概念，因为变量提升使得变量在整个函数作用域内都可以在某种程度上被提前访问（虽然未初始化时是undefined）

7.5 总结

使用 let 可以避免一些常见的编程陷阱，并且提供了更清晰的作用域规则。
var 是 JavaScript 最初版本的一部分，而 let 则是在 ES6 中引入的新特性