JS 与 TypeScript 基础：从语法到实践

一、引言

JavaScript（JS）是前端开发的核心语言，而 TypeScript（TS）作为其超集，为大型项目开发带来了诸多优势。本文将深入探讨两者的基础语法与特性。

二、JavaScript 基础

（一）变量声明

JS 中使用 var、let、const 声明变量。var 存在变量提升且函数作用域，let 和 const 是块级作用域。

// 使用 let 声明变量
let num = 10;
// 使用 const 声明常量（不可重新赋值）
const PI = 3.14;

（二）数据类型

包括基本类型（string、number、boolean、null、undefined）和引用类型（object、array、function 等）。

let str = "Hello"; // string 类型
let arr = [1, 2, 3]; // array 类型

（三）函数

// 普通函数声明
function add(a, b) {
    return a + b;
}
// 箭头函数（更简洁）
let multiply = (a, b) => a * b;

三、TypeScript 基础

（一）类型注解

TS 要求为变量、函数参数等添加类型注解。

let name: string = "Alice"; // 字符串类型
let age: number = 25; // 数字类型

（二）接口（Interface）

用于定义对象的结构。

interface Person {
    name: string;
    age: number;
}
let user: Person = { name: "Bob", age: 30 };

（三）类（Class）

支持面向对象编程，包括继承、封装等特性。

class Animal {
    constructor(public name: string) {}
    speak() {
        console.log(`${this.name} makes a sound`);
    }
}
class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks`);
    }
}
let myDog = new Dog("Buddy");
myDog.speak();

四、两者对比与实践场景

（一）对比

JS 灵活但大型项目易混乱，TS 通过类型检查提高代码质量和可维护性。例如，在团队协作开发复杂前端应用时，TS 可提前发现类型错误。

（二）实践场景

• 小型项目：JS 开发快速，适合原型搭建。

• 中大型项目：TS 可用于企业级应用开发，如大型电商平台前端。

五、总结

JS 是前端开发的基石，提供了灵活的编程体验。TypeScript 则在其基础上增强了类型系统和面向对象特性，更适合大型项目。开发者应根据项目规模和需求选择合适的语言，在实践中不断探索，发挥它们的最大价值，为用户打造更稳定、高效的前端应用。