TypeScript 和 ES6 语法

1. TypeScript 语法概述

什么是 TypeScript TypeScript 是由微软开发的一种开源编程语言，它是 JavaScript 的超集，增加了静态类型和其他一些特性，使得开发大型应用程序更加容易。

TypeScript 的主要特性

• 类型系统：TypeScript 提供了静态类型检查，可以在编译阶段捕获潜在的错误。
• 接口：接口定义了对象的结构，可以用于类型检查。
• 类和继承：TypeScript 支持面向对象编程，包括类、继承、访问修饰符等。
• 模块化：TypeScript 支持 ES6 的模块系统，可以将代码分割成独立的模块，提高代码的可维护性。

2. TypeScript 语法实例

类型注解

let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
let list: number[] = [1, 2, 3];

接口定义

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "John", lastName: "Doe" };
console.log(greeter(user));

类的实现

class Animal {
    private name: string;

    constructor(name: string) {
        this.name = name;
    }

    public move(distanceInMeters: number) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

let dog = new Animal("Dog");
dog.move(10);

模块导入和导出

// math.ts
export function add(x: number, y: number): number {
    return x + y;
}

// main.ts
import { add } from './math';
console.log(add(2, 3));

3. ES6 重要语法概述

什么是 ES6 ES6（ECMAScript 2015）是 JavaScript 的第六版标准，引入了许多新的特性，使得 JavaScript 编程更加高效和便捷。

ES6 的主要特性

• let 和 const：用于声明变量，let 有块级作用域，const 用于声明常量。
• 箭头函数：简化函数定义，并且不绑定 this。
• 模板字符串：允许多行字符串和内嵌表达式。
• 解构赋值：从数组或对象中提取值并赋值给变量。
• 扩展运算符：用于展开数组或对象。
• 类和继承：提供面向对象编程的语法糖。
• 模块化：提供导入和导出模块的语法。
• Promise：用于处理异步操作。
• async/await：更简洁地处理异步操作。

4. ES6 语法实例

使用 let 和 const

let x = 10;
const y = 20;
x = 15; // 允许
y = 25; // 报错，y 是常量

箭头函数示例

const add = (a, b) => a + b;
console.log(add(2, 3));

模板字符串示例

let name = "John";
let greeting = `Hello, ${name}!`;
console.log(greeting);

解构赋值示例

let [a, b] = [1, 2];
let { name, age } = { name: "John", age: 25 };

扩展运算符示例

let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

类和继承示例

class Animal {
    constructor(name) {
        this.name = name;
    }

    move(distanceInMeters) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

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

let dog = new Dog('Dog');
dog.bark();
dog.move(10);

模块导入和导出示例

// math.js
export function add(x, y) {
    return x + y;
}

// main.js
import { add } from './math';
console.log(add(2, 3));

使用 Promise 和 async/await

// Promise 示例
let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000);
});

promise.then(result => console.log(result));

// async/await 示例
async function asyncFunction() {
    let result = await promise;
    console.log(result);
}

asyncFunction();