typescript 建模 typescript implements

typescript中的数据类型

typescript为了使代码编写更加规范，更有利于维护，增加了类型校验，在typescript中主要给我们提供了如下数据类型：

• boolean 布尔型
• number 数值型
• string 字符串型
• array 数组型
• tuple 元组类型
• enum 枚举类型
• any 任意类型
• null
• undefined
• void类型
• never型：是其他类型（null 和 undefined）的子类型，代表从不会出现的值。这代表声明never的变量只能被never类型赋值

函数的写法

1. 三点运算符 接受新传过来的值

// 写法一
function sum(...num:number[]):number {

    for (let i = 0; i < num.length; i++) {

       sum+=num[i];

    }

    return sum;

}

sum(1,2,3,4,);  // 输出10

// 写法二
function sum(a:number, b:number, ...num:number[]):number {

   let sum = a +b;

    for (let i = 0; i < num.length; i++) {

       sum+=num[i];

    }

    return sum;

}

sum(1,2,3,4); // 输出10

重载

1.函数重载

• java中方法的重载：指两个或两个以上的同名函数，由于参数不一样，出出现函数重载的情况
• ts中的重载：通过为同一个函数提供多个不同类型的参数，来实现多种功能目的
• ES5中出现同名函数，则写在执行顺序后面的函数会替换之前的函数

2.ts函数重载

• ES5中出现同名函数，则写在执行顺序后面的函数会替换之前的函数 ,但ts则不会

function getResult(str:string):string;

function getResult(str:number):number;

function getResult(str:any):any {

    if (typeof str === 'string') {

        console.log('传参为string型');

    } else {

        console.log('传参为number型')

    }

}

getResult('这是string型');

getResult(123);

getResult(true); //错误写法，因为在方法重载中没有找到可以匹配boolean型的函数

说明：上面例子中function getResult(str:any):any {}并不是重载的一部分

typescript类说明

1. typescript 定义类时，给我们提供了三种修饰符

• public ：公有。 在当前类、子类、外面都可以访问
• protected： 保护。 在当前类、子类可以范围，外面不可以访问
• private ： 私有。 在当前类可以范围，子类、外面不可以访问

属性如果不加修饰符，那默认为：public

1. static
   不需要实例化，可直接调用
2. 多态
   定义：父类定义了一个方案，但不去实现，让继承它的子类去实现，每一个子类有不同的表现
3. 抽象类

• 抽象类时提供其他类继承的基类，不能直接被实例化
• 用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现，并且必须在继承类中实现
• abstract抽象方法只能在抽象类中，否则报错
• 抽象类和抽象方法用来定义标准（供继承类实现的标准）

接口

待更新

命名空间

1. 命名空间

• 在代码量较大的情况下，为了避免各种变量命名相冲突，可将相似功能的类、函数、接口等放置到命名空间内
• 同java的包、.Net的命名空间一样，Typescropt的命名空间可以将代码包裹起来，只对外暴露需要在外部访问的对象，命名空间内的对象通过export向外暴露

2. 命名空间和模块的区别

• 命名空间：内部模块，主要用于组织代码，避免命名冲突
• 模块：侧重代码服用，一个模块里可能包含多个命名空间

装饰器

修饰器是js过去几年中js最大的成就之一，现已是ES7的标准特性

1. 装饰器
   装饰器是一种特殊类型的声明，他能被附加到类、方法、属性或参数上，可以修改类的行为。
   通俗的讲：装饰器就是一个方法，可以注入到类、方法、属性和参数上来扩展类、方法、属性、参数的功能
2. 常见装饰器

• 类装饰器

• 普通装饰器无法传参
• 类装饰器，在类声明之前被声明（紧靠着类声明）

function addClass(params: any) {
    console.log(params); // params 为当前类
    params.prototype.name = '我是重定义的name';
    params.prototype.getClass = () => {
        return this.name;
    }
}

@addClass
class Animal {
    public name: string = '我是固有的name';
    constractor() {
        
    }
}

let animal = new Animal();
console.log(animal.name); // 输出：我是重定义的name
animal.getClass(); // 输出：我是重定义的name

• 装饰器工厂

• 带参数的装饰器

// 例子1（重写属性）
function addClass(params: any) {
    console.log(params); // params 为传入的参数
    
    return (target: any) => {
        console.log(params); // params 为传入的参数
        console.log(target); // target 列的原型
        target.name = '我是重定义的name';
    }
}

@addClass('我是重定义的name')
class Animal {
    public name: string = '我是固有的name';
    constractor() {
        
    }
}

