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.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()
• 静态类：定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用。
• 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 的一部分
• 7.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");
  • 8.总结
    经过这短暂对JavaScript&TypeScript的学习，发现这两门语言其他编程语言一样，都是在学习语法、数据类型、类、对象这些然后不断深入学习。而且JavaScript&TypeScript作为脚本语言，语法简单，上手快，连编译器可能都不需要安装就可以直接在浏览器运行了，不需要像c/C++这种基础语言学习周期极长。在掌握一门编程语言后，会发现其实编程语言之间的共同性是很强的，学会了一门语言，再去学习其他的编程语言，将会简单许多。