好,我们继续那个沉重的话题分割我的财产,上一篇
TypeScript极速完全进阶指南-1初级篇
我儿子确实拿到钱了,

class Person{name:string;age:number;food:string = "剁椒鱼头";//外面赋值这里赋值一码事private money:number = 10000000000000;//别激动,肯定不是中国天堂银行发行的//构造函数,人生下来,年龄就定了constructor(name:string,age:number){this.name = name;this.age = age;}//eat 大彬哥就特么爱吃鱼favoriteFood(){return this.food;}makeMoney(salary:number):number{return  this.money+=salary;}//我自己被窝偷着乐,数1后面的0touZheLe(){return this.money;}
}
//1.啥也别说先造个人再说
var dabinge = new Person('大彬哥',18);
//2.想问我多大撩我或者请我吃饭问我爱吃啥我肯定告诉你
console.log(dabinge.age);
console.log(dabinge.favoriteFood());
//3.想问我银行卡里有多少钱?我肯定不告诉你
// console.log(dabinge.money);
// 大彬哥每个月工资不是很多998
dabinge.makeMoney(998);
//4.我自己在被窝可以偷着看自己余额,通过偷着乐函数看私有属性
console.log(dabinge.touZheLe());//10000000000998class bingeSons extends Person{isHandsome:boolean = true;constructor(name:string,age:number){super(name,age);//都是我的老底儿,姓名年龄cls}
}
let binSon = new bingeSons('彬哥2.0',18);
console.log(binSon.food);//我儿子钱都到手了

但是,不管是法律或者大彬哥遗嘱肯定不能这么写,我大儿子能继承我的钱,我二儿子也能继承,我三儿子也能继承,我大女儿能继承,二女儿能继承,这么写估计我还没写完就挂了,或者法律书得多厚啊!一般都会这么说只要是直系亲属这一类人都能继承我的钱,而不用强调某个人。这里我根本不用管单个人。这里我写分钱,写一个特别适用而典型的例子,数学方法。我们平常用数学方法的时候没必要先New一个吧(我不想臭拽那些名词,比如实例化)。

肯定不这样用:

let M = new Math();
M.random()

而是直接用类调用

Math.random()
Math.PI

这个玩意在类里面叫静态属性和方法,用static去修饰,跟private类似。

class BinMath{static PI:number=66666;static random():number{return Math.random();}
}
console.log(BinMath.PI);
console.log(BinMath.random());

好,回到财产分配问题,确实给我子女一部分钱了,但是我还是个很精确的人我说的是一部分,而不是所有,因为我想捐给慈善机构一部分。但是这里问题就来了,大家考虑,我不可能说清楚所有慈善基金会的标准,那我岂不是要累死。我只能说这个基金会的大体标准,后续基金会打算拿钱肯定得满足我说的条件,然后还有自己的实际情况。我只能抽象的说些条件,比如慈善机构必须得有名字,存活50年以上的,比如必须财务透明,还有就是教育类的,要解决这个问题就得使用抽象类。抽象类就是只是用来继承而不是实现的类。其实你看极端的情况我只说这类慈善机构必须有名字,实际这个跟没说一样,你随便套一个机构都行,所以说新建一家有名字的机构跟废话一样,但是其他机构必须符合这些条件。这里我解释清楚没有为什么会有抽象类。比如你要开发一个实际组件,你知道这个组件肯定得有名字,得有描述得有版本号,但是这些东西你new出一个对象没有毛用,它只是一个规范,更合适的方式是 按照这个规范去做事,也就是继承它。拿分钱举例,

abstract class Jigoubiaozhun {abstract jigouName: string;age:number = 50;abstract showMoney(money:number):number;//你只要把我钱公示就行了是网上还是其他地方我不管,你自己去实现constructor(name: string,age:number) {}}
//假设有一类慈善机构是专门去给沙漠儿童捐款挖井的,想申请,说符合我要求
class shamoChildren extends Jigoubiaozhun{public jigouName = "沙漠挖井基金协会"private money: number = 5000000;showMoney():number{return this.money; }constructor(name:string,age:number){super(name,age);}
}var xinJiangWajing = new shamoChildren('新疆挖井队',50);
console.log(xinJiangWajing.showMoney());

大彬哥分钱圆满结束!

正写着教程呢,这时候你刘姨打电话跟我说,别吹牛逼了,赶紧找对象,要找个懂事的,工作好的,疼你的,但是你懂得,你问她谁啊?她总是只有标准(接口),让你自己去实现(implements),就像接口一样。接口就是这么一个玩意,我们看看你刘姨的需求。

