TypeScript 与 JavaScript 的区别

本文我们要聊一聊 TypeScript 和 JavaScript 之间的区别。可能我们已经注意到，TypeScript 是 JavaScript 的超集，那么它到底比 JavaScript 多了些什么？为什么我们要选择 TypeScript，而不仅仅是写普通的 JavaScript 呢？

本文我们就一起看看 TypeScript 和 JavaScript 的核心差异，让你对它们有个更加清晰的认识。

3.1 什么是 TypeScript 与 JavaScript？

JavaScript 是一种脚本语言，广泛应用于网页开发中。你几乎可以在所有现代浏览器中直接运行 JavaScript 代码，甚至 Node.js 也使用它来进行服务器端开发。JavaScript 的动态类型特性让它非常灵活，但也容易因为类型错误导致一些隐藏的问题。

TypeScript 则是 JavaScript 的“升级版”，它在 JavaScript 的基础上添加了静态类型检查，并且提供了更多现代化的功能，如接口、类、模块等。简单来说，TypeScript 就像是给 JavaScript 打了一剂“增强剂”，让它更加强大、灵活。

3.2 核心区别：类型系统

3.2.1 JavaScript 是动态类型，TypeScript 是静态类型

JavaScript 是动态类型的语言。这意味着你在运行时可以随意改变变量的类型。例如：

let message = "Hello, World!";message = 42;  // 这是允许的，因为JavaScript支持动态类型

在 JavaScript 中，message 最开始是字符串，但我们可以随时将它赋值为数字。这虽然灵活，但也容易出错，尤其是当代码变得越来越复杂时。

而在 TypeScript 中，变量的类型是在编译时确定的，我们需要显式地声明变量的类型，或者依靠 TypeScript 的类型推断来自动推导。例如：

let message: string = "Hello, World!";message = 42;  // 这里会报错，因为message被声明为string类型

如果你试图将一个字符串类型的变量赋值为数字，TypeScript 会在编译时提示你类型错误。这种静态类型检查能够帮助我们在编写代码时发现潜在的错误，从而减少了运行时出错的风险。

3.2.2 类型注解

TypeScript 提供了类型注解，让我们明确指定变量、函数的类型。这是 JavaScript 所没有的功能。你可以为变量、函数、参数等加上类型注解来让编译器知道它们应该是什么类型。

let count: number = 10;  // count被明确声明为number类型let name: string = "Alice";  // name被明确声明为string类型

这对于大型项目尤其重要，因为它可以提高代码的可维护性和可读性，尤其是在团队开发中，每个人都能清楚地知道变量应该是什么类型。

3.3 面向对象编程：类与接口

3.3.1 类与继承

在 JavaScript 中，类和继承在 ES6 之前并不原生支持，直到 ES6 才引入了类的概念。即使有了类的支持，JavaScript 的类并不具备完整的面向对象编程特性，特别是在类型安全方面。

class Person {  constructor(name, age) {    this.name = name;    this.age = age;  }
  greet() {    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);  }}
let person = new Person("Alice", 30);person.greet();

TypeScript 则在 JavaScript 的类的基础上进行了扩展，支持更多的面向对象编程特性，如访问控制符（public、private、protected），以及接口（Interfaces）。比如，在 TypeScript 中，我们可以为类成员指定可见性，并且可以创建接口来描述对象的结构。

class Person {  public name: string;  private age: number;
  constructor(name: string, age: number) {    this.name = name;    this.age = age;  }
  greet() {    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);  }
  getAge(): number {    return this.age;  }}
let person = new Person("Alice", 30);person.greet();console.log(person.getAge());  // 正确：可以通过getter获取age// person.age = 31;  // 错误：age是私有属性，不能直接访问

TypeScript 的类型系统不仅让类的成员更加安全，还通过接口让我们在代码中明确地描述对象的形状。

3.3.2 接口（Interface）

接口 是 TypeScript 独有的概念，它允许我们为对象、类、函数等定义一个结构。接口可以强制执行特定结构，并且保证类或对象遵循这个结构。接口不仅能提高代码的可读性，还能大大增强代码的可维护性。

interface Person {  name: string;  age: number;}
function greet(person: Person) {  console.log(`Hello, my name is ${person.name} and I am ${person.age} years old.`);}
let person: Person = { name: "Alice", age: 30 };greet(person);

在这个例子中，接口 Person 强制 greet 函数的参数必须是一个拥有 name 和 age 属性的对象。如果你传递的对象不符合接口要求，TypeScript 会报错。

3.4 编译与运行

JavaScript 代码不需要编译，你可以直接在浏览器中运行，或者通过 Node.js 直接执行。

而 TypeScript 需要先经过编译，转换为标准的 JavaScript 代码，才能执行。你需要使用 tsc 命令来将 TypeScript 代码编译成 JavaScript 代码，然后再执行生成的 JavaScript 文件。

例如，我们写一个简单的 TypeScript 文件 hello.ts：

let message: string = "Hello, TypeScript!";console.log(message);

然后用以下命令将其编译为 JavaScript：

tsc hello.ts

这会生成一个 hello.js 文件，里面的内容就变成了标准的 JavaScript：

var message = "Hello, TypeScript!";console.log(message);

你可以通过 node hello.js 来运行它，输出 Hello, TypeScript!。

3.5 TypeScript 的优势

那么，TypeScript 比 JavaScript 好在哪些方面呢？其实，TypeScript 的优势主要体现在以下几点：

1. 静态类型检查：TypeScript 提供了强大的类型系统，帮助我们在编译时就发现错误，而不是等到运行时才发现问题。

2. 更好的开发体验：因为 TypeScript 强制了类型安全，所以 IDE 和编辑器能够提供更加智能的代码补全、自动提示和错误检查功能。这让开发变得更加高效。

3. 面向对象编程支持：TypeScript 提供了更强大的面向对象编程功能，比如接口、类、继承、抽象类等，让代码结构更清晰，更容易扩展。

4. 适合大型项目：在大型应用中，TypeScript 的类型检查和模块化功能能大大减少代码出错的概率，确保项目的可维护性。

3.6 总结

本文我们详细对比了 TypeScript 和 JavaScript 的差异。简单来说，TypeScript 的强类型系统、面向对象编程支持、类型注解等特性，让它在开发过程中提供了更多的帮助和保障。

JavaScript 的灵活性和动态特性虽然非常适合快速开发，但在项目复杂度提高时，TypeScript 的优势就会显现出来，特别是在大型项目和团队协作中。

作为程序员，持续学习和充电非常重要，作为开发者，我们需要保持好奇心和学习热情，不断探索新的技术，只有这样，我们才能在这个快速发展的时代中立于不败之地。低代码也是一个值得我们深入探索的领域，让我们拭目以待，它将给前端世界带来怎样的变革，推荐一个低代码工具。

应用地址：https://www.jnpfsoft.com

开发语言：Java/.net

这是一个基于 Flowable 引擎(支持 java、.NET)，已支持 MySQL、SqlServer、Oracle、PostgreSQL、DM（达梦）、 KingbaseES（人大金仓）6 个数据库，支持私有化部署，前后端封装了上千个常用类，方便扩展，框架集成了表单、报表、图表、大屏等各种常用的 Demo 方便直接使用。