js文件和ts文件的最大区别举例详解

JavaScript（JS）和 TypeScript（TS）有一些核心的区别。主要体现在 类型系统、编译过程、语言特性 和 开发体验 等方面。

1.类型系统

JavaScript (JS)：

• 动态类型语言：JavaScript 是动态类型语言，变量的类型在运行时决定。例如，你可以将不同类型的数据赋值给同一个变量，且没有类型检查。

  let x = 5;        // x 是一个数字
  x = "hello";      // x 现在是一个字符串
  

TypeScript (TS)：

• 静态类型语言：TypeScript 是 JavaScript 的超集，支持静态类型检查。你可以在编写代码时指定变量、函数等的类型，TypeScript 会在编译时检查类型错误。

超集（Superset）是一个术语，通常用于描述一种语言或概念，它包含了另一个语言或概念的所有功能和结构，并且在其基础上进行了扩展或添加了新的特性。

let x: number = 5;  // x 被定义为数字类型
x = "hello";         // 错误：不能将字符串赋值给数字类型的变量

通过静态类型，TS 提供了 类型推断（Type Inference）和 类型注解（Type Annotation），帮助在开发过程中捕捉类型错误。

2.编译过程

JavaScript (JS)：

• JavaScript 是一种解释型语言，在浏览器或 Node.js 环境中运行时直接解释执行。没有编译过程，代码可以直接运行。

TypeScript (TS)：

• TypeScript 需要先 编译 成 JavaScript 才能执行。TypeScript 的源代码（.ts 文件）会被转换为标准的 JavaScript（.js 文件）。因此，开发者需要使用 TypeScript 编译器（tsc）来将 TS 文件转换为 JS 文件。

  tsc yourfile.ts
  

  编译后的 JavaScript 代码可以在任何支持 JavaScript 的环境中执行。

3.类型推断和类型注解

JavaScript (JS)：

• JavaScript 没有内建的类型系统，也就没有 类型推断 或 类型注解 的概念。所有类型都由开发者手动控制，且没有编译时类型检查。

TypeScript (TS)：

• TypeScript 支持类型推断和类型注解，这意味着你可以指定变量、函数参数、返回值等的类型，并在编译时进行类型检查。

  类型推断：如果没有明确声明类型，TypeScript 会自动推断变量的类型。

  let x = 5;   // 类型推断为 number
  let y = "hello"; // 类型推断为 string
  

  类型注解：开发者可以明确指定变量的类型。

  let name: string = "John"; // 变量 name 被注解为 string 类型
  

4.面向对象支持

JavaScript (JS)：

• JavaScript 是基于原型（prototype-based）的语言，类和对象是通过原型链来实现的，直到 ES6（ES2015）才正式引入了 class 语法。即使有 class 语法，它也仅仅是语法糖，底层依然是基于原型链。

TypeScript (TS)：

• TypeScript 提供了对 ES6+ 类（class）的全面支持，同时还扩展了更强大的 面向对象 支持，例如接口（interface）、抽象类（abstract class）、公共和私有成员（public, private），以及访问控制等。

  class Person {
    private name: string;
  
    constructor(name: string) {
      this.name = name;
    }
  
    greet() {
      console.log(`Hello, ${this.name}`);
    }
  }
  

  接口和类型别名是 TypeScript 提供的额外功能，允许开发者定义更加严谨的对象形态。

  interface Person {
    name: string;
    age: number;
  }
  
  const person: Person = { name: "John", age: 30 };  // 强类型检查
  

抽象类：不能实例化的类，提供了一种模板，供子类继承并实现抽象方法。

5.类型安全和类型检查

JavaScript (JS)：

• JavaScript 没有内置的类型检查。开发者必须自己管理变量的类型，并通过调试或测试来确保类型的正确性。运行时错误（如类型错误）通常是 JavaScript 程序中的一大问题。

TypeScript (TS)：

