【JavaScript&TypeScript学习总结】

前言

JavaScript和TypeScript的关系

1.JavaScript 一般指的是浏览器环境运行的 ECMAScript 语法接口的编程语言，另外还包含 BOM(浏览器的一些接口，获取浏览器信息、版本、屏幕、操作系统、url处理 等)，DOM(HTML文档对象接口，就是所有你处理页面元素、样式等等都属于DOM)。

2.TypeScript 主要针对编程语言语法扩展来的，所以我们不拿它直接比较JS(应用型说法)，TS就是ES的语法基础上扩展了type产生的东西，除去类型定义的 TS 就是ES，TS比ES仅仅多了type。这种类型扩展是由于JavaScript应用范围越来越广、复杂度越来越高，为了提高可维护性产生的有意义的能力。
3.总结一下来说就是TypeScript是JavaScript的超集，添加了可选的静态类型系统、很多尚未正式发布的ECMAScript新特性（如装饰器）等,最终会被编译为JavaScript代码。

1.JavaScript

1.1JavaScript概况和组成部分

JavaScript诞生于1995年，它的出现主要是用于处理网页中的前端验证。所有现代的 HTML 页面都可以使用JavaScript。运行JavaScript有多种方式，可以直接在浏览器的控制台编写运行；也可以编写一个独立的js文件，然后在Html文件中引入，（这两种方法由浏览器解释执行，是以前唯一的方式）。也可以用编辑软件如Webstrom或VSCode编写独立的js文件，由安装好的Node.js解释执行运行。

1.客户端脚本语言 ：JavaScript通常在网页的客户端（即用户的浏览器）上执行。它能够与HTML和CSS结合，通过操作网页的文档对象模型（DOM）来实现动态变化和用户交互。

2.跨平台：JavaScript可以在各种不同的操作系统和浏览器上运行，包括Windows、macOS、Linux等。这使得它成为开发跨平台Web应用的理想选择。

3.弱类型：JavaScript是一种弱类型语言，意味着变量的数据类型可以动态改变。它不需要在声明变量时指定数据类型，并且可以根据需要进行隐式类型转换。

4.面向对象：JavaScript支持面向对象编程（OOP）的概念，包括封装、继承和多态等。它可以创建对象、定义类和使用原型继承等特性。

5.异步编程：JavaScript通过回调函数、Promise和async/await等机制实现异步编程。这使得它能够处理网络请求、定时器等需要等待的操作，而不会阻塞其他代码的执行。

6.生态系统和库：JavaScript拥有庞大的生态系统，有许多开源库和框架可供使用。这些库和框架可以简化开发过程、提高效率，并提供各种功能，如数据处理、用户界面构建和网络通信等。

1.2JavaScript基本语法

1.2.1标识符

1、标识符第一个字符必须是字母、下划线_或美元符号$，其后的字符可以是字母、数字或下划线、美元符号

2、自定义的标识符不能和 JavaScript 中的关键字及保留字同名，但可以包含关键字或保留字

3、标识符不能包含空格

4、标识符不能包含+、-、@、#等特殊字符

关键词如下：

1.2.2变量声明

类别名称	声明方式
整型	var a=10
非整型	var b=10.1
字符串	var c=“abc”
布尔类型	var d=true

示例如下：

//Number类型
var num = 1;
var num2 = 1.2;
var num3 = NaN;
 
//string类型
var str = "abc";
 
//boolean类型
var flag = true;
 
//定义null, undefined
var obj = null;
var obj2 = undefined;
var obj3;

1.2.3 操作符

1.一元操作符

++ 自增，-- 自减

2.布尔操作符

&& 所有操作数都为true时，才返回true，|| 只要有一个操作数为true，就返回ture，！ 逻辑非

3.算术操作符

+加法，- 减法，* 乘法，/ 除法，% 取余

关系操作符 < 小于，> 大于，<= 小于等于，>= 大于等于，== 检查其两个操作数是否相等，
= = =检查其两个操作数是否相等(包括类型)，!= 检查其两个操作数是否不相等，!== 检查其两个操作数是否不相等(包括类型)

4.赋值操作符

= 用于变量赋值，+= 加法赋值，-+ 减法赋值，*= 乘法赋值，/= 除法赋值，%= 取模赋值

//举个例子
let s1 = "2";
let s2 = "z";
let b = false;
let f = 1.1;
let o = {
	valueOf:function(){
		return -1
	}
}
s1++; //值变成数值3
s2++; //值变成NaN
b++; //值变成数值1
f--; //值变成 0.10000000000000009
o--; //值变成数值-2
s1 = -s1;  //值变成了数值-1
s2 = -s2;  //值变成了数值-1.1
s3 = -s3;  //值变成了NaN
b = -b;    //值变成了数值0
f = -f;    //变成了-1.1
o = -o;    //值变成了数值1

1.2.4函数

JavaScript 函数语法，JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。

函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

函数调用，函数中的代码将在其他代码调用该函数时执行。

