初学者这样玩 TypeScript，迟早进大厂系列（第八期）

极客江南：一个对开发技术特别执着的程序员，对移动开发有着独到的见解和深入的研究，有着多年的iOS、Android、HTML5开发经验，对NativeApp、HybridApp、WebApp开发有着独到的见解和深入的研究, 除此之外还精通 JavaScript、AngularJS、 NodeJS 、Ajax、jQuery、Cordova、React Native等多种Web前端技术及Java、PHP等服务端技术。

初学者玩转 TypeScript系列，总计 10 期，本文为第 8 期，点赞、收藏、评论、关注、三连支持！

一期知识点击这里

八期目录

对于初学者来说，学习编程最害怕的就是，难。

那么，Typescript 是不是很难？

首先，我可以肯定地告诉你，你的焦虑是多余的。新手对学习新技术有很强的排斥心理，主要是因为基础不够扎实，然后自信心不够强。

1.声明合并

/*
在ts当中接口和命名空间是可以重名的, ts会将多个同名的合并为一个
* */


// 1.接口

/*
interface TestInterface {
    name:string;
}
interface TestInterface {
    age:number;
}
// interface TestInterface {
//     name:string;
//     age:number;
// }
class Person implements TestInterface{
    name:string;
    age:number;
}
 */

// 1.1同名接口如果属性名相同, 那么属性类型必须一致

/*
interface TestInterface {
    name:string;
}
interface TestInterface {
    name:number;
}
 */
 
// 1.2同名接口如果出现同名函数, 那么就会成为一个函数的重载

/*
interface TestInterface {
    getValue(value:number):number;
}
interface TestInterface {
    getValue(value:string):number;
}
let obj:TestInterface = {
    getValue(value:any):number{
        if(typeof value === 'string'){
            return value.length;
        }else{
            return value.toFixed();
        }
    }
}
console.log(obj.getValue("abcdef"));
console.log(obj.getValue(3.14));
*/

// 2.命名空间

/*
namespace Validation{
    export let name:string = 'lnj';
}
namespace Validation{
    export let age:number = 18;
}
console.log(Validation.name);
console.log(Validation.age);
*/

// 1.1同名的命名空间中不能出现同名的变量,方法等

/*
namespace Validation{
    export let name:string = 'lnj';
    export let say = ()=> "abc";
}
namespace Validation{
    export let name:string = 'zs';
    export let say = ()=> "abc";
}
 */
// 1.2同名的命名空间中其它命名空间没有通过export导出的内容是获取不到的
namespace Validation{
    
    
    let name:string = 'lnj';
}
namespace Validation{
    
    
    export let say = ()=> {
    
    
        console.log(`name = ${
      
      name}`);
    };
}
Validation.say();

2. 装饰器

/*
1.什么是装饰器?
- Decorator 是 ES7 的一个新语法，目前仍处于提案中，
- 装饰器是一种特殊类型的声明，它能够被附加到类，方法， 访问器，属性或参数上
- 被添加到不同地方的装饰器有不同的名称和特点
    + 附加到类上, 类装饰器
    + 附加到方法上,方法装饰器
    + 附加到访问器上,访问器装饰器
    + 附加到属性上,属性装饰器
    + 附加到参数上,参数装饰器

2. 装饰器基本格式
2.1普通装饰器
2.2装饰器工厂
2.3装饰器组合

3.如何在TS中使用装饰器?
在TS中装饰器也是一项实验性的特性, 所以要使用装饰器需要手动打开相关配置
修改配置文件 experimentalDecorators
* */
function test(target) {
    
    
    console.log('test');
}
// 如果一个函数返回一个回调函数, 如果这个函数作为装饰器来使用, 那么这个函数就是装饰器工厂
function demo() {
    
    
    console.log('demo out');
    return (target)=>{
    
    
        console.log('demo in');
    }
}
function abc(target) {
    
    
    console.log('abc');
}
function def() {
    
    
    console.log('def out');
    return (target)=>{
    
    
        console.log('def in');
    }
}

