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

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

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

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

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

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

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

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

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

// 传统函数
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

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

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

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

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' }

// 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!'

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); // 报错，私有属性不能在类外部访问

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

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

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

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