TypeScript+Vue整理

TypeScript可以编译出纯净、 简洁的JavaScript代码，并且可以运行在任何浏览器上、Node.js环境中和任何支持ECMAScript 3（或更高版本）的JavaScript引擎中。下面我们将从最基础的了解typescript。

• 安装typescript
  yarn global add typescript
• 我们先从类型，接口，类简单的举一个例子看看他们。
  1、类型
  

  const foo = (x:string,y:number) => {
      console.log(x)
  }
  foo("s",2)
  
  //编译成es5
  var foo = function (x, y) {
      console.log(x);
  };
  foo("s", 2);

  2、接口

  interface Foo {
      name: string;
      age: number;
  }//接口类型的定义
  const child = (x:Foo) => {
      console.log(x.name+","+x.age)
  }
  child({ name: "hou", age: 12 })
  
  //编译成es5
  var child = function (x) {
      console.log(x.name + "," + x.age);
  };
  child({ name: "hou", age: 12 });

  3、类

  interface Foo {
      name: string;
      age: number;
  }
  class Fzz implements Foo { //实现接口
      name: string;
      age: number;
      constructor(n:string) {
          this.name = n
      }
      sayName() {
          return this.name
      }
  }
  const fzz = new Fzz("hou") //实例化类，react自动给你实例化了
  fzz.sayName()
  
  //编译成es5
  var Fzz = /** @class */ (function () {
      function Fzz(n) {
          this.name = n;
      }
      Fzz.prototype.sayName = function () {
          return this.name;
      };
      return Fzz;
  }());
  var fzz = new Fzz("hou");
  fzz.sayName();