typeScript

typeScript

typescript是微软发布的，严格型的javascript语言编码方式

数据类型

在TS中，编辑函数变量不在是弱类型型语言形式，必须声明变量的数据类型，无论是形参实参还是函数返回参数

function 函数名()：返回值类型{
	...
	return 返回值；
	//实际的返回值的类型必须与声明的返回值的类型保持一致
}

如果函数有参数：

function 函数名(形参1：数据类型,形参2:数据类型,...){
	...
}

如果函数既有形参又有返回值：

function 函数名(形参1：数据类型,形参2：数据类型...):数据类型{
	...
	return 返回值；
}

可选参数：

• 表示参数可以没有，将来如果没有传入这个参数，默认为undefined

function 函数名(形参1：数据类型,形参2 ?：数据类型){
	......
}

• 默认值：表示如果函数未传递该参数，就使用默认值

function 函数名(形参1：数据类型,形参2：数据类型=默认值){
	......
}

• 实参的个数不确定，使用收集符操作

function 函数名(形参1：数据类型,形参2：数据类型,...数据名：数据类型[]){
	......
}

重载

重载：指的是保持函数名相同，但是参数列表不同，然后函数根据传入的参数的不用执行不同的逻辑
重写：重写指的是父类的同名方法在子类中重新实现称为重写

TS中要实现重载：

• 声明多个同名函数只要形参列表不同即可，但是不要实现函数体。
• 定义一个可实际执行多种任务的函数来支持上面的种重载的情况

function 函数名():void
function 函数名(形参：数据类型)：void
强调：只是声明不包含定义

void表示的是这个函数没有返回值，如果函数有返回值，就将void改为返回值的数据类型

 function 函数名(形参？：数据类型){
 	if(形参==undefined){
 		//没有传递任何实参
 		//执行该操作
 	}else{
 		//说明用户调用第二个版本，执行另一项操作
 	}
}

示例：

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

class类

class类是ES6中定义的方式在这里也可以使用，但是还是那个说法，对数据类型必须指定；

• 定义：

class 类名{
	//属性
	属性名1：数据类型=初始值;
	属性名2：数据类型=初始值;
	//构造函数
	constructor(形参1:数据类型,形参2:数据类型){
		this.属性名1=形参1;
		this.属性名2=形参2;
	}
	方法名():数据类型{
		...
	}
}

类型的继承

使用方式:

class 子类名 extends 父类名{
	子类型属性名:数据类型=初始值；
	constructor(形参1：数据类型,形参2:数据类型,形参3:数据类型){
		super(形参1,形参2)；
		this.子类型属性名=形参3;
	}
	方法名:数据类型(){
		方法体
	}
}

访问修饰符

参照Java理解：

• public 共有的，公共的，所有人可用
• private 私有的，只有自己可用
• protected 表示受保护的，只有自己以及自己的后代可用
  示例：

class Father{
	protected moneyProtected:string=“爸爸和儿子偷偷吃零食的钱";
	fatherPay():void{
		/*class自己的方法，可访问自己的任何属性*/
		console.log(`爸爸花${this.moneyProtected}给自己买了包烟`);
	}
}
class Son extends Father{
	sonPay():void{
		//孩子的方法可访问爸爸的public和protected的属性，无法访问爸爸private的属性
		console.log(`儿子花${this.moneyProtected}给自己买了块巧克力`);
	}
}

// 私有的
class Father{
	private moneyProtected:string=“爸爸和儿子偷偷吃零食的钱";
	fatherPay():void{
		/*class自己的方法，可访问自己的任何属性*/
		console.log(`爸爸花${this.moneyProtected}给自己买了包烟`);
	}
}

接口

参考Java理解

• 定义方式：interface I接口名

interface  I接口名{
   ——合同规定的属性名: 类型;
   规定的方法名(参数:数据类型):返回值;
}

• 实现接口：implements

class 类型名 implements  I接口名{
	// 必须包含接口中规定的属性和方法
}

//领导要求
//将来的敌机类型Plane中必须包含三个属性和两个方法
interface IPlane{
  x:number
  y:number
  score:number
  fly():void;
  getScore():void;
}
//下属必须按领导要求实现class
class Plane implements IPlane{
  x: number=0;
  y: number=0;
  score: number=0;
  constructor(x:number,y:number,score:number){
    this.x=x;
    this.y=y;
    this.score=score;
  }
  fly(): void {
    console.log(`飞到${this.x}, ${this.y}位置`)
  }
  getScore(): void {
    console.log(`击落敌机，得${this.score}分`);
  }
  toString(){
    return `{x:${this.x},y:${this.y},score:${this.score}}`;
  }
}
var p=new Plane(20,100,5);
console.log(p.toString());
p.fly();
p.getScore();

模块化开发

旧js中，所有js文件，都要集中引入到.html文件中，才能运行
优点：想用啥用啥，不需要经过第三方

使用方式：

只导出一个类型/接口:默认导出
– 先创建类型/接口
– 再: export default类型名/接口名
– 引入: import 类型名from “相对路径”
导出多个类型/接口:
– 先创建多个类型/接口
– 再: export {类型名, … }
– 引入: import {类型名, … }from “相对路径

//引入Student class
import Student from "./2_class"

import { Son } from "./3_public"

var hmm=new Student("Han Meimei",12);
console.log(hmm);
hmm.intr();

var s=new Son();
s.pay();