JavaScript&TypeScript学习总结

阿布布啊

已于 2022-07-03 15:05:03 修改

阅读量301

点赞数

文章标签： javascript typescript 学习

于 2022-07-03 14:58:26 首次发布

本文链接：https://blog.csdn.net/weixin_45970808/article/details/125582399

版权

JavaScript&TypeScript学习总结

一、什么是JavaScript&TypeScript？
二、运行环境
三、JavaScript&TypeScript学习总结
总结

一、什么是JavaScript&TypeScript？

JavaScript 是一种轻量级的解释性脚本语言，可嵌入到 HTML 页面中，在浏览器端执行，能够实现浏览器端丰富的交互功能。
TypeScript 是 Microsoft 开发和维护的一种面向对象的编程语言，是 JavaScript 的超集，包含了 JavaScript 的所有元素，可以载入 JavaScript 代码运行，并扩展了 JavaScript 的语法。

二、运行环境

JavaScript 是基于对象和事件驱动的，无需特定的语言环境，运行JavaScript有多种方式，可以直接在浏览器的控制台编写运行；也可以编写一个独立的js文件，然后在Html文件中引入，这两种方法由浏览器解释执行，是以前唯一的方式。也可以用编辑软件如Webstrom或VSCode编写独立的js文件，由安装好的Node.js解释执行运行。
由于TypeScript最终会被编译成JavaScript代码，所以我们必然需要对应的编译环境；

三、JavaScript&TypeScript学习总结

1、语法

JavaScript是弱类型编程语言,定义变量都使用 var 定义,与 Java 这种强类型语言有区别。在定义后可以通过 typeOf() 来获取JavaScript中变量的数据类型.
TypeScript 中语法和JavaScript中的语法相差不大
[1] 字面量：是一个固定值，包括整数、浮点数以及字符串等等；数字可以直接输入；字符串可以使用单引号或者是双引号；
[2]变量：使用关键字 var 来定义变量，使用等号来为变量赋值
[3]操作符：使用算术运算符来计算值:
[4]注释：使用双斜杠//注释非执行命令部分
TypeScript 还支持多行注释 /* */
[5]数据类型：数字，字符串，数组，对象等等
[6]函数：JavaScript 语句可以写在函数内，函数可以重复引用：引用一个函数 = 调用函数(执行函数内的语句)
[7]字符集：使用 Unicode 字符集

注：
变量是一个名称，字面量是一个值；
JavaScript 中，常见的是驼峰法的命名规则，当变量名或函式名是由一个或多个单词连结在一起，而构成的唯一识别字时，第一个单词以小写字母开始；第二个单词的首字母大写或每一个单词的首字母都采用大写字母，如 lastName ，而不是lastname。

3、变量

在JavaScript中，变量同样是用来存储数据的，是一个用来存储信息的容器，也就是变量的值不是固定的，是动态的可变的。
js中的变量用于保存文本值，跟变量赋值的时候，使用双引号“”来给变量的值赋为文本值，普通的的数值直接在等号后输入即可；
在JavaScript中，变量是通过关键字来声明的，在15年之前，都是使用var关键字来声明的，现在，可以使用const 来定义常量，用于定义那些在运算过程中不会发生变化的； let 关键字用于定义限定范围内作用域的变量，也就是let声明的变量只是在其声明的块或子块中可用，允许声明一个作用域被限制在块级中的变量、语句或者表达式，像是在function函数中局部变量使用let关键字声明，避免变量名冲突。
JavaScript 语言跟其他语言不一样之处又在于它可以重复声明变量或者是函数，不会报错。当重复声明变量的时候，会自行判断这个变量是否已经被声明了，如果已经被声明，那么重复声明会被跳过，不再执行声明的操作，也就是不会因为变量名重复而报错了。
当向未声明的 JavaScript 变量分配值时，该变量将被自动作为 window 的一个属性
如：carname=“Volvo”;

4、函数

函数的本质就是一个代码块，一个完整的代码可以被拆分成许多代码块。
声明函数格式：

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

当这个函数被调用的时候就会执行该函数内的代码

注：
在函数内部声明的变量都是局部变量，只能在
函数内部访问，也就是在不同的函数内部可以声明变量名相同的有效变量，不会引起冲突
在函数外面声明的变量是全局变量，整个网页的所有函数都可以对它进行访问

5、对象

在真实生活中，一个人、一辆车、一个苹果都是一个对象，在javascript中，对象就是拥有属性和方法的数据，就比如定义apple这一个对象，它有color、size、weight等这些属性；
对象可以是一个变量，但是一个对象也可以包含多个变量值，每一种属性就可以是一个变量，对象的属性并不唯一，一个对象可以含义多个属性，
在JavaScript或TypeScript中就是一个对象可以多个变量，即对象是变量的容器，跟变量是数据的容器一样
JavaScript访问对象的方法：

name = person.fullName();//法一
name = person.fullName;//法二

创建一个对象

<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
document.getElementById("demo").innerHTML =
	person.firstName + " 现在 " + person.age + " 岁.";
</script>

TypeScript中创建对象的方法：

class Site { 
   name():void { 
      console.log("abu") 
   } 
} 
var obj = new Site(); 
obj.name();

编译后生成的 JavaScript 代码如下：

var Site = /** @class */ (function () {
    function Site() {
    }
    Site.prototype.name = function () {
        console.log("abu");
    };
    return Site;
}());
var obj = new Site();
obj.name();

6、数组