• TypeScript 提供了静态类型检查，在编译时会检查类型错误，这意味着你可以在开发阶段就发现并修复潜在的错误。TypeScript 提供了类型安全，确保类型之间的兼容性，减少了运行时错误。

  function add(a: number, b: number): number {
    return a + b;
  }
  
  add(1, "2"); // 错误：第二个参数必须是数字
  

: number（返回类型）：
这个 : number 放在函数签名的结尾，表示 add 函数的 返回值 的类型是 number。
在这个函数中，a + b 会返回一个数字，因此返回值的类型是 number。
如果你尝试返回一个非数字类型的值，TypeScript 会报错

6.兼容性

JavaScript (JS)：

• JavaScript 是浏览器和 Node.js 环境的标准语言，几乎所有的 Web 环境都支持直接执行 JS 代码。

TypeScript (TS)：

• TypeScript 是 JavaScript 的超集，所有有效的 JavaScript 代码在 TypeScript 中都是有效的。这意味着你可以逐步将现有的 JavaScript 项目迁移到 TypeScript。
• TypeScript 代码必须编译为 JavaScript，在浏览器或 Node.js 中执行时，最终还是运行 JavaScript。

超集（Superset）描述一种语言或概念，它包含了另一个语言或概念的所有功能和结构，并在其基础上进行了扩展或添加了新的特性。

7.开发体验

JavaScript (JS)：

• JavaScript 是灵活且宽容的，没有强制要求类型或结构，适合快速开发。虽然这带来了便利，但也可能导致不易察觉的错误，增加调试和维护的难度。

TypeScript (TS)：

• TypeScript 提供了更强的开发体验，尤其是在大型项目中。通过类型检查、自动完成功能和编辑器集成，开发者能够更快发现错误，并获得更好的代码自动补全、重构和导航支持。IDE（如 VSCode）对 TypeScript 提供了更强的支持，能极大提高开发效率。

导航支持（Navigation Support）通常是指在开发过程中，尤其是在 集成开发环境（IDE） 或 代码编辑器 中，提供帮助开发者1.快速定位、2.浏览、3.跳转到代码的不同部分。

8.社区支持和流行程度

JavaScript (JS)：

• JavaScript 是 Web 开发的标准语言，具有庞大的社区支持和丰富的库、框架（如 React、Vue、Node.js 等）。

TypeScript (TS)：

• TypeScript 在近年来越来越流行，许多大公司（如 Microsoft、Google、Airbnb）和开源项目（如 Angular、React 等）都选择了 TypeScript。TypeScript 的学习曲线相对于纯 JavaScript 会稍微陡峭一些，但它带来的好处（尤其是在大型项目中的可维护性和可靠性）是显而易见的。

比较对比

TS中访问控制主要通过：

1.访问修饰符（Access Modifiers）控制
例如：TypeScript 支持三种主要的访问修饰符：
public：默认修饰符，表示属性或方法可以被类的任何地方访问，包括类外部。
private：表示属性或方法只能在类的内部访问，外部无法访问。
protected：表示属性或方法可以在类内部访问，同时也可以在继承该类的子类中访问，但不能在类外部访问。

2.接口（Interface）
TypeScript 的 接口（Interface） 允许你定义类的结构和成员类型，但它本身并没有提供直接的访问控制功能。你可以通过接口来定义对象的结构，并结合访问修饰符来实现控制。

3.枚举（Enum）
TypeScript 中的 枚举（Enum） 可以用来定义一些固定的常量值，例如角色类型、用户权限等。在访问控制的实现中，枚举类型通常用于限定角色或权限的范围。

4.类型保护和条件访问控制
TypeScript 提供了 类型保护（Type Guards） 的功能，通过类型检查来执行条件访问控制。

总结

TypeScript 提供了更强的类型安全、工具支持和更好的开发体验，尤其适用于大型项目。

而 JavaScript 则更轻量、灵活，适合快速开发和小型项目。

到此这篇关于js文件和ts文件的最大区别的文章就介绍到这了,更多相关js文件和ts文件最大区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论