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

Posted 2021-11-10 极客江南

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

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

一期知识点击这里

二期知识点击这里

三期知识点击这里

四期知识点击这里

五期知识点击这里

六期知识点击这里

七期知识点击这里

八期知识点击这里

九期知识点击这里

十期目录

• • • • 1.混入
      • 2. 声明
      • 3. 声明文件

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

那么，Typescript 是不是很难？

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

1.混入

// 1.对象混入
/*
let obj1 = {name:'lnj'};
let obj2 = {age:34};
Object.assign(obj1, obj2);
console.log(obj1);
console.log(obj2);
 */

// 2.类混入
// 需求: 定义两个类, 将两个类的内容混入到一个新的类中
class Dog {
    name:string = 'wc';
    say():void{
        console.log('wang wang');
    }
}
class Cat {
    age:number = 3;
    run():void{
        console.log('run run');
    }
}
// 注意点: 一次只能继承一个类
// class Animal extends Dog, Cat{
//
// }
class Animal implements Dog, Cat{
    name:string;
    age:number;
    say:()=>void;
    run:()=>void;
}
function myMixin(target:any, from:any[]) {
    from.forEach((fromItem)=>{
        Object.getOwnPropertyNames(fromItem.prototype).forEach((name)=>{
            target.prototype[name] = fromItem.prototype[name];
        })
    })
}
myMixin(Animal, [Dog, Cat]);
let a = new Animal();
console.log(a);
a.say();
a.run();
// console.log(a.name);
// console.log(a.age);

2. 声明

/*
1.什么是声明?
- 在企业开发中我们不可避免的需要引用第三方的 JS 的库,
  但是默认情况下TS是不认识我们引入的这些JS库的
  所以在使用这些JS库的时候, 我们就要告诉TS它是什么, 它怎么用
- 如何告诉TS呢?
  那就是通过声明来告诉
* */
declare const $:(selector:string)=>{
    width():number;
    height():number;
    ajax(url:string, config:{}):void;
};
console.log($);
console.log($('.main').width());
console.log($('.main').height());

3. 声明文件

console.log(myName);
say('lnj', 18);
let p = new Person('zs', 666);
p.say();

/*
1.对于常用的第三方库, 其实已经有大神帮我们编写好了对应的声明文件
  所以在企业开发中, 如果我们需要使用一些第三方JS库的时候我们只需要安装别人写好的声明文件即可
2.TS声明文件的规范 @types/xxx
  例如: 想要安装jQuery的声明文件, 那么只需要npm install @types/jquery 即可
* */

> 码字不易，在线求个三连支持。


点击下方卡片，关注公众号 回复 **书籍** 获取原创保姆级编程电子书