let animal = new Animal();
console.log(animal.name); // 输出：我是重定义的name
animal.getClass(); // 输出：我是重定义的name

// 例子2（重载方法）
function addClass(params: any) {
    console.log(params); // params 为传入的参数
    
    return class extends Animal {
        console.log(params); // params 为传入的参数
        console.log(target); // target 列的原型
        eat() {
            this.name = '狗';
            console.log(this.name + '喜欢吃鱼')
        }
    }
}

@addClass('我是重定义的name')
class Animal {
    public name: string = '猫';
    constractor() {
        
    }
    
    eat() {
        console.log(this.name + '喜欢吃鱼')
    }
}

let animal = new Animal();
console.log(animal.name); // 输出：狗
animal.eat(); // 输出：狗喜欢吃鱼

• 属性装饰器
  接收两个参数

• 类的原型（静态成员来说是构造函数，对实例成员来说是类的原型）
• 类的属性

function addProperty(params: any) {
    return function (target:any, attr:any) {
        console.log(target); // 输出：类的原型
        console.log(attr); // 输出：类的属性，本例输出：'name'
        target[attr] = params;
    }
}

class Animal {
    @addProperty('狗')
    public name: string = '猫';
    constractor() {
        
    }
    
    eat() {
        console.log(this.name + '喜欢吃鱼')
    }
}

let animal = new Animal();
console.log(animal.name); // 输出：狗
animal.eat(); // 输出：狗喜欢吃鱼

• 方法装饰器
  他会被应用到方法的属性描述上，可以用来监听、修改、替换方法定义，接收三个参数：

• 类的原型（静态成员来说是构造函数，对实例成员来说是类的原型）
• 方法名称
• 方法的属性的描述

function addMethod(params: any) {
    return function (target:any, methodName:any, methodDesc) {
        console.log(target); // 输出：类的原型
        console.log(methodName); // 输出：方法名称，本例输出：'eat'
        console.log(methodDesc); // 输出：方法的属性的描述，本例输出：eat方法的描述
        target['name'] = params;
        
        // 修改装饰器的方法，如修改传入的参数类型都改为string型
        let oldMethod = methodDesc.value; // 保存原class类中的方法
        
        // 修改当前方法
        methodDesc.value = function(...arg:any) {
            console.log(arg); // [111, 'abc']
            arg.map((val) => {
                return String(val);
            })
            console.log(arg); // ['111', 'abc']

            // 使用老方法
            oldMethod.apply(this, arg); // this:把当前方法传进去，arg把参数传进去。 表示在本方法中调用老方法
        }
        
        
        
    }
}

class Animal {
    public name: string = '猫';
    constractor() {
        
    }
    
    @addMethod('狗')
    eat() {
        console.log(this.name + '喜欢吃鱼')
    }
}

let animal:any = new Animal();
animal.eat(); // 输出：[111, 'abc'] ['111', 'abc'] 狗喜欢吃鱼

• 方法参数装饰器
  使用时可以为类的原型添加一些元素数据，接收三个参数：

• 类的原型（静态成员来说是构造函数，对实例成员来说是类的原型）
• 方法名称
• 参数在方法参数中的索引

function methodParam(params: any) {
    return function (target:any, methodName:any, paramIndex:number) {
        console.log(target); // 输出：类的原型
        console.log(methodName); // 输出：方法名称，本例输出：'eat'
        console.log(paramIndex); // 输出：参数在方法参数中的索引，本例输出：0
        target['name'] = params;
        
    }
}

class Animal {
    public name: string = '猫';
    constractor() {
        
    }
    
    eat(@methodParam('狗') name) {
        console.log((name || this.name) + '喜欢吃鱼')
    }
}

let animal:any = new Animal();
animal.eat(); // 输出：类的原型 eat 0 狗喜欢吃鱼

• 装饰器执行顺序

• 属性装饰器 > 方法装饰器 > 方法参数装饰器 > 类装饰器
• 如果有多个同类型装饰器，则先执行后面的

@addClass1
@addClass2
class Animal {
    @addProperty1()
    @addProperty2()
    public name: string | undefined
    
    constructor() {}
    
    @addMethod1()
    @addMethod2()
    eat(@methodParam1() name:string, @methodParams2() color:string) {
    
    }
}

