JavaScript & TypeScript 学习总结

最新推荐文章于 2025-11-29 13:42:57 发布

原创最新推荐文章于 2025-11-29 13:42:57 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #typescript #学习

本文介绍了JavaScript和TypeScript的基础语法，包括变量声明、操作符、语句、函数、对象、数组和闭包。TypeScript作为JS的超集，增加了类型注解、类和模块，需经编译后运行，有助于提升代码质量和可维护性。

JavaScript & TypeScript 学习总结

基本语法

JavaScript（简称JS）和TypeScript（简称TS）都是基于ECMAScript标准的编程语言。它们共享许多相似的基本语法，包括变量声明、条件语句、循环语句等。以下是一些基本语法示例：

变量声明

在JavaScript中，可以使用var、let或const关键字声明变量：

var message = 'Hello, World!';
let count = 10;
const PI = 3.14;

TypeScript引入了类型注解，可以使用特定类型来声明变量：

let message: string = 'Hello, World!';
let count: number = 10;
const PI: number = 3.14;

操作符

JavaScript和TypeScript支持各种操作符，包括算术运算符、赋值运算符、逻辑运算符等。

let sum = 10 + 5;
let isTrue = true && false;

语句

条件语句和循环语句在JavaScript和TypeScript中也是相似的，包括if、switch、for、while等。

let num = 10;

if (num > 0) {
  console.log('大于0');
} else if (num < 0) {
  console.log('小于0');
} else {
  console.log('0');
}

函数

JavaScript和TypeScript都支持函数的定义和调用。可以使用function关键字定义函数，并使用return语句返回值。

function hello(name) {
  return 'Hello, ' + name + '!';
}

let message = hello('KANGKANG');
console.log(message); // 输出：Hello, KANGKANG!

在TypeScript中，可以使用类型注解来指定函数的参数类型和返回类型。

function hello(name: string): string {
  return 'Hello, ' + name + '!';
}

let message: string = greet('KANGKANG');
console.log(message); // 输出：Hello, KANGKANG!

对象

JavaScript和TypeScript都支持对象的创建和访问。可以使用字面量语法创建对象，并通过.或[]操作符访问对象的属性。

let person = {
  name: 'KANGKANG',
  age: 18,
  address: {
    city: 'Chongqing',
    country: 'China'
  }
};

console.log(person.name); // 输出：KANGKANG
console.log(person['age']); // 输出：18

在TypeScript中，可以使用接口（Interface）来定义对象的类型和属性。

interface Person {
  name: string;
  age: number;
  address: {
    city: string;
    country: string;
  };
}

let person: Person = {
  name: 'KANGKANG',
  age: 18,
  address: {
    city: 'Chongqing',
    country: 'China'
  }
};

console.log(person.name); // 输出：KANGKANG
console.log(person.address.city); // 输出：Chongqing

数组

JavaScript和TypeScript都支持数组的创建和操作。可以使用字面量语法创建数组，并使用

索引访问数组元素。

let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 输出：1

在TypeScript中，可以使用类型注解来指定数组元素的类型。

let numbers: number[] = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 输出：1

链式语法

JavaScript和TypeScript都支持链式语法，通过连续调用对象或函数的方法来实现方法链。

let result = numbers
  .filter(num => num % 2 === 0)
  .map(num => num * 2)
  .reduce((sum, num) => sum + num, 0);
console.log(result); // 输出：12

闭包

JavaScript和TypeScript都支持闭包的概念，允许函数访问其词法作用域外部的变量。

function createCounter() {
  let count = 0;

  return function() {
    count++;
    console.log(count);
  };
}

let counter = createCounter();
counter(); // 输出：1
counter(); // 输出：2

JavaScript和TypeScript的区别与过渡

JavaScript是一种解释型的动态类型语言，而TypeScript是JavaScript的超集，添加了静态类型和更强大的类型系统。

具体的区别和过渡包括：

变量定义：JavaScript使用var、let、const来定义变量，而TypeScript引入了类型注解，使用特定类型来定义变量。
类型注解：TypeScript支持类型注解，可以在变量、函数、对象等声明中明确指定类型，以提供更严格的类型检查。
类和模块：TypeScript支持类和模块的概念，并提供了更强大的面向对象编程能力和模块化开发。
编译：JavaScript是一种解释型语言，代码可以直接在浏览器或Node.js环境中运行。而TypeScript需要先经过编译，将TypeScript代码转换为JavaScript代码，然后再运行。

对于从JavaScript过渡到TypeScript的开发者来说，需要逐步添加类型注解、定义接口和类型，并利用TypeScript的工具和类型检查来提高代码的可靠性和可维护性。可以使用TypeScript的编译器和编辑器插件来辅助开发，并逐步将JavaScript代码转换为TypeScript代码。

总结而言，学习JavaScript和TypeScript可以使我们在前端开发中拥有更强大的工具和语言特性。JavaScript是一种灵活的动态类型语言，而TypeScript在此基础上提供了静态类型和更丰富的功能，可以提高代码质量和开发效率。