TypeScript跟js,es6这些的区别

TypeScript

一、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 通过添加静态类型系统，增强了代码的可靠性和可维护性，尤其适合大型项目和团队协作开发。