Разница между TypeScript и JavaScript, подробное сравнение и супердетализация.

Целью этой статьи является сравнительный анализ TypeScript и JavaScript с различных точек зрения и областей, включая синтаксис, систему типов, поддержку инструментов, экосистему и анализ кода.

Составьте более полную сравнительную таблицу функций:

характеристика	Машинопись	JavaScript
грамматика	Аннотации статических типов, определения классов и интерфейсов, типы перечислений, декораторы и т. д.	Базовый объектно-ориентированный синтаксис, наследование цепочки прототипов, анонимные функции и т. д.
система типов	Мощная система статических типов, вывод типов, аннотации типов, типы объединения, перекрестные типы, универсальная поддержка, строгая проверка типов.	Система динамических типов, вывод типов на основе значений, гибкая, но подверженная ошибкам
Поддержка инструментов	Мощная поддержка редакторов (например, Visual Studio Code), автодополнение кода, проверка типов, функции рефакторинга, подсказки об ошибках, интеллектуальное определение, автоматический импорт и т. д.	Базовая поддержка редакторов, некоторые редакторы предоставляют базовое завершение кода и подсказки об ошибках.
Поддержка файлов объявлений типов	Богатая экосистема файлов объявлений типов, используемых для описания типов библиотек JavaScript, обеспечивающих хорошие определения типов для сторонних библиотек и платформ.	Библиотеки JavaScript имеют относительно мало файлов объявлений типов, и их необходимо писать вручную или поддерживать через сообщество.
безопасность типа	Статическая проверка типов позволяет обнаруживать ошибки типов и потенциальные проблемы как можно раньше в процессе кодирования, улучшая качество кода и удобство сопровождения.	Система динамических типов приводит к ошибкам типов, которые можно обнаружить только во время выполнения. Вероятность ошибок можно уменьшить за счет тестового покрытия, инструментов качества кода и т. д.
производительность	Процесс компиляции требует дополнительных затрат, но производительность полученного кода JavaScript во время выполнения сравнима с написанным напрямую кодом JavaScript.	Более простая интерпретация и выполнение, отсутствие дополнительных затрат на компиляцию и относительно высокая эффективность работы.
Стоимость миграции	Внедрение TypeScript в существующий проект JavaScript требует определенной работы по миграции и аннотаций типов в коде. Однако процесс миграции можно завершать постепенно, чтобы избежать единовременного масштабного рефакторинга.	Никаких затрат на миграцию не требуется, существующий код JavaScript можно запускать напрямую.
Сообщества и экосистемы	Растущее сообщество, активное сообщество разработчиков, богатая поддержка сторонних библиотек и инструментов, официальная и поддерживаемая сообществом документация и учебные пособия.	Одна из крупнейших в мире экосистем с открытым исходным кодом, с огромным сообществом разработчиков и ресурсами.
Применимая сцена	Крупномасштабные проекты и командная работа, требующие более строгой типовой безопасности и поддержки инструментов; разработка интерфейсной среды и библиотек, требующая создания сложной логики приложения и повторно используемых компонентов; проекты, требующие длительного обслуживания; проекты, которые интегрируются с другими статически типизированными языками.	Быстрое прототипирование, небольшие проекты, написание скриптов, простые одноразовые скрипты во фронтенд-разработке и т.д.

Дополнительное содержание формы:

С точки зрения затрат на миграцию:

1.引入 TypeScript 到现有的 JavaScript 项目中可能需要一些迁移工作。这包括为现有代码添加类型注解，以及解决由于类型不匹配而引发的编译错误。迁移的程度取决于项目的规模和复杂性。
2.TypeScript 提供了一个逐步采用的策略，您可以从项目的某个部分开始，逐渐添加类型注解并逐步迁移到 TypeScript。这样可以减少整体的迁移成本，并使团队在适应 TypeScript 的过程中得到更好的支持。
3.迁移成本还取决于团队成员对 TypeScript 的熟悉程度。如果团队中已经有人熟悉 TypeScript，那么学习和适应的成本会有所降低。

С точки зрения сообщества и экосистемы:

1.TypeScript 社区在近年来得到了快速的增长和发展，拥有活跃的开发者社区和强大的生态系统。
2.官方和社区提供了丰富的文档、教程和示例，帮助开发者更好地理解和使用 TypeScript。
3.TypeScript 生态系统中有大量的第三方库和工具可用，可帮助开发者更高效地构建应用程序。这些库和工具涵盖了各种方面，如前端框架、后端开发、数据库访问、测试和部署等。

С точки зрения применимых сценариев:

