TypeScript 基础知识与语法

TypeScript基础知识

  TypeScript是微软开发的一款开源的编程语言，是JavaScript的超级，遵循最新的ES5、ES6规范，扩展了JavaScript的语法。

**个人感受，TypeScript与JavaScript最大的区别是增加了数据类型的校验，和封装的各种接口。

安装： npm install -g typescript

• 数据类型

• 函数

1. 函数定义

//1.无参数，返回值类型确定
function run():string{
return “无参数，返回值确定”
}
var fun=function run():number{
return 123;
}

//2. 有参数，返回值类型确定
function getInfo(name:string,age:number):string{
return "名字："+this.name
}
var fun=function getInfo(name:string,age:number):number{
return this.number
}

//3. 返回值类型不确定/无返回值
function run():void{
console.log("---")
}

2.可选参数，默认参数与扩展参数

可选参数必须配置在参数的最后面；
默认参数位置随意；
扩展参数放置于最后

function myInfo(Name:string,age:number=18,middleName?:string):void{
console.log("个人信息")
}

function getNum(a:number,b:number,...others:number[]):number{
var sum=a+b;
for(let i of others){
sum+=i
}
return sum
}

3. 函数重载
   typescript中的重载：两个或两个以上函数同名时，通过为同一个函数提供多个函数类型定义来实现多种功能的目的

function getInfo(name:string):string{
return this.name
};

function getInfo(age:number):number{
return this.age
};

4. 箭头函数等，与ES6相同

• 类
  1.类定义

// ts中类的定义
class Person{
    name:string; //属性 前面省略了public关键词
    constructor(name:string){  //构造函数  实例化类的时候触发的方法
        this.name=name;
    };
    getName():void{
        console.log(this.name); 
    };
    setName(name:string){
        this.name=name
    }
}

2. 类的继承

//extend super
class Web extends Person{
    constructor(name:string){
        super(name); /*初始化父类的构造函数*/
    }
}

3. 修饰符

修饰符	含义
public	公有 在类、子类、类外部均可以访问
protected	保护类型 在类、子类可以访问，类外部无法访问
private	私有 只能在类内部访问，子类和类外部均无法访问

4. 多态类
   含义：父类定义一个方法不去实现，让继承它的子类去实现，每一个子类有不同的表现

class Food{
name:string;
constructor(name:string){
this.name=name;
}
eat(){
console.log("吃的食物")
}
}
//继承的类
class Fries extends Food{
constructor(name:string){
super(name);
}
eat(){
console.log(this.name+"吃薯条")
}
}

var p=new Fries("小红")

5. 抽象类
   含义：用abstract关键字定义抽象类和抽象方法，作为其他类继承的基类。
   ***抽象类不能直接被实例化。abstract抽象方法只能放在抽象类里，且在派生类中必须被实现。

//抽象类
abstract class Food{
public name:string;
constructor(name:string){
this.name=name;
};
abstract eat():any;
}
//继承的类
class Fries extends Food{
constructor(name:string){
super(name);
}
eat(){ //抽象方法必须被实现
console.log(this.name+"吃薯条")
}
}

• 接口

接口批量定义了行为和动作的规范，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等。

• 泛型

实现类、接口、方法的复用性，以及对不特定数据类型的支持（类型校验）。
**要求：传入的参数和返回的参数类型一致

function getData<T>(value:T):T{
return value;
}
//使用
getData<number>(234)

1. 泛型类

// 泛型类
//类型一:普通泛型类
class MinClass<T>{
    public list:T[]=[];
    add(value:T):void{
        this.list.push(value);
    };
    min():T{
        var minNum=this.list[0];
        for(var i=0;i<this.list.length;i++){
            if(minNum>this.list[i]){
                minNum=this.list[i]
            }
        };
    return minNum
}

var m1=new MinClass<number>();  //实例化并且制定了类的T代表类型只能为number
m1.add(3)

// 类型二：把类当做参数的泛型类，指定传入的参数只能是类数据

class MysqlDb<T>{
    add(info:T):boolean{
        console.log(info);
        return true
    };
    update(info:T,id:number):void{
        console.log(info);
        console.log(id);
    }
}
// 想给user表增加数据
// 1. 定义user类，进行映射
class User{
    username:string | undefined;
    password:string | undefined;
}

var u=new User();
u.username="战士"
u.password="123"

var Db=new MysqlDb<User>();
Db.add(u)

• 命名空间

【区别】
命名空间：ts的内部模块，主要用于组织代码，避免命名冲突
模块：ts的外部模块的简称，侧重代码的复用，一个模块里可能会有多个命名空间

使用：namespace包裹，export暴露

namespace A{
    interface Animal{
        name:string;
        eat():void
    }
    export class Dog implements Animal{
        name:string;
        constructor(name:string){
            this.name=name
        }
        eat(){
            console.log("---");
        }
    }
}

var d1=new A.Dog("wo")
d1.eat()

• 模块和模块化

**与ES6几乎相同

• 装饰器

装饰器是一种特殊类型的声明，它能够被附加到类声明、方法、属性或参数上，可以修改类的行为。
装饰器就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。