// 1.给Person这个类绑定了一个普通的装饰器
// 这个装饰器的代码会在定义类之前执行, 并且在执行的时候会把这个类传递给装饰器
// @test
// 2.给Person这个类绑定了一个装饰器工厂
// 在绑定的时候由于在函数后面写上了(), 所以会先执行装饰器工厂拿到真正的装饰器
// 真正的装饰器会在定义类之前执行, 所以紧接着又执行了里面
// @demo()
// 3.普通的装饰器可以和装饰器工厂结合起来一起使用
// 结合起来一起使用的时候, 会先从上至下的执行所有的装饰器工厂, 拿到所有真正的装饰器
// 然后再从下至上的执行所有的装饰器

//  demo out / def out / abc / def in / demo in / test
@test
@demo()
@def()
@abc
class Person {
    
    

}

3. 类装饰器

/*
和ES6迭代器一样
 */
 
let someArray = [1, "string", false];
for (let entry of someArray) {
    
    
    console.log(entry); // 1, "string", false
}

/*
生成器
当生成目标为ES5或ES3，迭代器只允许在Array类型上使用。
在非数组值上使用 for..of语句会得到一个错误，
就算这些非数组值已经实现了Symbol.iterator属性。
为了解决这个问题, 编译器会生成一个简单的for循环做为for..of循环
*/

/*
1.类装饰器
- 类装饰器在类声明之前绑定（紧靠着类声明）。
- 类装饰器可以用来监视，修改或替换类定义
- 在执行类装饰器函数的时候, 会把绑定的类作为其唯一的参数传递给装饰器
- 如果类装饰器返回一个新的类，它会新的类来替换原有类的定义

2.装饰器和装饰器工厂区别
时候可以传递自定义参数
*/

/*
function test(target:any) {
    // console.log(target);
    target.prototype.personName = 'lnj';
    target.prototype.say = ():void=>{
        console.log(`my name is ${target.prototype.personName}`);
    }
}
*/

function test<T extends {
      
      new (...args:any[]):{
      
      }}>(target:T) {
    
    
    return class extends target {
    
    
        name:string = 'lnj';
        age:number = 18;
    }
}

/*
@test
class Person {

}
interface Person{
    say():void;
}
let p = new Person();
p.say();
 */

@test
class Person {
    
    

}
let p = new Person();
console.log(p);

4. defineProperty

/*
Object.defineProperty()
可以直接在一个对象上定义一个新属性，
或者修改一个对象的现有属性，并返回此对象。
* */
// 定义一个新的属性
/*
let obj = {age:18};
Object.defineProperty(obj, 'name', {
    value:'lnj'
});
console.log(obj);
 */

// 修改原有属性
/*
let obj = {age:18};
Object.defineProperty(obj, 'age', {
    value:34
});
console.log(obj);
 */

// 修改属性配置-读写
/*
let obj = {age:18};
Object.defineProperty(obj, 'age', {
    writable:false
})
obj.age = 34;
console.log(obj.age);
 */


// 修改属性配置-迭代
/*
let obj = {age:18, name:'lnj'};
Object.defineProperty(obj, 'name', {
    enumerable: false
})
for(let key in obj){
    console.log(key);
}
 */

// 修改属性配置-配置
let obj = {
    
    age:18, name:'lnj'};
Object.defineProperty(obj, 'name', {
    
    
    enumerable:false,
    configurable: false
});
Object.defineProperty(obj, 'name', {
    
    
    enumerable:true,
    configurable: false
});
for(let key in obj){
    
    
    console.log(key);
}

5. 方法装饰器

/*
1.方法装饰器
- 方法装饰器写在在一个方法的声明之前（紧靠着方法声明）。
- 方法装饰器可以用来监视，修改或者替换方法定义。

- 方法装饰器表达式会在运行时当作函数被调用，传入下列3个参数：
    + 对于静态方法而言就是当前的类, 对于实力方法而言就是当前的实例
    + 被绑定方法的名字。
    + 被绑定方法的属性描述符。
* */
/*
function test(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    // console.log(target);
    // console.log(propertyKey);
    // console.log(descriptor);
    descriptor.enumerable = false;
}
class Person {
    // @test
    sayName():void{
        console.log('my name is lnj');
    }
    @test
    sayAge():void{
        console.log('my age is 34');
    }
    // @test
    static say():void{
        console.log('say hello world');
    }
}
let p = new Person();
for(let key in p){
    console.log(key);
}
 */
function test(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    
    
    descriptor.value = ():void=>{
    
    
        console.log('my name is it666');
    };
}
class Person {
    
    
    @test
    sayName():void{
    
    
        console.log('my name is lnj');
    }
}
let p = new Person();
p.sayName();