1.TypeScript 更适合大型项目和团队合作。静态类型检查能够提供更好的代码健壮性和可维护性，减少潜在的类型错误，并提供更好的开发工具支持。
2.TypeScript 在前端框架和库的开发中表现出色。它允许开发人员定义和使用复杂的类型，以构建可重用的组件和应用逻辑。
3.对于需要长期维护的项目，TypeScript 通过类型检查和严格的编译过程可以帮助减少潜在的 bug，并提高代码质量。
4.如果你的项目需要与其他静态类型语言（如 Java、C#）进行集成，TypeScript 是一个理想的选择，因为它们都共享了相似的类型系统和语法特性。

Ниже приводится подробное сравнение js и ts.

1. Грамматика

тип аннотации

• JavaScript: аннотации типов не поддерживаются, тип переменной определяется по значению.
• TypeScript: поддерживает аннотации статических типов, которые могут явно указывать типы в переменных, параметрах функций, возвращаемых значениях функций и т. д.

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

Классы и интерфейсы

• JavaScript: используйте цепочку прототипов для реализации наследования объектов без концепций классов и интерфейсов.
• TypeScript: представляет классы и интерфейсы, поддерживающие объектно-ориентированный стиль программирования.

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

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

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

перечислять

• JavaScript: типы перечислений не поддерживаются.
• TypeScript: поддерживает типы перечисления, которые могут определять набор именованных константных значений.

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

2. Система типов

статическая проверка типов

• JavaScript: проверка типов выполняется во время выполнения, ошибки типов обнаруживаются только во время выполнения.
• TypeScript: используйте статическую проверку типов для проверки типов во время компиляции, что позволяет заранее обнаружить и избежать некоторых потенциальных ошибок.

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

вывод типа

• 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. Поддержка инструментов

Поддержка редактора

• JavaScript: код JavaScript можно редактировать в большинстве редакторов кода, но специального редактора для JavaScript не существует.
• TypeScript: благодаря системе типов TypeScript предоставляет более мощные возможности завершения кода, проверки типов и рефакторинга в редакторе. В то же время некоторые редакторы, такие как Visual Studio Code, обеспечивают более полную поддержку TypeScript.

Поддержка отладки

• JavaScript: можно отлаживать с помощью инструментов разработчика браузера.
• TypeScript: способен генерировать отлаживаемый код JavaScript, поддерживая отладку в редакторе или браузере.

Документация и сообщество

• JavaScript: Благодаря продуманной документации и огромным ресурсам сообщества легко найти соответствующие учебные пособия, публикации в блогах и решения.
• TypeScript: TypeScript основан на JavaScript, поэтому вы можете пользоваться частью ресурсов сообщества JavaScript, а также официальной документацией, форумами сообщества и поддержкой сторонних библиотек для TypeScript.

4. Экосистема

Сторонние библиотеки

• JavaScript: имеет крупнейшую в мире экосистему с открытым исходным кодом и множеством сторонних библиотек и фреймворков на выбор.
• TypeScript: TypeScript совместим с JavaScript и может напрямую использовать сторонние библиотеки JavaScript. Кроме того, TypeScript имеет собственную .d.tsэкосистему файлов объявлений типов ( ), которая предоставляет разработчикам большое количество определений типов.

Случай написания API на TypeScript

Ниже показано использование TypeScript для разработки простого внутреннего API Express.js:

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. Сравнение производительности

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次):
[Готово] выход с кодом=0 через 0,038 секунды
[Готово] выход с кодом=0 через 0,036 секунды
[Готово] выход с кодом=0 через 0,035 секунды
[Готово] выход с кодом=0 через 0,036 секунды секунд
[Готово] выход с кодом = 0 через 0,035 секунды

---

ТС

// 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次):
[Готово] выход с кодом=0 через 0,691 секунды
[Готово] выход с кодом=0 через 0,686 секунды
[Готово] выход с кодом=0 через 0,686 секунды
[Готово] выход с кодом=0 через 0,702 секунды
[Готово] завершился с кодом = 0 через 0,684 секунды.

使用tsc 编译后 执行

成绩(测5次):
[Готово] выход с кодом=0 через 0,035 секунды
[Готово] выход с кодом=0 через 0,037 секунды
[Готово] выход с кодом=0 через 0,034 секунды
[Готово] выход с кодом=0 через 0,035 секунды секунд
[Готово] выход с кодом = 0 через 0,035 секунды

Из двух приведенных выше случаев видно, что после компиляции ts в js производительность практически такая же, как и у нативного js.

---

Подведем итог

TypeScript — это расширенная версия JavaScript, которая делает разработку более стабильной, удобной и эффективной за счет введения статической проверки типов и других новых функций. Хотя TypeScript усложняет программу и требует дополнительной компиляции, он дает огромные преимущества для крупных проектов и командной работы.

JavaScript остается одним из важнейших языков веб-разработки, особенно для небольших проектов или сценариев, требующих быстрого прототипирования.

У разных проектов и команд разные потребности, и выбор между TypeScript или JavaScript зависит от того, насколько вы цените безопасность типов, поддержку инструментов и экосистему, а также от размера проекта, его сложности и технических возможностей членов вашей команды.