TypeScript (TS) 与 JavaScript (JS) 全维度区别 + 常见代码对比
一、TS 与 JS 核心区别（完全版）
| 维度 | TypeScript | JavaScript |
|---|
| 本质定位 | 强类型的 JS 超集（包含所有 JS 语法，新增类型系统） | 弱类型、动态类型的解释型脚本语言 |
| 类型系统 | 静态类型（编译期检查类型）、支持显式类型注解、类型推导、泛型、接口等 | 动态类型（运行期检查类型）、无类型注解，变量类型可随时改变 |
| 编译过程 | 需编译为 JS 才能运行（TSC 编译器），编译期可发现类型错误 | 直接由 JS 引擎（V8/SpiderMonkey）解释执行，错误仅运行时暴露 |
| 语言特性 | 包含 JS 所有特性 + 新增：1. 类型注解 / 断言2. 接口（Interface）3. 泛型（Generic）4. 枚举（Enum）5. 元组（Tuple）6. 命名空间（Namespace）7. 抽象类（Abstract Class）8. 可选链 / 空值合并（语法糖，后被 ES 吸纳） | 仅支持 ES 标准特性（ES5/ES6+）：变量、函数、类、模块、Promise 等，无类型相关特性 |
| 面向对象 | 完整的 OOP 支持：抽象类、接口、访问修饰符（public/private/protected） | ES6 后支持类和继承，但无抽象类、接口、访问修饰符（仅靠约定） |
| 错误检测 | 编译期检测类型错误、语法错误，提前规避 80% 运行时问题 | 仅运行时抛出错误（如类型不匹配、未定义变量） |
| 工具支持 | 完美支持 IDE 智能提示（VS Code 原生支持）、重构、代码导航 | 智能提示有限，重构易出错 |
| 兼容性 | 需配置编译目标（ES3/ES5/ES6+），可兼容所有 JS 运行环境 | 直接运行，但高版本 ES 特性需 Babel 转译 |
| 使用场景 | 中大型项目、团队协作、框架开发（React/Vue/Angular 主流选型） | 小型脚本、快速原型、简单页面交互 |
| 学习成本 | 高于 JS，需掌握类型系统、TS 特有语法 | 入门简单，核心语法易掌握 |
二、TS 常见代码示例（附 JS 对比）
1. 变量类型注解（最基础区别）
TypeScript
let num: number = 10;
let str: string = "hello";
let bool: boolean = true;
let arr: number[] = [1, 2, 3];
let arr2: Array<string> = ["a", "b"];
let anyVar: any = "任意类型，等同于JS变量";
let unknownVar: unknown = 10;
let age = 20;
age = "20";
JavaScript
let num = 10;
num = "10";
let arr = [1, 2, 3];
arr.push("4");
let anyVar = "任意类型";
anyVar = true;
2. 函数类型（参数 / 返回值注解）
TypeScript
function add(a: number, b: number): number {
return a + b;
}
add(1, 2);
add(1, "2");
function greet(name: string, age?: number): string {
return `Hello ${name}, age ${age || 18}`;
}
greet("Tom");
greet("Tom", 20);
function sum(...nums: number[]): number {
return nums.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3);
type Fn = (x: number) => number;
const double: Fn = (x) => x * 2;
JavaScript
function add(a, b) {
return a + b;
}
add(1, "2");
function greet(name, age) {
return `Hello ${name}, age ${age || 18}`;
}
greet("Tom");
function sum(...nums) {
return nums.reduce((a, b) => a + b, 0);
}
sum(1, "2", 3);
3. 接口（Interface）—— TS 特有
TypeScript
interface User {
id: number;
name: string;
age?: number;
readonly gender: string;
}
const user: User = {
id: 1,
name: "Tom",
gender: "male"
};
user.gender = "female";
interface Admin extends User {
role: string;
}
const admin: Admin = {
id: 2,
name: "Jerry",
gender: "male",
role: "admin"
};
interface Fn {
(x: number, y: number): number;
}
const multiply: Fn = (x, y) => x * y;
JavaScript
const user = {
id: 1,
name: "Tom",
gender: "male"
};
user.gender = "female";
user.age = "20";
const multiply = (x, y) => x * y;
multiply("2", 3);
4. 类（Class）—— 增强版 OOP
TypeScript
interface Person {
getName(): string;
}
class Student implements Person {
public name: string;
private age: number;
protected grade: string;
readonly id: number;
constructor(name: string, age: number, grade: string) {
this.name = name;
this.age = age;
this.grade = grade;
this.id = Math.random();
}
getName(): string {
return this.name;
}
getAge(): number {
return this.age;
}
}
class CollegeStudent extends Student {
getGrade(): string {
return this.grade;
}
}
const stu = new Student("Alice", 18, "高一");
stu.age;
stu.grade;
JavaScript
class Student {
constructor(name, age, grade) {
this.name = name;
this._age = age;
this._grade = grade;
this.id = Math.random();
}
getName() {
return this.name;
}
getAge() {
return this._age;
}
}
class CollegeStudent extends Student {
getGrade() {
return this._grade;
}
}
const stu = new Student("Alice", 18, "高一");
stu._age = 20;
stu._grade = "大二";
5. 枚举（Enum）—— TS 特有
TypeScript
enum Direction {
Up,
Down,
Left,
Right
}
const dir: Direction = Direction.Up;
console.log(Direction[0]);
enum Status {
Success = "success",
Error = "error"
}
const res: Status = Status.Success;
const enum Color {
Red,
Green,
Blue
}
const color = Color.Red;
JavaScript
const Direction = {
Up: 0,
Down: 1,
Left: 2,
Right: 3
};
const DirectionReverse = {
0: "Up",
1: "Down"
};
const dir = Direction.Up;
console.log(DirectionReverse[0]);
const Status = {
Success: "success",
Error: "error"
};
const res = Status.Success;
6. 泛型（Generic）—— TS 特有
TypeScript
function identity<T>(arg: T): T {
return arg;
}
const num = identity<number>(10);
const str = identity<string>("hello");
interface Result<T> {
code: number;
data: T;
}
const res: Result<{ name: string }> = {
code: 200,
data: { name: "Tom" }
};
class Box<T> {
private value: T;
constructor(value: T) {
this.value = value;
}
getValue(): T {
return this.value;
}
}
const numBox = new Box<number>(10);
const strBox = new Box<string>("hello");
JavaScript
function identity(arg) {
return arg;
}
const num = identity(10);
const str = identity("hello");
const res = {
code: 200,
data: { name: "Tom" }
};
res.data.age = "20";
class Box {
constructor(value) {
this.value = value;
}
getValue() {
return this.value;
}
}
const numBox = new Box(10);
numBox.value = "hello";
7. 元组（Tuple）—— TS 特有
TypeScript
let tuple: [string, number] = ["Tom", 20];
tuple[0] = "Jerry";
tuple[1] = 21;
tuple.push(30);
tuple[2];
const [name, age] = tuple;
console.log(name);
console.log(age);
JavaScript
let arr = ["Tom", 20];
arr[0] = 10;
arr[1] = "20";
arr.push(true);
const [name, age] = arr;
console.log(name);
console.log(age);
8. 类型断言（Type Assertion）—— TS 特有
TypeScript
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
let strLength2: number = (someValue as string).length;
function getLength(str?: string): number {
return str!.length;
}
JavaScript
let someValue = "this is a string";
let strLength = someValue.length;
someValue = null;
strLength = someValue.length;
9. 空值合并 / 可选链（TS 语法糖，后被 ES 吸纳）
TypeScript
const obj = { a: { b: 10 } };
console.log(obj?.a?.b);
console.log(obj?.c?.d);
const num = 0;
console.log(num ?? 10);
const empty = null;
console.log(empty ?? 10);
JavaScript（ES2020+ 支持，低版本需转译）
const obj = { a: { b: 10 } };
console.log(obj && obj.a && obj.a.b);
console.log(obj && obj.c && obj.c.d);
const num = 0;
console.log(num || 10);
const empty = null;
console.log(empty || 10);
三、总结
核心区别回顾
- 类型系统：TS 是静态类型（编译期检查），JS 是动态类型（运行期检查），TS 通过类型注解 / 接口 / 泛型等约束类型，从根源减少运行时错误。
- 语言特性：TS 新增接口、枚举、泛型、抽象类、访问修饰符等特性，强化面向对象和代码复用，JS 仅支持基础 ES 特性。
- 工程化：TS 更适合大型项目 / 团队协作，依赖编译过程提前暴露问题，JS 适合小型脚本 / 快速开发，但重构和维护成本更高。
常见代码核心差异
- TS 通过类型注解约束变量 / 函数 / 类的类型，JS 无任何类型约束；
- TS 特有接口、枚举、泛型、元组等特性，JS 需通过对象 / 常量模拟（无语法级约束）；
- TS 对类的访问修饰符、只读属性提供语法支持，JS 仅靠约定（无强制约束）。
