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

Posted 2022-11-28 极客江南

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了初学者这样玩 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();