JavaScript & TypeScript学习总结

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

JavaScript

JavaScript 是 Web 的编程语言。

所有现代的 HTML 页面都可以使用 JavaScript。

一、JavaScript是什么？

JavaScript 是一种运行在客户端的脚本语言 （Script 是脚本的意思），作为一门解释型语言，不需要被编译为机器码再执行，而是直接执行。
有多种方式可以运行JavaScript：
1.直接在浏览器的控制台编写运行；
2.可以编写一个独立的js文件，然后在Html文件中引入；
3.可以用编辑软件如Webstrom或VSCode编写独立的js文件，通过Node.js解释执行运行。

二、基本语法

1.大小写敏感

在js中，严格区分字母大小写，正如ABC和abc会被解析为两种完全不同的数据。

2.标识符

所谓标识符，就是指给变量、函数、属性或函数的参数起名字。
标识符可以是按照下列格式规则组合起来的一或多个字符：

• 第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）。
• 其它字符可以是字母、下划线、美元符号或数字。
• 按照惯例，ECMAScript 标识符采用驼峰命名法。
• 标识符不能是关键字和保留字符。
  例如：

aaa,_haha,$cc

驼峰命名法：

cqjtuName,cqjtuAge

3.注释

单行注释：

多行注释：

4.语句

语句末尾可加分号，也可不加分号。

5.关键字/保留字

关键字

保留字

6.变量

变量是用于存储信息的"容器"。
ECMAScript 的变量是松散类型的，所谓松散类型就是可以用来保存任何类型（如： String、Number、Boolean以及Object等）的数据。
在javascript中用var关键词声明变量
可以表示任何类型的数据。
声明变量：

使用等号向变量赋值：

也可通过声明变量时直接赋值：

当去掉var时声明变量，即为全局变量。

二、操作符

操作符也称运算符，通过运算符可以对一个或多个值进行运算并获取运算结果。

1.算术运算符

+、-、*、/、%等基本运算

2.赋值运算符

= += -+ *= /= %=
用于给变量赋值

3.关系运算符

< > <= >= == === != !==
其中===表示全等，要求值和数据类型都一致
关系(比较)运算符是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值(true / false)作为比较运算的结果。

4.逻辑运算符

&& || ！
用于测定变量或值之间的逻辑。

5.条件运算符

? :

举例：result=(age<18)?“年龄太小”:“年龄合适”;
执行流程：如果年龄小于18为true，则执行语句“年龄太小”，并返回执行结果，如果为false，则执行语句"年龄合适"，并返回执行结果。

三、语句

四、函数

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()
{
    // 执行代码
}

当调用该函数时，会执行函数内的代码。

JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

示例如下：
无参函数

带参函数

带返回值函数

五、对象

在 JavaScript中，几乎所有的事物都是对象。

对象定义的两种方式：

//方式一new
var o= new Object();		//生成空对象
o.name = 'Jason';			//设置对象的属性
o.age = 40;
o.job = 'Singer';
o.getName = function(){    //设置对象的方法/函数
    console.log(this.name);
};
//方式二字面量
var o = {
    name: 'Eason',
    age: 47,
    job: 'Singer',
    getName: function(){      
        console.log(this.name);
    }
};
console.log(o.age);
o.getName();

访问对象属性

// 访问对象属性的两种方法
person.lastName;
person["lastName"];

TypeScript

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。
TypeScript可以构建大型程序，并在任何浏览器、任何计算机和任何操作系统上运行，且是开源的。

一、TypeScript环境配置

有以下两种方式：
通过npm（Node.js包管理器）

npm -g install ts-node typescript

安装VS Code的TypeScript相关插件

二、变量声明

不使用var来声明变量，而是使用let或const，let和const是JavaScript里相对较新的变量声明方式。因为TypeScript是JavaScript的超集，所以它本身就支持let和const。

三、TS数据类型

类型	描述
number	任意数字
string	字符串
boolean	布尔值true或false
字面量	限制变量的值就是该字面量的值
any	任意类型
unknown	类型安全的any
void	没有值（或undefined）
never	不能是任何值
object	任意的JS对象
array	任意JS数组
tuple	TS新增类型，固定长度数组
enum	枚举，TS中新增类型

四、函数

1.定义函数

使用function关键字

//命名函数，有完整的参数和返回类型。可以不用，TS将自动进行类型推断但推荐使用！
function add(x: number, y: number): number {
  return x + y;
}
//匿名函数
let myAdd = function(x: number, y: number): number { return x + y; };
console.log(myAdd(1, '2'));//error
console.log(myAdd(1));//error
console.log(typeof myAdd(1, 2));//number 

2.可选参数

意味着调用该函数时，可选参数部分可以选择输入，也可选择不输入

//可选参数，必须放在必要参数后
function greeting(firstName: string, lastName?: string) {
  if(lastName) {
      return `Hello ${firstName} ${lastName}!`;
  }
  return `Hello ${firstName}!`;
}
console.log(greeting('YiBo'));
console.log(greeting('YiBo', 'Wang'));
console.log(greeting('YiBo', 'Wang', 'Xiaozhan'));//参数数据个数不一致，error!

3.默认参数

意味着调用该函数时，默认参数部分已经有默认值，如果传入参数时，没有该属性，则该属性的内容便是默认值，否则便是传入的参数。

//默认参数，不必在必要参数后
function greeting(firstName: string, lastName = 'Wang') {
  return `Hello ${firstName} ${lastName}!`;
}
console.log(greeting('YiBo'));//第二个参数为默认值
console.log(greeting('YiBo', 'Zhan'));
console.log(greeting('YiBo', 'Wang', 'Xiao'));//参数个数不一致，error!
          

4.剩余参数

意味着在调用该函数时，并不知道要传进来多少个参数，此时便可以使用剩余参数，可以为0个，也可以为任意个。

function greeting(firstName: string, ...restName: string[]) {
  return `Hello ${firstName} ${restName.join(' ')}!`;
}
console.log(greeting('Dawa', 'Erwa', 'Sanwa', 'Erdan', 'Siwa', 'Qiwa', 'Xiaojingang'));
console.log(greeting('huluwa'));

五、类

1、类的创建

class Person {
  // 属性定义
  // 实例属性
  name: string = "cqjt";
  // 静态属性 内建或自定义，无需new即可使用
  static age: number = 18;
  // 只读属性
  readonly sex: string = "男";
  // 方法定义
  haha() {
    console.log("hahahahahha");
  }
  //静态方法
  static sayhello(){
      console.log("hello")
  }
}

2、构造函数

class Dog {
  name: string;
  age: number;
  // 构造函数
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}
//new 一个对象
const dog = new Dog("柴犬", 1);
console.log(dog);

3、继承

可以通过extends关键字继承其它类，从而成为其子类

class Animal {
  name: string;
  age: number;
  // 构造函数
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  bark() {
    console.log(this.name);
  }
}
// 继承
class Cat extends Animal {
  bark() {
    console.log("this is cat");
  }
  run() {
    console.log(`${this.name} is running`);
  }
}

const cat = new cat("咪咪", 2);
console.log(cat);
cat.bark();
cat.run();

4.类的属性和函数的访问权限

类中的属性和函数都有访问权限,TypeScript 支持 3 种不同的访问权限。

• public（默认） : 公有，可以在任何地方被访问。

• protected : 受保护，可以被其自身以及其子类访问。

• private : 私有，只能被其定义所在的类访问。

六、模块

对于大型的项目，我们一般使用模块进行管理。
模块是在其自身的作用域里执行，并不是在全局作用域，这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用 export 导出它们。类似地，我们必须通过 import 导入其他模块导出的变量、函数、类等。