/**
 * 上例执行顺序为：@addProperty2 > @addProperty1 > @addMethod2 > @addMethod1 > @methodParams2 > @methodParams1 > @addClass2 > @addClass1 
 * /

typescript中的数据类型

typescript为了使代码编写更加规范，更有利于维护，增加了类型校验，在typescript中主要给我们提供了如下数据类型：

• boolean 布尔型
• number 数值型
• string 字符串型
• array 数组型
• tuple 元组类型
• enum 枚举类型
• any 任意类型
• null
• undefined
• void类型
• never型：是其他类型（null 和 undefined）的子类型，代表从不会出现的值。这代表声明never的变量只能被never类型赋值

函数的写法

1. 三点运算符 接受新传过来的值

// 写法一
function sum(...num:number[]):number {

    for (let i = 0; i < num.length; i++) {

       sum+=num[i];

    }

    return sum;

}

sum(1,2,3,4,);  // 输出10

// 写法二
function sum(a:number, b:number, ...num:number[]):number {

   let sum = a +b;

    for (let i = 0; i < num.length; i++) {

       sum+=num[i];

    }

    return sum;

}

sum(1,2,3,4); // 输出10

重载

1.函数重载

• java中方法的重载：指两个或两个以上的同名函数，由于参数不一样，出出现函数重载的情况
• ts中的重载：通过为同一个函数提供多个不同类型的参数，来实现多种功能目的
• ES5中出现同名函数，则写在执行顺序后面的函数会替换之前的函数

2.ts函数重载

• ES5中出现同名函数，则写在执行顺序后面的函数会替换之前的函数 ,但ts则不会

function getResult(str:string):string;

function getResult(str:number):number;

function getResult(str:any):any {

    if (typeof str === 'string') {

        console.log('传参为string型');

    } else {

        console.log('传参为number型')

    }

}

getResult('这是string型');

getResult(123);

getResult(true); //错误写法，因为在方法重载中没有找到可以匹配boolean型的函数

说明：上面例子中function getResult(str:any):any {}并不是重载的一部分

typescript类说明

1. typescript 定义类时，给我们提供了三种修饰符

• public ：公有。 在当前类、子类、外面都可以访问
• protected： 保护。 在当前类、子类可以范围，外面不可以访问
• private ： 私有。 在当前类可以范围，子类、外面不可以访问

属性如果不加修饰符，那默认为：public

1. static
   不需要实例化，可直接调用
2. 多态
   定义：父类定义了一个方案，但不去实现，让继承它的子类去实现，每一个子类有不同的表现
3. 抽象类

• 抽象类时提供其他类继承的基类，不能直接被实例化
• 用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现，并且必须在继承类中实现
• abstract抽象方法只能在抽象类中，否则报错
• 抽象类和抽象方法用来定义标准（供继承类实现的标准）

接口

待更新

命名空间

1. 命名空间

• 在代码量较大的情况下，为了避免各种变量命名相冲突，可将相似功能的类、函数、接口等放置到命名空间内
• 同java的包、.Net的命名空间一样，Typescropt的命名空间可以将代码包裹起来，只对外暴露需要在外部访问的对象，命名空间内的对象通过export向外暴露

2. 命名空间和模块的区别

• 命名空间：内部模块，主要用于组织代码，避免命名冲突
• 模块：侧重代码服用，一个模块里可能包含多个命名空间

装饰器

修饰器是js过去几年中js最大的成就之一，现已是ES7的标准特性

1. 装饰器
   装饰器是一种特殊类型的声明，他能被附加到类、方法、属性或参数上，可以修改类的行为。
   通俗的讲：装饰器就是一个方法，可以注入到类、方法、属性和参数上来扩展类、方法、属性、参数的功能
2. 常见装饰器

• 类装饰器

• 普通装饰器无法传参
• 类装饰器，在类声明之前被声明（紧靠着类声明）

function addClass(params: any) {
    console.log(params); // params 为当前类
    params.prototype.name = '我是重定义的name';
    params.prototype.getClass = () => {
        return this.name;
    }
}

@addClass
class Animal {
    public name: string = '我是固有的name';
    constractor() {
        
    }
}

let animal = new Animal();
console.log(animal.name); // 输出：我是重定义的name
animal.getClass(); // 输出：我是重定义的name

• 装饰器工厂

• 带参数的装饰器

// 例子1（重写属性）
function addClass(params: any) {
    console.log(params); // params 为传入的参数
    
    return (target: any) => {
        console.log(params); // params 为传入的参数
        console.log(target); // target 列的原型
        target.name = '我是重定义的name';
    }
}

@addClass('我是重定义的name')
class Animal {
    public name: string = '我是固有的name';
    constractor() {
        
    }
}

let animal = new Animal();
console.log(animal.name); // 输出：我是重定义的name
animal.getClass(); // 输出：我是重定义的name

// 例子2（重载方法）
function addClass(params: any) {
    console.log(params); // params 为传入的参数
    
    return class extends Animal {
        console.log(params); // params 为传入的参数
        console.log(target); // target 列的原型
        eat() {
            this.name = '狗';
            console.log(this.name + '喜欢吃鱼')
        }
    }
}

@addClass('我是重定义的name')
class Animal {
    public name: string = '猫';
    constractor() {
        
    }
    
    eat() {
        console.log(this.name + '喜欢吃鱼')
    }
}

let animal = new Animal();
console.log(animal.name); // 输出：狗
animal.eat(); // 输出：狗喜欢吃鱼

• 属性装饰器
  接收两个参数

• 类的原型（静态成员来说是构造函数，对实例成员来说是类的原型）
• 类的属性

function addProperty(params: any) {
    return function (target:any, attr:any) {
        console.log(target); // 输出：类的原型
        console.log(attr); // 输出：类的属性，本例输出：'name'
        target[attr] = params;
    }
}

class Animal {
    @addProperty('狗')
    public name: string = '猫';
    constractor() {
        
    }
    
    eat() {
        console.log(this.name + '喜欢吃鱼')
    }
}

let animal = new Animal();
console.log(animal.name); // 输出：狗
animal.eat(); // 输出：狗喜欢吃鱼

• 方法装饰器
  他会被应用到方法的属性描述上，可以用来监听、修改、替换方法定义，接收三个参数：

• 类的原型（静态成员来说是构造函数，对实例成员来说是类的原型）
• 方法名称
• 方法的属性的描述

function addMethod(params: any) {
    return function (target:any, methodName:any, methodDesc) {
        console.log(target); // 输出：类的原型
        console.log(methodName); // 输出：方法名称，本例输出：'eat'
        console.log(methodDesc); // 输出：方法的属性的描述，本例输出：eat方法的描述
        target['name'] = params;
        
        // 修改装饰器的方法，如修改传入的参数类型都改为string型
        let oldMethod = methodDesc.value; // 保存原class类中的方法
        
        // 修改当前方法
        methodDesc.value = function(...arg:any) {
            console.log(arg); // [111, 'abc']
            arg.map((val) => {
                return String(val);
            })
            console.log(arg); // ['111', 'abc']

            // 使用老方法
            oldMethod.apply(this, arg); // this:把当前方法传进去，arg把参数传进去。 表示在本方法中调用老方法
        }
        
        
        
    }
}

class Animal {
    public name: string = '猫';
    constractor() {
        
    }
    
    @addMethod('狗')
    eat() {
        console.log(this.name + '喜欢吃鱼')
    }
}

let animal:any = new Animal();
animal.eat(); // 输出：[111, 'abc'] ['111', 'abc'] 狗喜欢吃鱼

• 方法参数装饰器
  使用时可以为类的原型添加一些元素数据，接收三个参数：

• 类的原型（静态成员来说是构造函数，对实例成员来说是类的原型）
• 方法名称
• 参数在方法参数中的索引

function methodParam(params: any) {
    return function (target:any, methodName:any, paramIndex:number) {
        console.log(target); // 输出：类的原型
        console.log(methodName); // 输出：方法名称，本例输出：'eat'
        console.log(paramIndex); // 输出：参数在方法参数中的索引，本例输出：0
        target['name'] = params;
        
    }
}

class Animal {
    public name: string = '猫';
    constractor() {
        
    }
    
    eat(@methodParam('狗') name) {
        console.log((name || this.name) + '喜欢吃鱼')
    }
}

let animal:any = new Animal();
animal.eat(); // 输出：类的原型 eat 0 狗喜欢吃鱼

• 装饰器执行顺序

• 属性装饰器 > 方法装饰器 > 方法参数装饰器 > 类装饰器
• 如果有多个同类型装饰器，则先执行后面的

@addClass1
@addClass2
class Animal {
    @addProperty1()
    @addProperty2()
    public name: string | undefined
    
    constructor() {}
    
    @addMethod1()
    @addMethod2()
    eat(@methodParam1() name:string, @methodParams2() color:string) {
    
    }
}

/**
 * 上例执行顺序为：@addProperty2 > @addProperty1 > @addMethod2 > @addMethod1 > @methodParams2 > @methodParams1 > @addClass2 > @addClass1 
 * /