TypeScript跟js,es6这些的区别

TypeScript

一、TypeScript 是什么

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

二、语法对比

1. 变量声明

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

javascript 复制代码

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

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

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

typescript 复制代码

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

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

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

javascript 复制代码

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

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

2. 函数声明

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

javascript 复制代码

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

TypeScript ：
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 引入了箭头函数，使函数的语法更加简洁。

javascript 复制代码

// 传统函数
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 中的对象是动态的，可以随时添加、删除和修改属性。

javascript 复制代码

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

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

typescript 复制代码

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

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

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

javascript 复制代码

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 才引入的，本质上还是基于原型的继承。

javascript 复制代码

// 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）等。

typescript 复制代码

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 类主要是提供了一种更简洁的语法来实现基于原型的继承。

javascript 复制代码

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 方法的参数和返回值类型没有明确的定义，比较灵活但也容易出错。

javascript 复制代码

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

TypeScript ：
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 方法同样没有类型检查，主要关注语法的简洁性。

javascript 复制代码

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

总结

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