当 JavaScript 到达 return 语句，函数将停止执行。如果函数被某条语句调用，JavaScript。
将在调用语句之后“返回”执行代码。函数通常会计算出返回值。这个返回值会返回给调用。

函数声明示例：

// 函数声明
function sum(a,b){
  return a + b
}
//函数声明之后，需要调用才能执行
// 函数调用：函数名(实参)
console.log(sum(1,2))  //3

1.3JavaScript的库

1.Day.js
一个极简的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持一样, 但体积仅有2KB。

npm install dayjs
import dayjs from 'dayjs'
 
dayjs(d).format('YYYY-MM-DD HH:mm') // => 2022-01-03 16:06

2.qs
一个轻量的 url 参数转换的 JavaScript 库

npm install qs
import qs from 'qs'
 
qs.parse('user=tom&age=22') // => { user: "tom", age: "22" }
qs.stringify({ user: "tom", age: "22" }) // => user=tom&age=22

3.js-cookie
一个简单的、轻量的处理 cookies 的 js API

npm install js-cookie
import Cookies from 'js-cookie'
 
Cookies.set('name', 'value', { expires: 7 })
Cookies.get('name') // => 'value'

4.animejs
一款功能强大的 JavaScript 动画库。可以与CSS3属性、SVG、DOM元素、JS对象一起工作，制作出各种高性能、平滑过渡的动画效果。

npm install animejs
<div class="ball" style="width: 50px; height: 50px; background: blue"></div>
 
import anime from 'animejs/lib/anime.es.js'
 
// 页面渲染完成之后执行
anime({
  targets: '.ball',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#F00',
  duration: 800
})

5.lodash.js
一个一致性、模块化、高性能的 JavaScript 实用工具库

npm install lodash
import _ from 'lodash'
 
_.max([4, 2, 8, 6]) // 返回数组中的最大值 => 8
_.intersection([1, 2, 3], [2, 3, 4]) // 返回多个数组的交集 => [2, 3]

1.4链式

链式的调用结果与一般的调用方式产生的结果一样，优点是：链式调用这种风格有助于简化代码的编写工作，让代码更加简洁、易读，同时也避免多次重复使用一个对象变量

示例如下：

var bird = {
    catapult: function() {
        console.log( "中午吃什么？" );
        return this;
    },
    destroy: function() {
        console.log( "吃小面" );
        return this;
    }
};
bird.catapult().destroy();

2.TypeScript

2.1TypeScript基础语法

不使用var，使用let或const申明变量，并加上类型说明，且作用域为块级即以{ }为界

//number类型
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;
let notANumber: number = NaN;
let infinityNumber: number = Infinity;
 
//Boolean类型
let flag: boolean = true;
 
//字符串
let name: string = 'abc'
 
//null和undefined
let num: number = undefined;
let u: undefined;
let u: void;

2.2TypeScript函数

在TS里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义行为的地方

TS中的函数大部分和JS相同,不同之处在于ts会给函数返回值和参数加上类型声明

function sayMyself(name: string, age: number): string {
    return `我是${name}，我今年${age}岁`;
}

const sayMyself = (name: string, age: number) => {
    return `我是${name}，我今年${age}岁`;
}

console.log(sayMyself('cheryl', 99));  // 我是cheryl，我今年99岁

function printMsg(warn: string): void {
    console.warn('警告信息', warn);
}

const printMsg = (warn: string): void => {
    console.warn('警告信息', warn);
}

printMsg('警告警告123');  // 警告信息 警告警告123

2.3TypeScript解构

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 输出10
console.log(b); // 输出20
 
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 输出10
console.log(b); // 输出20
console.log(rest); // 输出数组后面的值[30, 40, 50]
 
({a, b} = {a: 10, b: 20});
console.log(a); // 输出10
console.log(b); // 输出20
 
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});

2.4TypeScript高级特性

2.4.1交叉类型

组合多个类型组成新的类型，新类型包含了原类型的所有属性

示例如下（其中这里面的a对象就继承了接口定义的所有属性）：

interface A {
  name: string,
  age: number,
  sayName: (name: string) => void
}
interface B {
  name: string,
  gender: string,
  sayGender: (gender: string) => void
}

let a: A & B

// 都是合法的
a.age
a.sayName

2.4.2联合类型

联合类型是具有或关系的多个类型组合而成，只要满足其中一个类型即可。

interface A {
  name: string,
  age: number,
  sayName: (name: string) => void
}
interface B {
  name: string,
  gender: string,
  sayGender: (gender: string) => void
}

let a: A | B

// 可以访问
a.name

// 不可以访问
a.age
a.sayGender()

2.4.3类型保护

通过if等条件语句的判断告诉编译器，我知道它的类型了，可以放心调用这种类型的方法，常用的类型保护有typeof类型保护，instanceof类型保护和自定义类型保护

function BuildURL(param: string | number): any {
  if (typeof param === 'string') {
    return param.toUpperCase()
  }
}