TypeScript基本语法

用TypeScript的目的是什么?

TypeScript最大的目的是让程序员更具创造性，提高生产力，它将极大增强JavaScript编写应用的开发和调试环节，让JavaScript能够方便与编写大型应用和进行多人协作;

TypeScript 和 JavaScript 的对比

• TypeScript 是一个应用程序级的 JavaScript 开发语言。（这也表示 TypeScript 比较牛X,可以开发大型应用，或者说更适合大型应用。）
• TypeScript 是 JavaScritpt 的超集，可以编译成纯 JavaScript 。比较像 Less 和 Sass，我们可以用更好的代码编写方式来进行编写，最后还是友好生成原生的 JavaScript 语言。
• TypeScript 跨浏览器、跨操作系统、跨主机、且开源。由于最后它编译成了 JavaScript 所以只要能运行 JS的地方，都可以运行我们写的程序，设置在 node.js 里。
• TypeScript 始于JavaScript , 终于JavaScript。遵循 JavaScript 的语法和语义，所以对于我们前端从业者来说，学习起来的的心用手，并没有太大的难度。
• TypeScript可以重用JavaScript代码，调用流行的 JavaScript库。
• TypeScript提供了类、模块和接口，更易于构建组件和维护。

TS语法初始化一个项目

1.初始化项目:进入你的编程文件夹后，可以使用npm init -y来初始化项目，生成package.json文件。

2.创建tsconfig.json文件:在终端中输入tsc –init：它是一个TypeScript项目的配置文件，可以通过读取它来设置TypeScript编译器的编译参数。

3.安装@types/node模块,使用npm install @types/node –dev-save进行安装。这个主要是解决模块的声明文件问题。

4.编写HelloWorld.ts文件，然后进行保存，代码如下。

var a:string = "HelloWorld"
console.log(a)

5.在Vscode的任务菜单下，打开Terminal下的Run Build Task，然后选择tsc：build-tsconfig.json，这时候就会生成一个helloWorld.js文件

"use strict";
var a = 'helloworld';
console.log(a);

6.在终端中输入node helloWorld.js就可以看到结果了。

TS中函数的定义方式及传参形式

• 函数的定义

1. 函数声明: function add(n1:number,n2:number):number{return n1 + n2}
2. 函数表达式：const add = function(n1:number,n2:number){return n1 + n2}
3. 箭头函数: const add = (n1:number,n2:number):number => n1 + n2
4. 使用接口来定义函数 : 在这种函数实现接口的情形下，我们称这种定义为callable

   interface Complex {
   	(bar?:number,...others:boolean[]):number;
   }
   let foo:Complex
   这种定义方式在可复用的函数声明中非常有用。

---

interface CallMeWithNewToGetString{
	new():string
}
let foo:CallMeWithNewToGetString
new foo();
这个在构造函数的声明时非常有用。

---

• 传参形式:基本传参 可选传参 默认传参 剩余传参
• 函数的重载

数组

• let arr1:number[] //声明一个数值类型的数组
• let arr2:Array<string> //声明一个字符串类型的数组
• let arr3:boolean[] // 声明一个布尔值的数组
• 当类型和数量不确定时，使用元数组 let arr4:[number,string]
• let arr5:any[] 都未知的情况下，第一个数组

接口类型

• 普通接口 提高代码复用率，使用此接口类型

  interface Name {
  	first:string
  	second:string
  }
  
  let personName:Name = {
  	first:'张'
  }
  // Property 'second' is missing in type '{ first: string; }' but required in type 'Name'

• 内联接口

  var personName:{ first: string, second: string } = {
      first: '张三'
  } // Property 'second' is missing in type '{ first: string; }' but required in type 'Name'

• 索引接口

  interface NestedCSS {
    color?: string;
    nest?: {
      [selector: string]: NestedCSS;
    }
  }
  
  const example: NestedCSS = {
    color: 'red',
    nest: {
      '.subclass': {
        color: 'blue'
      }
    }
  }

类

• 修饰符 public protected private
• 只读属性 readonly

  class Person{
  	public sex:string
  	protected name:string
  	private age:number
  	constructor(sex:string,name:string,age:number){
  		this.sex = sex
  		this.name = name
  		this.age = age
  	}
  	public sayHello(){
  		console.log('helloworld')
  	}
  	private sayLove(){
  		console.log('i love you')
  	}
  }
  
  let woman:Person = new Person('女','新垣结衣',18)

命名空间 namespace

• 当声明两个相同的类时，使用namespace进行包裹，避免发生冲突

  namespace Biology {
    export interface Animal {
    name: string;
    eat(): void;
  }
  export class Dog implements Animal {
      name: string;
      constructor(theName: string) {
          this.name = theName;
       }
      eat() {
          console.log(`${this.name} 吃狗粮。`);
           }
       }
   
  export class Cat implements Animal {
  	name: string;
  	constructor(theName: string) {
  	this.name = theName;
   }
  
   eat() {
  	console.log(`${this.name} 吃猫粮。`);
   }
  }
  }
   
  let dog: Biology.Animal;
  dog = new Biology.Dog('狗狗');
  dog.eat();