 interface girl {dongshi:boolean;job:string;tengNi(): boolean;//接口不能实现方法 只有规定,跟你刘姨真像}class GirlFriend implements girl{dongshi=true;job = 'good';tengNi(){return true;}}
var cuihua = new GirlFriend();
console.log(cuihua.job);

为啥要有interface呢,太好理解了你刘姨怕我走歪路呗,好我们看看代码出事儿的情况:

function renshi(meizi:any){console.log(meizi.name);
}
function yuehui(meizi:any){console.log(meizi.name+'晚上一起看电影吧,记得带身份证');
}
const meizi = {name:"白富美"
}
renshi(meizi);
yuehui(meizi);

我修改一点,

const meizi = {mingzi:"白富美"
}

完蛋了,约会三件套都得改……有同学说我改meizi一个地方不就行了,这样有两个问题1.你懂大彬哥的妹子有一个加强连那么多你怎么改?第二要是能在写的时候就防止这么写多好?满足你需求。

interface date{mingzi:string;
}
function renshi(meizi:date){console.log(meizi.name);//报错,直接扼杀错误在摇篮之中
}
function yuehui(meizi:date){console.log(meizi.name+'晚上一起看电影吧,记得带身份证');
}
const meizi = {name:"白富美"
}
renshi(meizi);
yuehui(meizi);

但是你懂得,不是每一个女孩用约会三件套都好使,比如运动型女孩,你可以找她去打羽毛球,文静型女孩你可以去带她听音乐会,书香门第的女孩你可以带她去逛逛潘家园……你得对症下药,但是问题来了,你刘姨虽然给你介绍一加强连的女孩,但是我在见面之前我是不知道她是什么类型,这就容易产生你对着古典的女孩约她打羽毛球的问题。用代码表示,就是有时候我们一开始并不知道参数的类型,只有在执行的时候才知道。

function showData(data:any){return data;
}
showData('leolau').length;
showData(12).length;//这特么不就废了么
showData({ name: 'leo' }).length;
showData([12, 5, 8]).length;

咋整?TS里面又一个牛逼的东西叫做泛型。泛型的意思就是,先别管类型是啥,先到我碗里来,然后处着的时候我在看她是哪种类型。好,我们看下咋整。

function showData<T>(data:T){return data;
}
console.log(showData<string>('leolau').length);
console.log(showData<number>(12).length);
console.log(showData({ name: 'leo' }).length);
console.log(showData([12, 5, 8]).length);

话不投机,当场报错,当然了泛型也可以用在类型上,比如说长头发大眼睛是不是很可能是温柔的女孩啊,就像数组很可能装的是数字一样。

const arr: Array<number> = [12, 5, 8];
arr.push('约么');//人家数字类型,你总不好放string吧

函数参数也可以泛型,其实就是不知道啥类型。

function showArray<T>(data:T[]){//这里虽然是泛型但是规定了必须死数组for(var i = 0;i<data.length;i++){console.log(data);}
}
showArray<string>(['leo','lau']);

说到妹子的话差别还是很大的,有些人家境一般有些人是含着金钥匙长大的,但是良好的家境只是人家的装饰,而不是决定一切的,毕竟顺境加个人努力成功的人很多,我说这句话是想说ts里面也有装饰器,它就像手枪的消声器一样。代码如下:

function hasKey(constructor:Function){console.log('我含着金钥匙呢');
}
@hasKey
class Person{name:string;age:number;constructor(name: string, age: number){this.name = name;this.age = age;console.log('我是' + name +',今年'+age+'岁我骄傲了吗');}
}const baifumei = new Person('白富美',18);
console.log(baifumei);

说了很多关于类,和接口的东西,这些其实很大程度上是为了复用和代码简洁!

面我要说另外一个东西,让代码更加简洁和实用的东西-模块化。

新建./Math/two.ts

export const double:number = 2;
export function doubleKill(num:number):number{return num * double;
}

新建techMod.ts并引入,

import { double, doubleKill} from "./Math/two";
console.log(double, doubleKill(3));

报错,export未定义,原因是原生js哪怕ES6浏览器都不支持模块化,咋整,实用模块加载库。

个人比较喜欢,SystemJs,为啥喜欢它?喜欢需要理由吗?好吧这么说容易挨打,因为它的语法很可能成为将来的事实标准,这样可以让你省的在学一遍。

npm install systemjs --save

啥也不说了,上一梭子代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="/node_modules/systemjs/dist/system.js"></script><script>SystemJS.config({baseURL: '/',packages:{'/':{defaultExtension: 'js'}}});// loads /modules/jquery.jsSystemJS.import('techMod.js');</script>
</head>
<body>
</body>
</html>

到目前我们已经搞定了大部分TypeScript,但是我知道你在想啥,知道了知识该怎么实际应用呢?比如说如何搭建一个工作流开发项目呢?或者说如何用TS去结合到angular、react、vue框架呢?

我知道大家想的是你是不是想要讲TS怎么用到Angular中啊?既然大家呼声那么高,那我就讲TypeScript如何搭建工作流开发React应用……
更多精彩内容欢迎大家观看我的SF讲座TypeScript极速完全进阶指南

TypeScript极速完全进阶指南-2中级篇相关推荐

