TypeScript

准备

为啥学TS

ts是为了解决js在开发大型项目时的天生缺陷的js超集。他使js拥有像java、c#、c++的一下高级语言的功能，如强类型变量、继承、重载、类、接口、多态、抽象类等功能。

安装

npm i -g typescript

编译（生成为同名的js文件）

tsc <ts文件>

配置自动编译

第一步：生成ts配置文件tsc --init

第二步：修改tsconfig.json的outdir参数（生成js文件的位置）

第三步：点击任务【任务】->【运行任务】->【tsc】->【监视tsconfig.json】

类型

boolean 布尔型
- var boo:boolean;
number 数字型
- var num:number;
string 字符串型
- var str:string;
array 数组类型
- var arr:number[];
- var arr:Array<string>;
tuple 元组类型
- var tup:[string,number,string]=[‘12’,15,‘58’];
enum 枚举类

enum Flat{
    success=1,
    fail=0
}

var c:Flat = Flag.success;

any 任意类型
- var an:any;
null 与 undefined
- never的子集
- var a:null;
- var b:undefined;

void 类型

function fn():void{
    //表示没有返回值
}

never 其他类型
- 表示重来都不会出现的值
同时使用定义多个类型
- var num:number | undefined;
强制类型转换
- Number()
- Boolean()
- ….

函数定义

普通函数

function run(name:string):string{
    console.log(name);
    return "ok";
}

var fn = function():string{
    return "ok";
}

可选参数

function run(name?:string):string{
    console.log(name);
    return "ok";
}

注意：可选参数放到后边。

默认参数

function run(name:string='张三'):string{
    console.log(name);
    return "ok";
}

剩余参数

function sum(...result:number[]):void{
    console.log(result);
}

函数重载

java重载：重载指的是两个或者两个以上的同名函数，但他们参数不同，这是会出现函数重载的情况。

ts重载：通过一个函数提供多个功能。

function fn(name:string):string;

function fn(age:number):number;

function fn(str:any):any{
    if(typeof str == "string"){
        return str;
    }else{
        return str;
    }
}

ES5的类与ts的静态方法与继承

ES5的类

function Per(){
    this.name='李四';
    this.age=25;
}
/*
注意：原型链上面的属性与方法会被多个实例共享，构造函数则每次new都会创建相同的独立的对象。
*/
Per.prototype.sex = '男';
Per.prototype.print = function(){/*实例方法*/
    console.log(
        this.name,
        this.age,
        this.sex
    )
}
Per.test = function(){
    /*静态方法*/
    alert('这是一个静态方法');
}
/*
    实例方法：表示必须new之后才可以使用
    静态方法：表示不需要实例也可以使用。
*/

ES5继承

function Fn(name){
    this.name=name;
}
Fn.prototype.getName = function(){
    console.log(this.name);
}
/------------------------------
function Jc(){
    Fn.call(this);/*对象冒充继承，只能基础实例下的属性不能继承原型链上的属性*/
}
var a = new Jc();
log(a.getName)//err not default function
//------------------------------
function Jc(){
    
}
Jc.prototype = new Web();/*原型链继承，可以完全继承，但是不能给继承的对象传参*/
//------------------------------
/*组合继承，通过冒充继承来继承构造函数的属性与发法，通过原型链继承被继承的原型链*/
//------------------------------

ts定义类

class Fn{
    public name:string;//public可以省略
    //属性
    
    constructor(name:string){//构造函数 new的时候触发
        this.name = name;
    }
    
    getName():void{
        log(this.name);
    }
    //方法
}

ts继承

class Fnc extends Fn{//继承上面的类
    constructor(name:string){
        super(name);//调用继承的构造函数
    }
}
/*
    定义属性的三个修饰符：
        public      公有，没有限制*
        protected   保护，外面不可以访问
        private     私有，只能本类访问
*/

定义静态方法

class Fn{
    constructor(){
    }
    
    static sex = '静态属性';
    
    static print(){
        /*静态方法*/
        log("静态方法");
    }
}

fn.print();//打印：静态方法

多态

定义：父类定义一个方法不去实现，让继承的子类去实现，每个子类有不同的表现。

抽象类与抽象方法

定义：

ts中的抽象类不能直接实例化，他只能做为其他类的父类。
通过abstract来定义一个抽象类或抽象方法。
abstract抽象方法只能放在抽象类里。
抽象类和抽象方法用来定义标准的，他的子类必须实现抽象方法。

接口

定义：只定义的传值、数量、类型、返回值，不进行实现，这就是接口的定义。

属性接口

//普通约束
function fn(obj:{a:number}):void{
    //传值必须为对象，并且包含a数字
}

//批量约束
interface Full{
    //定义约束对象
    a:string;
    b:number;
}

function(obj:Full){
    //必须传入只包含a与b的对象
}

可选属性接口

interface Full{
    //定义约束对象
    a:string;
    b?:number;
}

function(obj:Full){
    //必须传入只包含a与b的对象,b可以不传，a必须传
}

类类型接口

定义：对类进行限制，与抽象类很相似。

interface Animal{
    name:string;
    eat(str:string):void;
}

class Dog implements Animal{
    //结构必须与定义的一样
    name:string;
    constructor(){
        this.name = "狗";
    }
    
    eat(){
        console.log(this.name+"吃肉");
    }
}

接口继承

interface In{
    name:string;
    fn():void;
}

interface InExt extends In{
    age:number;
    fn1():void;
}

class Pre implements InExt{
    //必须实现inExt与In的规定
    name:string;
    age:number;
    constructor(){
        
    }
    
    fn():void{
        
    }
    
    fn1():void{
        
    }
}

泛型

定义：通过一个字母来代替一个类型，可以配合接口，类一起用。

function getData<T>(value:T):T{
    return value;
}

getData<string>('1234');

快速上手TypeScript