TypeScript - 基本介绍以及与JavaScript对比（附：声明变量方式）

作者：hangge | 2026-07-28 08:55

TypeScript 是由微软开发的开源编程语言，它是 JavaScript 的超集，在 JavaScript 的基础上增加了静态类型检查、类、接口等特性。本文将介绍 TypeScript 的基本概念、与 JavaScript 的主要区别，以及如何在 TypeScript 中声明变量。

1，JavaScript 的现状与问题

（1）JavaScript 是目前最流行的编程语言之一，广泛应用于各个领域。Stack Overflow 的创立者之一 Jeff Atwood 曾提出著名的 Atwood 定律："任何可以使用 JavaScript 实现的应用最终都会使用 JavaScript 实现"。我们可以看到这句话正在逐步成为事实：

Web 开发：JavaScript 一直是前端开发的核心语言
移动端开发：通过 React Native、Weex、uni-app 等框架实现跨平台开发
小程序开发：微信小程序、支付宝小程序等都使用 JavaScript
桌面应用：可以使用 Electron 开发跨平台桌面应用程序
服务端开发：在 Node.js 环境下进行服务器端开发

（2）然而，JavaScript 也存在一些问题，其中最主要的是缺少类型约束。由于历史因素，JavaScript 在语言设计方面存在一些缺陷：

ES5 及之前版本中使用的 var 关键字存在作用域问题
最初 JavaScript 设计的数组类型并不是连续的内存空间
直到今天，JavaScript 也没有加入类型检测这一机制，这会影响开发者的编码效率和代码质量

（3）在编程开发中，有一个共识：错误越早发现，就越容易解决。JavaScript 由于缺少类型约束，只能在运行时发现错误，这会带来以下问题：

调用函数时传入错误类型的参数，IDE 不会提示报错
代码运行后才发现错误，可能导致整个项目崩溃
开发大型项目时，缺少类型约束会带来很多安全隐患

2，TypeScript 是什么

（1）TypeScript 是微软在 2012 年开发的开源编程语言，它是 JavaScript 的超集，在 JavaScript 的基础上增加了类型系统。TypeScript 在 GitHub 和其官方网站上的定义如下：

GitHub：TypeScript is a superset of JavaScript that compiles to clean JavaScript output
官方网站：TypeScript is a typed superset of JavaScript that compiles to plain JavaScript

（2）更通俗易懂的理解是：TypeScript 是 JavaScript 的超集，它带有类型并编译出干净的 JavaScript 代码。TypeScript 具有以下特点：

始于 JavaScript，归于 JavaScript：TypeScript 从 JavaScript 开发者熟悉的语法和语义开始，可以编译出纯净、简洁的 JavaScript 代码，可以在任何浏览器、Node.js 环境中运行
强大的工具支持：TypeScript 的类型系统允许开发者使用高效的开发工具，比如静态检查和代码重构
支持最新的 JavaScript 特性：TypeScript 提供最新的和不断发展的 JavaScript 特性，包括 ES6、ES7、ES8 以及未来提案中的特性

（3）目前，TypeScript 已经在很多地方被广泛应用：

Vue.js 3 已使用 TypeScript 进行重构，98.3% 的代码使用 TypeScript 编写
Angular 从项目初期就采用 TypeScript 进行开发
最流行的编辑器 VS Code 也是使用 TypeScript 编写的
Element Plus 和 Ant Design 等 UI 库也是使用 TypeScript 编写的
微信小程序开发也支持使用 TypeScript 编写

3，TypeScript 与 JavaScript 的区别

（1）TypeScript 与 JavaScript 最显著的区别在于类型系统。下面我们从多个维度对两者进行对比：

对比项	JavaScript	TypeScript
类型系统	动态类型，运行时确定类型	静态类型，编译时确定类型
类型检查	无类型检查，运行时才发现错误	编译时进行类型检查，提前发现错误
编译执行	解释型语言，浏览器直接执行	需要编译为 JavaScript 后执行
IDE 支持	有限的代码提示和重构支持	强大的代码补全、重构和错误检测
学习曲线	入门简单	需要学习类型系统，有一定门槛
适用场景	小型项目、快速原型开发	大型项目、团队协作开发

（2）从执行流程来看，JavaScript 是解释型语言，代码可以直接在浏览器中运行。而 TypeScript 需要先通过编译器（tsc）将 .ts 文件编译成 .js 文件，然后再由浏览器或 Node.js 执行。

提示：TypeScript 编译后的代码是纯净的 JavaScript，不存在兼容性问题，不需要依赖 Babel 等工具。

（3）从类型约束来看，JavaScript 是弱类型语言，变量可以随时被赋予任何类型的值。而 TypeScript 要求在声明变量时指定类型（或通过类型推导），如果赋值类型不匹配，编译时就会报错。这种机制可以帮助开发者在编码阶段就发现潜在的类型错误。

附：声明变量的方式

1，声明变量的格式

（1）在 TypeScript 中定义变量时，需要指定标识符的类型。下面代码声明了一个名为 message 的变量，类型为 string，初始值为 "Hello World"。

注意：string 是小写的，它与 String 有区别。string 是 TypeScript 中定义的字符串类型，String 是 ECMAScript 中定义的一个包装类。

// 格式：var/let/const 标识符: 数据类型 = 赋值;

// 示例：声明一个字符串类型的变量
let message: string = "Hello World";

（2）如果为已声明类型的变量赋其他类型的值，TypeScript 会在编译时报错。这种类型检查机制可以帮助我们在编码阶段就发现类型错误，避免在运行时出现意外的问题。

let message: string = "Hello World";

// 错误：不能将 number 类型赋值给 string 类型
message = 123;  // Type 'number' is not assignable to type 'string'.

2，声明变量的关键字

（1）在 TypeScript 中定义变量的方法与 ES6 及之后的版本一致，可以使用 var、let、const 关键字：

var myname: string = "hangge";
let myage: number = 88;
const myheight: number = 1.88;

（2）在 TypeScript 中，不建议使用 var 关键字，主要原因如下：

ES6 之后引入 let 和 const 来取代 var
let 声明的变量具有块级作用域，而 var 声明的变量没有块级作用域，容易引起一些问题
在 TypeScript 中使用 let 或 const 声明变量是更加安全、可靠的做法

（3）let 和 const 的区别：

let：声明一个可以重新赋值的变量
const：声明一个常量，声明后不能重新赋值（但对于对象和数组，其内部属性可以修改）

3，变量的类型推导

（1）在 TypeScript 中，有时候不必为每个变量显式声明类型，TypeScript 会根据初始值自动推断变量的类型：

提示：类型推导可以减少代码的编写量，同时在保持类型安全的前提下提供更好的开发体验。在实际开发中，如果变量的类型可以从初始值明确推断出来，通常可以省略类型声明。

// TypeScript 会自动推断 message 的类型为 string
let message = "Hello World";

// 等价于：
// let message: string = "Hello World";

由于 TypeScript 进行了类型推导，如果后续尝试将 message 赋值为其他类型的值，同样会报错。

let message = "Hello World";  // 自动推导为 string 类型

// 错误：不能将 number 类型赋值给 string 类型
message = 123;  // Type 'number' is not assignable to type 'string'.

（2）类型推导在声明常量时同样有效：

const count = 100;     // 自动推导为 100（字面量类型）
const name = "hangge";  // 自动推导为 "hangge"（字面量类型）