  1. 《算法竞赛进阶指南》数论篇

    <算法竞赛进阶指南>数论篇(1)-最大公约数,素数筛,欧拉函数,同余,欧拉定理,BSGS <算法竞赛进阶指南>数论篇(1)-最大公约数,素数筛,欧拉函数,同余,欧拉定理,BSG ...

  2. Java工程师学习指南(中级篇)

    Java工程师学习指南 中级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我写的文章都是站 ...

  3. 《算法竞赛进阶指南》------图论篇2

    文章目录 0x0E 雨天的尾巴 洛谷p4556(线段树合并+树上差分+树链lca) 0x0F CF600E Lomsat gelral(线段树合并) 0x10 天天爱跑步 NOIP2016 P1600 ...

  4. 《算法竞赛进阶指南》数论篇(3)-组合计数,Lucas定理,Catalan数列,容斥原理,莫比乌斯反演,概率与数学期望,博弈论之SG函数

    文章目录 组合计数 例题:Counting swaps Lucas定理 Cnm≡Cnmodpmmodp∗Cn/pm/p(modp)C_n^m\equiv C_{n\ mod\ p}^{m\ mod\ ...

  5. Java工程师学习指南 中级篇

    Java工程师学习指南 中级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我写的文章都是站 ...

  6. 写给初中级前端的高级进阶指南等

    大家好,我是若川. 话不多说,这一次花了几小时精心为大家挑选了20余篇好文,供大家阅读学习.本文阅读技巧,先粗看标题,感兴趣可以都关注一波,绝对不亏. 程序员成长指北 考拉妹子,一个有趣的且乐于分享的 ...

  7. 《算法竞赛进阶指南》打卡-基本算法-AcWing 93. 递归实现组合型枚举:递归与递推、dfs、状态压缩

    文章目录 题目解答 题目链接 题目解答 分析: 此题和笔者另一篇博文很像,只不过是限定了个数.<算法竞赛进阶指南>打卡-基本算法-AcWing 92. 递归实现指数型枚举:递推与递归.二进 ...

  8. 进阶指南:如何编写可重用程序

    进阶指南:如何编写可重用程序¶ 这篇进阶指南从 Tutorial 7 结尾的地方继续讲起.我们将会把我们的 Web-poll 放进一个独立的 Python 包中,以便你在新的项目中重用它或将它与他人分 ...

  9. 写给前端的算法进阶指南,我是如何两个月零基础刷200题 等推荐

    大家好,我是若川. 话不多说,这一次花了几小时精心为大家挑选了20余篇好文,供大家阅读学习.本文阅读技巧,先粗看标题,感兴趣可以都关注一波,一起共同进步. 前端从进阶到入院 作者ssh就职于字节跳动基 ...

最新文章

  1. 数字图像处理笔记一 - 图像采集(空间分辨率和幅度分辨率)
  2. 苹果布局大数据,两亿美元收购暗数据企业
  3. 动态代理--cglib
  4. DG环境数据库RMAN备份策略制定
  5. 设计模式之_动态代理_02
  6. 【DAY2】hadoop 完全分布式模式配置的学习笔记
  7. Mybatis中#{}与${}的使用
  8. ios 语言本地化处理
  9. 时间序列分析之协整检验
  10. 推荐好轮子【Echarts数据可视化】图表插件 兼容ie6、7、8
  11. Burp新手抓包教程(HTTPS抓包)
  12. 2021年国内外离线下载服务全面评测与总结
  13. 愿天下有情人都是失散多年的兄妹
  14. Linux脏牛漏洞提权
  15. 商业智能BI与业务管理决策思维之三:业务质量分析
  16. 高德地图路径轨迹起点标点不变_竞品分析之高德地图与百度地图
  17. 简单理解什么是虚拟存储器
  18. 为什么要用java股票交易接口?
  19. 移动应用程序和网页应用程序_如何不完全破坏您的移动应用程序的用户界面
  20. linux下mkdir和windows下mkdir的对比

热门文章

  1. MCU破解技术分析(一)
  2. VB shell执行程序,直到执行完毕
  3. [vb]FindWindow使用方法
  4. DeepMind登上Science:“和AI相比,人类都是猪队友”,团战称霸雷神之锤3
  5. 我没让机器人变身,它自己就变了 | Science Robotics
  6. vue项目打包优化策略
  7. Mybatis中Mapper.xml文件sql中动态获取----#{}和${}区别
  8. 禁用 Bootstrap 模态框(Modal) 点击空白时自动关闭
  9. 浅谈CIVIL 3D
  10. 如何执行静默(无人参与)Java 安装?