JavaScript & TypeScript 学习总结

JavaScript & TypeScript 学习总结

一、基本语法

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

1.变量声明

在JavaScript中，可以使用var、let或const关键字声明变量：
var：使用var关键字声明的变量是函数作用域的，在声明的函数内部可见。如果在函数内部没有使用var关键字声明变量，则该变量会成为全局变量，可被函数内外访问。
let：使用let关键字声明的变量是块级作用域的，在声明的代码块内可见。不同于var，在相同的作用域内，let不允许重复声明同一个变量，而是会报错。
const：使用const关键字声明的变量也是块级作用域的，与let类似，不同的是const声明的变量是常量，一旦被赋值之后就不能再修改其值。

var text= '你好';
let count = 5;
const PI = 10;

var text= '你好';
let count = 5;
const PI = 10;

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

let text: string = '你好';
let count: number = 5;
const PI: number = 10;

2.操作符

JavaScript和TypeScript支持各种操作符，包括算术运算符、赋值运算符、比较运算符、逻辑运算符、条件运算符（三元运算符）。

let sum = 10 + 5;//算数运算符
//赋值运算符
let num = 10;
num += 5; 
//比较运算符
let age = 20;
console.log(age > 18); // true
//逻辑运算符
let isTrue = true && false; // false，逻辑与运算符需要所有的操作数都为true才返回true
let isFalse = true || false; // true，逻辑或运算符只需要一个操作数为true就返回true
条件运算符（三元运算符）
let num = 10;
let result = num > 5 ? '大于5' : '小于或等于5';
console.log(result); // '大于5'

3.各种语句

JavaScript和TypeScript中常见的语句包括条件语句（if语句）、循环语句（for循环、while循环）、switch语句和跳转语句（break语句、continue语句和return语句）等。

条件语句（if语句）：用于根据条件执行不同的代码块。

let num = 10;

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

循环语句（for循环、while循环）：用于重复执行一段代码块。

// for循环
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// while循环
let num = 0;
while (num < 5) {
  console.log(num);
  num++;
}

switch语句：用于根据表达式的值选择要执行的代码块。

let num = 2;

switch (num) {
  case 1:
    console.log('数字是1');
    break;
  case 2:
    console.log('数字是2');
    break;
  default:
    console.log('其他数字');
}

跳转语句：用于改变程序执行的流程。
break语句：用于跳出循环或switch语句。
continue语句：用于跳过当前循环中的剩余代码，继续执行下一次循环。
return语句：用于结束函数的执行，并返回一个值。

4.函数

在JavaScript中，可以使用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 = hello(‘KANGKANG’);
console.log(message); // 输出：Hello, KANGKANG!
除了常规函数定义之外，JavaScript和TypeScript还支持箭头函数和匿名函数。箭头函数是一种更简洁的函数写法，并且自动绑定了this关键字。匿名函数是指没有名字的函数，可以赋值给变量或作为参数传递给其他函数。

// 箭头函数
const add = (a, b) => {
  return a + b;
};

// 匿名函数
const greet = function(name) {
  return 'Hello, ' + name + '!';
};

函数是一种重要的代码组织和复用工具，可以将一段代码封装成一个独立的功能单元，并在需要的地方进行调用。函数可以提高代码的可读性、可维护性和复用性，是编程中常用的技术手段之一。

5.对象

JavaScript和TypeScript都支持对象的创建和访问。

在JavaScript中，可以使用字面量语法（{}）创建对象，并使用.或[]操作符访问对象的属性。

使用.操作符可以直接访问对象的属性，属性名必须是一个合法的标识符。
使用[]操作符可以通过属性名的字符串形式访问对象的属性，属性名可以是任意字符串。

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


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

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

对象是一种复合数据类型，用于存储和组织相关的数据。对象的属性可以是基本类型、对象类型或函数类型，可以通过点运算符或方括号来访问和修改对象的属性。对象在JavaScript和TypeScript中都是重要的概念，常用于表示现实世界中的实体和进行数据的管理与操作。

5.数组

JavaScript和TypeScript都支持数组的创建和操作。

在JavaScript中，可以使用字面量语法（[]）创建数组，并使用索引（从0开始）访问数组元素。

数组中的每个元素可以是任意类型，包括基本类型和对象类型。

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

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

类型注解提供了类型检查和代码提示的功能。

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

数组是一种有序的数据集合，使用数组可以便捷地存储和访问多个数据。数组提供了各种方法来操作和处理数据，如添加、删除、修改和遍历等操作。通过索引可以直接访问数组中的元素，索引从0开始，表示第一个元素。

值得注意的是，JavaScript和TypeScript中的数组可以自由地存储不同类型的元素。为了保持类型一致性，推荐在TypeScript中使用泛型数组类型或接口来定义数组的类型。

7.链式语法

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

class Calculator {
  constructor(value) {
    this.value = value;
  }

  add(num) {
    this.value += num;
    return this;
  }

  subtract(num) {
    this.value -= num;
    return this;
  }

  multiply(num) {
    this.value *= num;
    return this;
  }

  divide(num) {
    this.value /= num;
    return this;
  }
}

let result = new Calculator(10)
  .add(5)
  .multiply(2)
  .divide(3)
  .subtract(1)
  .value;
console.log(result); // 输出：10

在上述示例中，我们定义了一个Calculator类，它具有add、subtract、multiply和divide等方法。每个方法都会对存储在value属性中的数字执行相应的操作，并返回更新后的对象。

通过连续调用这些方法，我们可以像链条一样依次调用它们，每次操作都会返回更新后的Calculator对象。最后，我们可以通过访问value属性来获取结果。
链式语法的优点是可以简化代码并提高可读性。每个方法的返回值都是原对象或函数的引用，这样就可以继续进行下一个方法的调用。通过链式语法，我们可以在一行代码中完成多个操作，减少了临时变量的使用，并且代码更加清晰。

需要注意的是，链式语法的可用性取决于对象或函数是否返回适合链式调用的类型。一些内置的方法和库会返回支持链式调用的对象，但并不是所有函数都适用于链式语法。

8.闭包

闭包允许函数访问其词法作用域外部的变量。通过创建闭包，函数可以保留对它们被创建时所在作用域的引用，即使在函数被调用后，这些变量也能够被访问和修改。

工作原理：当一个函数返回另一个函数时，内部函数会创建一个闭包，并持有其外部函数的作用域。这意味着内部函数可以访问和操作外部函数中的变量，即使外部函数已经执行完毕或退出了作用域。

function createCounter() {
  let count = 0;

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

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

函数 createCounter 返回一个内部函数，该内部函数可以访问并修改外部函数 createCounter 中的变量 count。

接着，我们将 createCounter 的返回值（即内部函数）赋值给变量 counter。

最后，我们调用 counter 函数两次，并通过 console.log 输出变量 count 的值。注意，由于 counter 是一个闭包，内部函数保留了对 count 的引用，每次调用 counter 都会对 count 进行自增操作，并将最新的值进行输出。

二、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在此基础上提供了静态类型和更丰富的功能，可以提高代码质量和开发效率。