首页 > 网络编程 > JavaScript > javascript技巧 > TypeScript跟js、es6区别

一文详解TypeScript跟js、es6这些的区别

2025-05-21 09:26:12 作者：前端布洛芬

TypeScript和JavaScript是目前项目开发中较为流行的两种脚本语言,这篇文章主要给大家介绍了关于TypeScript跟js、es6这些区别的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

一、TypeScript 是什么

想象 JavaScript 是一个自由奔放的艺术家，它在创作（编写代码）时不受太多约束，非常灵活，但有时也容易犯错且难以调试。而 TypeScript 就像是给这位艺术家配备了一套精确的工具和规范，让创作更加严谨、有序。TypeScript 是 JavaScript 的超集，由微软开发，它在 JavaScript 的基础上增加了静态类型系统，能够在代码编译阶段就发现很多类型相关的错误，提高代码的可靠性和可维护性。

二、语法对比

1. 变量声明

JavaScript：
在 JavaScript 中，变量声明使用 var、let 或 const，变量的类型是动态的，在运行时才能确定。

// 使用 var 声明变量
var num = 10;
num = 'hello'; // 变量类型在运行时改变，不会报错

// 使用 let 声明变量
let str = 'world';
str = 20; // 同样可以改变类型，不会报错

TypeScript：
在 TypeScript 中，你可以为变量指定类型，一旦指定，就不能随意赋值为其他类型的值（除非类型兼容）。

// 指定变量为 number 类型
let num: number = 10;
// num = 'hello'; // 报错，不能将字符串赋值给 number 类型的变量

// 指定变量为 string 类型
let str: string = 'world';
// str = 20; // 报错，不能将数字赋值给 string 类型的变量

ES6：
ES6 引入了 let 和 const 来声明变量，主要是解决 var 存在的变量提升和块级作用域问题，变量类型仍然是动态的。

// 使用 let 声明块级作用域变量
{
    let blockVar = 10;
    console.log(blockVar); // 输出 10
}
// console.log(blockVar); // 报错，blockVar 只在块级作用域内有效

// 使用 const 声明常量
const PI = 3.14;
// PI = 3.1415; // 报错，常量一旦赋值不能再修改

2. 函数声明

JavaScript：
JavaScript 中的函数对参数和返回值类型没有严格要求，非常灵活。

function add(a, b) {
    return a + b;
}
console.log(add(1, 2)); // 输出 3
console.log(add('1', '2')); // 输出 '12'，不会报错

TypeScript：
TypeScript 可以明确函数的参数类型和返回值类型，增强代码的可读性和安全性。

function add(a: number, b: number): number {
    return a + b;
}
console.log(add(1, 2)); // 输出 3
// console.log(add('1', '2')); // 报错，参数类型不匹配

ES6：
ES6 引入了箭头函数，使函数的语法更加简洁。

// 传统函数
function multiply(a, b) {
    return a * b;
}

// 箭头函数
const multiplyArrow = (a, b) => a * b;

console.log(multiply(2, 3)); // 输出 6
console.log(multiplyArrow(2, 3)); // 输出 6

三、对象对比

1. 对象定义

JavaScript：
JavaScript 中的对象是动态的，可以随时添加、删除和修改属性。

let person = {
    name: 'John',
    age: 30
};
person.gender = 'male'; // 可以动态添加属性
delete person.age; // 可以动态删除属性

TypeScript：
TypeScript 可以使用接口（interface）来定义对象的结构，确保对象的属性和类型符合要求。

interface Person {
    name: string;
    age: number;
    gender?: string; // 可选属性
}

let person: Person = {
    name: 'John',
    age: 30
};
// person.address = '123 Main St'; // 报错，对象中不能有接口未定义的属性

ES6：
ES6 引入了对象解构赋值和扩展运算符等新特性，方便操作对象。

let person = {
    name: 'John',
    age: 30
};

// 对象解构赋值
let { name, age } = person;
console.log(name); // 输出 'John'
console.log(age); // 输出 30

// 扩展运算符
let newPerson = { ...person, gender: 'male' };
console.log(newPerson); // 输出 { name: 'John', age: 30, gender: 'male' }

2. 类和继承

JavaScript：
在 JavaScript 中，类是在 ES6 才引入的，本质上还是基于原型的继承。

// ES6 类
class Animal {
    constructor(name) {
        this.name = name;
    }
    sayHello() {
        console.log(`Hello, I'm ${this.name}`);
    }
}

class Dog extends Animal {
    bark() {
        console.log('Woof!');
    }
}

let dog = new Dog('Buddy');
dog.sayHello(); // 输出 'Hello, I'm Buddy'
dog.bark(); // 输出 'Woof!'

TypeScript：
TypeScript 中的类功能更强大，支持类型注解、访问修饰符（如 public、private、protected）等。

class Animal {
    public name: string; // 公共属性
    constructor(name: string) {
        this.name = name;
    }
    sayHello(): void {
        console.log(`Hello, I'm ${this.name}`);
    }
}

class Dog extends Animal {
    private breed: string; // 私有属性
    constructor(name: string, breed: string) {
        super(name);
        this.breed = breed;
    }
    bark(): void {
        console.log('Woof!');
    }
    getBreed(): string {
        return this.breed;
    }
}

let dog: Dog = new Dog('Buddy', 'Labrador');
dog.sayHello(); // 输出 'Hello, I'm Buddy'
dog.bark(); // 输出 'Woof!'
console.log(dog.getBreed()); // 输出 'Labrador'
// console.log(dog.breed); // 报错，私有属性不能在类外部访问

ES6：
ES6 类主要是提供了一种更简洁的语法来实现基于原型的继承。

class Shape {
    constructor(color) {
        this.color = color;
    }
    getColor() {
        return this.color;
    }
}

class Circle extends Shape {
    constructor(color, radius) {
        super(color);
        this.radius = radius;
    }
    getArea() {
        return Math.PI * this.radius * this.radius;
    }
}

let circle = new Circle('red', 5);
console.log(circle.getColor()); // 输出 'red'
console.log(circle.getArea()); // 输出约 78.54

四、方法对比

1. 方法参数和返回值类型

JavaScript：
JavaScript 方法的参数和返回值类型没有明确的定义，比较灵活但也容易出错。

function calculateArea(width, height) {
    return width * height;
}
console.log(calculateArea(2, 3)); // 输出 6
console.log(calculateArea('2', '3')); // 输出 NaN，不会报错

TypeScript：
TypeScript 可以为方法的参数和返回值指定类型，提高代码的安全性。

function calculateArea(width: number, height: number): number {
    return width * height;
}
console.log(calculateArea(2, 3)); // 输出 6
// console.log(calculateArea('2', '3')); // 报错，参数类型不匹配

ES6：
ES6 方法同样没有类型检查，主要关注语法的简洁性。

const calculateArea = (width, height) => width * height;
console.log(calculateArea(2, 3)); // 输出 6
console.log(calculateArea('2', '3')); // 输出 NaN，不会报错

总结

JavaScript 是一种非常灵活的动态类型语言，适合快速开发和小型项目。ES6 在 JavaScript 的基础上引入了很多新的语法特性，让代码更加简洁和易读。而 TypeScript 通过添加静态类型系统，增强了代码的可靠性和可维护性，尤其适合大型项目和团队协作开发。

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