在ECMAScript中数组与其他大多数的语言的数据有着很大区别，ECMAScript 数组的每一项可以保存任何类型的数据，也就是说可以同时保存保存对象、变量、数值在同一个的数组里面。
创建数组的时候可以创建非空数组，但是创建空数组在web开发中更为适用；
数组的方法有很多
[1]元素联合

var human = ['man', 'female'];

[2]堆栈方法:在ECMAScript 为数组专门提供了 push() 和 pop() 方法，push是推进数组元素，pop是弹出最后一项数组元素，利用了栈这一个数据结构的先进后出的原则

var sex = []; // 创建一个数组
var count = sex.push('man'); 
console.log(count); 
sex.push('female'); // 末尾推入另一项
console.log(sex); 
var item = sex.pop();

[3]队列方法：采用后进后出的访问的规则，队列在列表的末端添加项，从列表的前端移除项。使用push推进新的项，shift移除数组中的第一个项并返回该项，同时将数组长度减1；

var sex = []; // 创建一个数组
var count = sex.push('man'); 
console.log(count); 
sex.push('female'); // 末尾推入另一项
console.log(sex); 
var item = sex.shift();

[4]分片方法:基于当前数组中的一或多个项创建一个新数组。能够删除、插入、替换数组中的项。

var sex = ['man', 'female'];
var removed = sex.splice(0,1); // 删除第一项
console.log(removed);
removed = sex.splice(1, 0, 'female'); // 从位置 1 开始插入1项
console.log(sex);

TypeScript中定义数组的方法不唯一，跟JavaScript有所不同，但是同样可以使用array对象创建数组

//TypeScript代码
var arr_names:number[] = new Array(4)  
 
for(var i = 0; i<arr_names.length; i++) { 
        arr_names[i] = i * 2 
        console.log(arr_names[i]) 
}
//编译后的JavaScript代码
var arr_names = new Array(4);
for (var i = 0; i < arr_names.length; i++) {
        arr_names[i] = i * 2;
        console.log(arr_names[i]);
}

7、JavaScript闭包

在这之前，只是提了JavaScript可以定义是局部变量或全局变量，但是在私有变量中需要用到闭包，闭包是的私有变量变成可能。
闭包的本质就是在提供了一个在外部访问另一个函数内部局部变量的方式，就像在面向对象中访问私有属性一样，使用闭包这一种实现方式来调用一个对象中的私有属性。

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

8、TypeScript 类

TypeScript 是面向对象的 JavaScript，使用类描述所创建的对象共同的属性和方法，支持面向对象的所有特性，比如类、接口等。、
TypeScript 类定义方式如下：

class class_name { 
    // 类作用域
}

继承类：TypeScript 支持继承类，即在创建类的时候继承一个已存在的类，这个已存在的类称为父类，继承它的类称为子类

class Shape { 
   Area:number 
   
   constructor(a:number) { 
      this.Area = a 
   } 
} 
 
class Circle extends Shape { 
   disp():void { 
      console.log("圆的面积:  "+this.Area) 
   } 
}
  
var obj = new Circle(223); 
obj.disp()

注：例字中创建Shape 类为父类，Circle 类继承了 Shape 类，Circle 类可以直接使用 Area 属性；
需要注意TypeScript 不支持一个子类继承多个父类，但支持多重继承

静态类：定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。

class StaticMem {  
   static num:number; 
   
   static disp():void { 
      console.log("num 值为 "+ StaticMem.num) 
   } 
} 
 
StaticMem.num = 12     // 初始化静态变量
StaticMem.disp()       // 调用静态方法

访问控制修饰符：TypeScript 中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。
public : 公有，可以在任何地方被访问。
protected : 受保护，可以被其自身以及其子类访问。
private : 私有，只能被其定义所在的类访问

class Encapsulate { 
   str1:string = "hello" 
   private str2:string = "world" 
}
 
var obj = new Encapsulate() 
console.log(obj.str1)     // 可访问 
console.log(obj.str2)   // 编译错误， str2 是私有的,不能被访问

TypeScript还可以使用类实现接口，通过关键字 implements的使用来定义一个接口，将 interest 字段作为类的属性使用。

注：接口不能转换为 JavaScript，只是 TypeScript 的一部分

9、TypeScript模块

对于大型的项目，我们需要使用模块进行管理。模块在其自身的作用域里执行，而不是在全局作用域里；这意味着定义在一个模块里的变量，函数，类等等在模块外部是不可见的，除非你明确地使用export形式之一导出它们。相反，如果想使用其它模块导出的变量，函数，类，接口等的时候，你必须要导入它们，可以使用 import形式之一。
模块是自声明的：两个模块之间的关系是通过在文件级别上使用imports和exports建立的。两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。
模块使用模块加载器去导入其它的模块。在运行时，模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。大家最熟知的JavaScript模块加载器是服务于 Node.js 的 CommonJS 和服务于 Web 应用的 Require.js，此外还有有 SystemJs 和 Webpack。
export 导出模块语法格式：

// 文件名 : SomeInterface.ts 
export interface SomeInterface { 
   // 代码部分
}

import 导入模块语法格式：

import someInterfaceRef = require("./SomeInterface");

总结

经过这短暂对JavaScript&TypeScript的学习，发现这两门语言其他编程语言一样，都是在学习语法、数据类型、类、对象这些然后不断深入学习。而且JavaScript&TypeScript作为脚本语言，语法简单，上手快，连编译器可能都不需要安装就可以直接在浏览器运行了，不需要像c/C++这种基础语言学习周期极长。在掌握一门编程语言后，会发现其实编程语言之间的共同性是很强的，学会了一门语言，再去学习其他的编程语言，将会简单许多。