更多有关3R教室的详细信息介绍请查看官网3R教室详细说明，地址: 3rcd.com/classroom

📚基本介绍​

3R教室是干什么的？

3R教室是由站长 @pincman 于2022年8月10日创立的平克小站（pincman.com）转化而来，并在2023年3月正式更名为3R教室（域名更换为 3rcd.com）

3R即：Remote Learn（远程学习）、Remote Work（远程工作）、Remote Profit（远程变现）

在平克小站时期，一开始主要从事于node.js后端开发方面的教学，后续慢慢转变为nestjs+react的全栈开发训练营。而随着来自各行各业、国内外、大厂小厂、创业等各种领域不同年龄的会员规模的不断增长，我们获得了越来越多的资源，站长的知识面也在不断地增加。所以，随着时间的推移，3R教室慢慢开始扩展出一些新业务。另外，因为市场的日新月异，围绕着变现这一实用性主题，课程也慢慢变得更加多样化。目前，3R教室已经成为一个集教学、服务、资源、探讨与一体的，帮助程序员及其他行业的朋友实现远程自由职业者的闭环式的综合性付费远程社区。

教室最终目标是帮助码农朋友脱离996内卷以及长期处于高负荷打工和被优化的死循环，而实现慢生活状态！

什么是远程自由职业？

简单来说，3R社区的远程自由职业包含以下两种类型

• 远程工作：虽是打工，但不用上班
• 个人创业：随着AI的快速发展，未来一人公司将会替代掉大量集中式的上班模式的打工人

而个人创业又可以拆分为两种模式

• 主动收入：例如远程软件订制（接单）工作室
• 被动收入：例如独立app开发销售、知识付费（卖课/付费咨询等）、付费站点运营等

目前提供哪些内容和服务？

主要包含三部分内容：课程、服务、资源

其中课程有技术课和营销与营运等其他类型的课程组成，目前在做的以及将来要做的课程如下

• Nestjs最佳实践：早期课程
• TS+AI全栈开发实战（即：全栈课）【当前主课程】：主要技术栈为react/next.js、node.js/hono.js、cicd/运维、AI开发工具使用、AI智能体开发等
• 远程自由职业指手册（即：变现课）【当前主课程】：非技术课程，包含远程工作求职、海外外包接单、被动收入和独立开发变现、工商税务、跨境收款、运营推广等技术变现相关的知识
• 3R兴趣课：未来新增课程，一系列站长喜欢的工具的使用教程的集合。比如wordpress建收费资源站、obsidian笔记使用、openclaw这种新兴工具使用等。后续会随着时代的发展不断增加新教程

服务有以下几类

• 技术课助教问答服务
• 站长一对一会议：不限次数，可以是职业规划和技术方向指导、求职/职场/创业相关探讨、工具产品使用问答、服务运营和外包报价等各种方面的咨询，站长知无不言
• 社区会议：站长会经常性的开一些社区会议，由站长讲解一些自身的自由职业和创业经验，也会偶尔邀请一些在远程工作求职成功、有大厂/外企/海外工作顺利、创业或副业经营不错的其他会员同学作为嘉宾来分享一下他们的经验

由于会员群体规模（近千人）的日益增长，加上我们是个费用较贵的社区，所以也在不断产生大量优质资源。当前大概包含以下资源

根据资源的数量和对社区的贡献排序

• 3R工作室商业项目的共享：3R工作室是站长自营的一个远程外包团队，有早期的10来名会员构成。我们接下来很多海外或国内的商业外包，用课程相关的技术栈开发。部分项目经客户同意后把源码共享给教室会员。不断可以提供给会员朋友学习实战项目的机会，也可以供会员修改后作为自己的案例用于求职、接单等
• 远程/坐班工作的招聘和内推对接：3R教室中有很多会员在自主创业/海外创业等过程中需要为团队招聘远程开发者、海外工作中需要寻找代工、所在企业内部需要招聘内推同事、甚至还有一些职业HR付费进群招人的，所以这会产生大量的远程或坐班的内推岗位。而同时，教室社区内也有很多有求职需求的会员。这就形成了一个良好的资源对接平台。已经有许多会员直接在我们社区内部通过站长的对接招聘/求职成功
• 个人创业与融资对接：社区内有很多远程个人或小团队创业的会员朋友，也有很多手上有许多闲钱因为利息下降而想寻找一些优质项目进行小额投资的会员。这就实现了创业和天使投资之间的对接，目前3R教室已经有很多起这方面的成功案例
• 服务和作品推广：因为3R教室的所有会员均为付费会员，所以，有着良好的虚拟物品消费习惯。可以帮助从事独立开发、知识付费、付费资源等创业的朋友，在需要推广产品或服务时在社区内宣传，可以快速获得第一批启动用户
• 外包项目对接：我们群里也有很多朋友手上有一些外包资源，或者自主创业的会员朋友由于时间、对技术不感兴趣等原因想把项目交给其他会员做。但又不想提供长期固定发工资的远程工作岗位，而是愿意直接一锤子买卖。这时候就可以帮助想要接单的会员朋友在群内获得外包资源。不过这一块由于与我们3R工作室本身形成一定的竞争性，所以可能优质的资源会被3R工作室接下来。因此不要抱有太大希望😄。更好的方法是学习我们的变现课自行寻找客源

以上基本涵盖了3R教室的所有内容，即：课程（技术和营销学习）＋服务（社区会议及问答、一对一等）+资源（商业项目、岗位/外包/投融对接、作品或服务推广等）。整体而言形成一个闭关路径

如下图

购买会员后包就业、包有单子接、包回本吗？能免费先试试会员吗？求职或创业成功率大不大？

• 接单这块只提供方法和思路教学，其它别想，没单子分配给你
• 岗位也只是帮忙对接，不包就业，不是培训班。另外，回不了本，抱有这类需求的朋友不是这个社区的目标会员，请见谅！
• 不存在试用会员，试不了一点，并且购买后无法退款！
• 求职成功率还行，有求职需求的会员在本社区学习技术和求职方法后求职远程工作或坐班成功率（尤其远程工作）达到50%左右；创业我只提供方法，接单这块成功率还行，有自行接单的朋友（尤其全职的）成功率20-30%左右；纯创业的独立开发和被动收入的成功率纯看命，方法只是起辅助作用。如果纯创业都能高成功率，我自己早就不是赚一千个，是赚一个亿了，哈哈！

3R教室的会员费是多少？支持分期付款吗？能不能便宜点？能分开买单个课程或服务吗？

4599元；不支持分期；便宜不了一点，但有时候会优惠期便宜一两百；不能，只有一种收费，即会员费

🐳社区概况​

3R教室当前拥有900+名会员

🦉群与资源​

3R教室最早使用飞书运营社区，后来又实用Discord。而目前使用最常用的微信和QQ来运营。在不久的将来，新官网上线后，官网等解决很多信息无法沉淀的问题。目前有以下群

其中

• 两个微信会员总群用于日常交流和社区公告发布以及作品或服务推广等
• 海外会员微信群用于海外工作、留学、定居的会员之间的交流或内推
• 大厂与外企微信群用于在大厂或外企中工作的会员进行内推与职场交流
• 创业融资群用于投资人会员和创业会员之间的对接
• 岗位内推群用于远程或坐班的内推岗位发布和求职对接
• 金融投资探讨群用于日常投资、股票、虚拟币等非3R核心业务的探讨
• 会员QQ群用于技术课和变现课问答
• 【福利】有两个不需要会员资格就能进的外部群，一个外部微信交流群、一个外部QQ交流群，有需要进可以加客服微信【hidlthee_jia】或【newWorldSpace】拉一下。不过你需要给他们一个红包作为过路辛苦费😄。但是需要注意的是，外部群基本没啥人说话，会员资源（比如岗位等）也不会发到外部群。是纯交流群，有兴趣可以进一下

目前最重要的是两个微信会员总群和一个会员QQ群

截止编辑本文时（2026.1.21）微信群一已满，群二400多人。QQ群方面因为部分海外会员朋友没有QQ，或者非学习需求没进，所以只有800多人

目前所有资源的对接都在微信群内，不久的将来我们将会迁移到新官网中

🦖课程相关​

详细课程内容介绍请查看3R教室详情介绍

此处简短介绍，但内容更加新，官网固定三个月左右更新一次。尤其课程内容这块，官网可能比较过时（比如最近会新增很多AI开发工具的使用课程、PHP课程等），下文有说明，但官网不变。官网的变更需要一件事完全确认并且开工了才变更

在技术课方面，课程的模式三年内进行了多次变更。一开始是直播上课模式，后来发现大家因为时间无法统一而变成视频录制的方式。然而，后来越来越多的会员其实是老码农转技术栈而并非都是零基础小白。所以，比较抵触视频类课程，更倾向于纯文档课程。并且视频类课程对编程学习的成长有害无益，尤其TS方面的技术栈。因为许多生态和框架都没有成熟的视频教程，需要自行查阅他们的官网文档学习。所以，在23年新版《nestjs最佳实践》开始，我就开始只做纯文档类技术课了。包括现在的《TS+AI全栈开发实战》也是纯文档课程。

不过纯文档课程，对零基础小白转码的朋友来说，并不友好，会极大地降低学习平滑度。所以，从26年开始，将会针对目前的《TS+AI全栈开发实战》和未来将要制作的PHP全栈、React Native+Electron客户端开发等课程，都加上一些难点小视频，并放在文档为主的课程内供基础差的同学快速入门

另外，由于AI的快速发展，技术课将会在2026年开始新增许多使用AI进行自动辅助开发的内容。比如mcp、claude code+skills、antigravity等最新工具的使用、langchain+n8n的开发等

变现课这块，一开始其实只是站长周末开个内部直播会议瞎聊聊的东西。后来发现，很多朋友本身技术不错或者对技术本来就不感冒，而更想学习这些会议经常聊到的远程工作求职方法、国内和海外的高价外包接单方法、独立app开发怎么卖，甚至是我怎么卖课卖起来的等等我个人过往做起来且做的不错的那些经历的经验，对这些更感兴趣。所以，后来慢慢我把这些会议给录制下来，放在网盘里供所有会员长期研究。这就是最初的变现课的由来。另外，一些我和外包客户的谈判记录、和其他会员一对一的会议记录等，在他们部分人同意的情况下，把这些录制视频也放到网盘里。所以，实际上变现课并不是一个正经的课程，而是以期刊制长期分享一些当下市场最好的变现方案及本人的一些变现经验的滚动式更新视频的集合。但是，由于目前视频太多了，全部查看很耗时间。所以，在2026年我将会把这些视频中的内容去粗取精重新录制一套完整的课程并且也长期期刊制更新，方便大家快速查询自己所感兴趣的内容，也就是即将开更的新的《远程自由职业实战》课程

目前所有技术课程主要放在一个线上的文档内，所有变现课程的视频都放在网盘内。后面将会融入新官网，方便会员朋友们浏览和学习

而技术课以及我们3R工作室共享的一些商业项目源码都放在自建的代码仓库中

🛠使用方法​

详细使用方法请查看3R教室的指南页（此处简短，但内容更加新，官网固定三个月左右更新一次）

以下是简单地使用步骤

1. 查看3R教室详情页或查看本文档（官网介绍的缩减版）
2. 如果没有疑问直接去3R教室详情页 滚动条拉到最底下扫描二维码购买会员（新版官网上线之后为下单购买，目前仍然扫码购买）。如果有疑问可以咨询客服微信【hidlthee_jia】或【newWorldSpace】（或扫码首页左侧工具栏的公众号/关注is3rcd）
3. 购买会员后加站长微信【iampincman】
4. 拉微信群和QQ群，默认只拉会员总群二、QQ会员群。如果需要进其他群（比如求职进微信内推群、海外生活和工作或留学等可以进海外群、高学历朋友需要被内推进大厂及外企可以进大厂与外企群），可以让客服或者站长拉一下
5. 如果是以学习为目的购买会员的朋友，无论学习技术还是运营，刚购买后都可以先和站长一对一一次，以便事半功倍的学习课程并更好地实现自己的目标（特别说明，站长一对一是不限次数的，后续有疑问可以随时联系站长一对一）
6. 学以致用，在边学习的同时，可以边实现你的目标，比如求职、接单、独立app开发销售等
7. 如果是招聘、投资、融资、推广等需要的会员，可以联系站长帮忙发布信息和对接

🗽 牛油果英语训练营​

一个由3R会员@慧敏同学运营的职场英语教学训练营

慧敏同学介绍：早期3R会员，哈工大毕业，雅思7.5+，目前在西班牙定居和工作

🌎欧欧全球收款解决方案​

一个由3R会员@opacity同学运营的全球收款和跨境电商运营手册，同时提供帮忙手动开通服务 ::: 详情查看官方介绍。优惠策略：原价59美刀，3R会员享$49 ::: 欧欧(opacity)同学介绍：最早的一批3R会员，曾是3R工作室开发主力，目前在某创业企业任技术总监

☕️bbk职场咨询与java教学​

一个由3R会员@勇敢的心bbk同学提供的IT职场咨询和java教学社区

勇敢的心bbk同学介绍：3R会员，目前运营一个200+的付费职场咨询和java教学社区

💻iovz云主机​

iovz长期为3R社区免费提供服务器助力。具有亚洲/欧美快速线路、免备案、高性价比等特性

我是3R编码及3R社区的站长，也是3r教室与3R工作室的创始人 —— pincman
我是一名生长在江南水乡(南浔古镇)、成长于江南水乡(绍兴古城)的88年老码农！
我热爱生活和Money，喜爱电影/乐器、昆曲/戏曲、写作/文学/书法/绘画、历史/天文/神秘科学等一切有意思的东西。曾经梦想成为一名文艺青年(或者作家?)，但岁月逐渐把我变成了一名长期从事编码工作但又爱搞点营销和折腾的"江湖人"。现在，是一名不折不扣的自由工作者/小微创业者(混日子专业户)，同时梦想成为一名终生编码者！

🙋‍♂️自我介绍​

07 年开始接触的编程，一开始接触的是Delphi，开发过当年比较热门的远控软件。 后来从 08-16 年一直从事 PHP 的 Web 项目以及云计算方面的开发，期间主要使用 Jquery，CI，Laravel，Symfony，Bootstrap 的技术。 17 年开始专注于 Typescript + React + Node.js + Rust 的编码工作，目前正在学习 Golang

目前主要工作是运营3r教室与3R工作室。因为自从做了这个官网稀里糊涂做到现在😅，貌似已经收入超过了打工一辈子所得了，所以应该还是会永久的继续自由工作下去...

经常逛这些网站：🌐3R编码、🌐3R酷、🌐哔哩哔哩、🌐知乎、🌐youtube、🌐谷歌、🌐github、🌐stackoverflow、🌐豆瓣... 以下只是展示一些站长个人擅长以及正在学习中的技术栈，与3R工作室团队或者3R教室无关

• 运维全家桶： Linux，Docker，K8S，CICD，Mysql，Mongodb，Redis，RabbitMQ 等
• CSS全家桶：TailwindCSS，Shadcn/ui，Antd，Arco Design，Mui，Bootstrap 等
• React全家桶： Vite，Webpack，React，React Native，React Router，React Query，React-DND，Mobx，Zustand，Nextjs，Taro，GraphQL 等
• Node全家桶： Bun，Electron，hono.js，Fastify，Nestjs，Typeorm，Prisma，Yargs，Cluster，PM2 等
• PHP全家桶： PHP，Laravel，Symfony，Workerman，wordpress 等
• 其它比较擅长：Delphi、Haskell、Perl
• 比较熟悉（也就是只能二开或改改）：Vue.js，Nuxtjs、Python、Rust
• 正在学习：Golang

同时站长也胜任：品牌形象设计，Logo 设计，原型设计，视频剪辑，电脑/手机组装修理等工作

站长用过或正在用以下工具 MacOS，VScode，Ecmas，PHPStorm，Sketch，OmniGraffle.Xmind，Navicat，Redis Manager，Typora，Obsidian，PicGo，Mweb，AI，PS，Final cut pro，Motion，PR，AE，Screenflow，Camtasia，Wordpress，Magento，Hexo，Docusaurus，NextCloud，Gitea，Drone，Oneinstack，Openstack，Discuz 等等

📱联系方式​

由于站长长年为自己996工作中，但常年有 “我是某某大厂程序员，会XXX技术，有外包吗？” 又或者 “帮我我找份远程工作” 等等这类抽象网友的加微信骚扰，所以站长把微信放到其它页面中了...你可以在3R教室中找到我的微信，如果有外包需求可以查看3R工作室介绍或直接通过教室成员页联系客户经理，给您造成不便表示抱歉，望谅解😄

但也可以通过以下方式找我

• 💬电报号：@pincman1988 (不保证一定在线)
• 📮邮箱: pincman@qq.com 或者 pincman1988@gmail.com

也欢迎通过点击页面上的工具栏关注我的社交账户哦！👏

🔭接单工作​

📣3R工作可以做的: 从产品的原型设计，形象设计，宣传视频，使用文档，到全平台（Macos，Windows，web，ssr，安卓，IOS，各类小程序）的编码开发，测试，构建部署，性能优化，SEO优化等

• 👉 本人接单不爱扯皮，价格和周期合适即可，442 付款
• 👉 客户发需求，客户或本人报价，确认合作后先付 4 成订金
• 👉 项目中期再付 4 成
• 👉 上线或交付源码后付尾款，第一年免费维护，第二年维护费另谈
• 👉 请自行制作原型设计稿或也可以由我推荐设计师(只负责推荐不负责参与设计)，没有设计稿或不愿意做设计稿的包不接

🍵教室工作​

因为 Typescript，React，Node 等技术体系在国内外都不是很卷，并且薪资也不错，使用范围广，语法友好等优点成为站长最爱的技术体系。所以本站以 Linux + Typescript + React + Node + 服务器运维与CICD 这个技术栈为主线来进行教学，成为这个技术栈中的一名布道者

以下 Typescript 或者说 ES6+ 能做的事（几乎无所不能）：

• 🍋 使用 Electron 可以直接开发桌面应用
• 🍋 使用 React + 各种UI库可以开发中后台
• 🍋 使用 Nextjs + Tailwind 可以开发任何类型的服务端渲染的网站
• 🍋 使用 Taro 可以开发各种跨平台小程序
• 🍋 使用 React Native 可以开发跨设备移动APP
• 🍋 使用 Fastify 可以开发轻量级API
• 🍋 使用 Nestjs 可以开发高性能的企业级后端
• 🍋 使用 Yargs 可以构建命令工具
• 🍋 使用 Docusaurus 可以构建知识分享网站
• 🍋 使用 Gatsbyjs 可以构建企业官网
• 🍋 使用 ThreeJS 可以构建3D世界
• 🍋 还有 AI，嵌入式等等的库在日新月异的增加

最让人感到兴奋的是，这套全栈开发的技能国外基本属于主流，类似于国内的 Spring Boot 和 Vue，但是因为不内卷的缘故，远程工作非常好找，薪资也比较可观，这个目前本人就在做。并且除此外，国内企业目前招聘岗位也很多，竞争力却不大，也很好找工作。最有价值的是，因为全栈开发，所以甚至可以直接脱离 996 的地狱模式，成为一名真正的自由职业者或独立开发者😄。

同时，为了会员同学有一个更好的技术变现前景。除了TS全栈开发的技术课外，站长还通过自己远程自由职业十几年的经验为基石，制作了一套掘金课以及同时提供一对一服务。 此课程主要涉及

• 🍋 海外(以及国内)远程外包项目接单渠道拓展和客户洽谈方法
• 🍋 知识付费、应用/系统/作品等售卖、平台经营盈利等被动收入的推广和圈粉方案
• 🍋 远程工作求职指导及职业规划

当然站长认为 React + Node 全栈开发也是有一些不足的，但是一些瑕不掩瑜的不足可以忽略，比如 React Native 性能对比 Flutter 会差一些等，这些问题是没多大影响的，没必要再去学个 Flutter，除非你自己有兴趣和空余时间。但是有一些还是比较致命的问题，比如 Node 在某些 CPU 密集型或者高并发处理时的表现实在差强人意，对于一些高要求应用显然无法达标，这时候你还可以自学一个简单但非常实用的编程语言 - Go。 Golang 作为对 TS 体系中 Node 后端的补足还是非常优秀的，尤其是在构建微服务和处理高性能需求方面很出色。

另外，学习TS全栈开发虽然天花板比较高，但这是个长期的过程。如果中间需要快速找一些技术变现的渠道，那么可以学习一下wordpress、strapi等，这些课程也在我们后续的计划之内。也可以先学习课程的《变现篇》，通过外包差价来实现一部分变现！

出于以上的所有原因，站长搭建了这个由 Docusaurus 编写的网站，用于分享和布道 Linux + Typescript + React + Node + 服务器运维与CICD 全栈开发的技能。

通过制作视频，编写文档，提供问答服务，开放工作室商业项目源码学习来开始 3R教室 等全方位探讨与教学，为同学们节省宝贵的学习时间用于干你想干的事

希望大家多多关注本站，关注我的B站或知乎号，站长会很快的更新和制作新的教程，谢谢各位同学的支持。

By the way

想搭建一个像小站一样的站点来吗？使用本站开发的 RowFish 开源主题立即可架设一个属于你自己的小站，并可通过知识分享平台引流，通过知识付费或产品出售以及接单盈利！

你是否正在遭遇这些困难或需求？那么加入3R教室正是时候

接下来一起来了解一下3R教室诞生的故事吧

原贴地址: https://eleduck.com/posts/ARfak9

这并不是故事，是我的亲生经历，分享出来的初衷是疑义相与析，希望能为大家打开打工外的更多的思路

从在电鸭上发布第一篇帖子开始，眨眼3个多月过去，从一开始的教培小白慢慢成长为大白😂，说说那些有趣和心酸的事儿。

🌓山重水复​

原本和朋友合伙经营一家小微软件公司，作为技术合伙人(其实也没啥技术含量)，2019年的疫情一来，公司的客户都自身难保，类似于网络和软件这类基本都不续费了，然后就一直走下坡路。因为个人以前开发过一款不可言说的软件，业余搞点外快，不过看着做了六七年的公司快倒闭了，实在不忍心就把自己开发的软件抛售了，然而还是杯水车薪，公司还是从15人变成10人，变成5人，最后就剩我两个光杆司令，然后又坚持了一年左右就解散了，不过产品卖了撑了一段时间。。。

吃了几年年老本，今年实在扛不住了就打算去找找工作试试。然而三四线城市大家都懂，尤其是浙江的三四线城市，因为疫情和经济双重打击，就剩这么少得可怜的几家外包公司，而且有两家是那种租了个民房，成天梦想上市的企业网站和小程序开发工作室，连社保都不打算给，薪资低的出奇，还需要单休，没道理可讲啊😅，再加上小城市基本都是后端java，前端vue，两者都不是我擅长的，还需要跟一帮应届生去卷几千一月感觉实在划不来，并且虽说是小型私企，老板都架子特别大，受不鸟

眼看快过金三银四了，赶紧放弃58(因为年纪太大，88年的，其它的APP知道的不多)，登录BOSS，刷着刷着，刷到了一家萧山在招聘的企业，一看Typescript,React,Node,Nestjs,会PHP更佳等等关键字，再一看薪资35k，直接眼冒金光，立马联系，结果去了两次面试和笔试，还真成了。然后就开开心心去上班啦，虽然每天来去累一点，但好在离湖州老家和居住地绍兴都比较近，来去也方便，比去深圳找工作靠谱很多。充满干劲就是上，然后做了一个月，到了发工资了，老板说款项没到，拖一拖。我想晚几天就晚几天呗，然后直接给晚跑路了，发了个红包给我表示抱歉，整个人直接差点晕过去😭

✨仙人指路​

从5月开始一直到7月初每天焦虑失眠就没睡过个整觉。实在找不到工作，然后就做了点视频教程放B站，然后做了个个人网站，再把原来的项目升级升级，重新整整放github上，到处发发，想弄点点赞，弄点star，想这样会不会求职起来会更方便，如果能顺带赚几个零花钱就更好了😋。诶，实在是无可奈何。后来因为一个开源项目建了个QQ群，在其它QQ群宣传，拉来20几个人，然后聊到失业问题，群里有个网友说我这个技术栈比较适合远程工作，可以去电鸭看看。出于好奇心理，打开了电鸭，同时也打开了我的未来。

第一眼看到电鸭这个社区映入眼帘的是一大片招聘信息，点进去几个发觉都是远程工作，然后就知乎一搜"什么是远程工作"，"远程办公是否靠谱"等关键字，发现这种模式正适合我这种情况--当时老婆二胎孕晚期在家无法出远门，背上一大堆房贷等债务，本地三线小城市又找不到合适技术栈的工作，寻思着能做个远程的临时工作先赚点钱也不错。然后电鸭上提交了一份简历，不过迟迟没人来联系，感觉应该希望渺茫。

这时候想起多年前的一个网站-v2ex，好像也有看到过远程工作相关的帖子，于是乎就去上面发了一贴。没想到真有人来找我了，然后面试笔试都是一气呵成的一次性过，就开始抱着做做看的态度先试试。薪资比较低，才15k，还包含了折现的社保，而且是私人小外包公司，诶，家里事多，是真的懒得去搞。。。

后来又去电鸭逛逛，正好看到一个node+php的职位在招聘，20多k，立马点开联系方式，是一家台湾的公司，当然因为技术栈比较符合，也是面试笔试一下就比较流畅地进去了。这家公司各方面相对来说是比较正规的公司了，甚至五险一金都会找当地财务给代缴，这么优质的工作，当然立马有干劲啦，哈哈(至今还和他家联系着，帮他们内推一些同学)。但是做了没多久，我家二宝要出来了，实在忙不过来，因为以前一直自己合伙创业，没啥这方面的经验，所以没有协商，干脆选择了暂时辞职，也是非常抱歉的说。但是公司还是很客气的，做了没几天，薪资是按全职的薪资算给我的。

后面家里的事情处理完毕，又开始找工作了，不过这时对远程办公方面已经有一定经验了，知道的平台也有好几个，这次选择了领英的一个TS全栈开发的职位，是一家多伦多的华人公司(后续来说，枫叶国对我个人来说，真是块幸运之地，虽然没去过，哈哈)，同样顺利地通过了笔试面试。并且薪资开出了税后32k，也是可以在国内代缴五险一金等社保，而且14薪的。因为PM是歪果仁，所以前面工作非常累，每次都是PM说话，我录制语音，接着有道翻译，最后整理出中文文字版，原本955的工作硬生生被我自己搞到996，后来换了个华人PM，再加上Notion的熟练，事情就变得简单许多了。因为工作效率还可以，业余时间就是开始想着搞点外快，想来想去不知道搞啥，想过做跨境电商卖家乡的丝绸，童装，婚纱之类，也想过写写小说，做做电影解说等等。。。

🐳柳暗花明​

还是后来一位群友(也是3R教室的第二期同学)给我打开了思路，看来还是得有群👏。那天正在群里讨论大家都在哪边工作，我说了，找了份远程工作，那位同学就好奇，远程还能工作，怎么工作的。然后我一一介绍了一下，他瞬间来了兴趣，因为国内比较卷，经济又不行，这位兄弟工作一直996，然后天天担心被裁，所以就去尝试找一找远程工作。因为他是spring+vue全栈开发，这在国内是主流，然而远程工作一般都是海外的，用这套的并不比其他技术栈多，但是竞争却异常激烈，所以就没下文了。但是他给我打开了思路，我在想，我本身用TS+React+Node.js/Nestjs这套技术求职远程多份都很顺利，能不能同样地把这套技术交给一些感兴趣的同学，然后这些同学可以去尝试求职远程办公呢？后来因为在电鸭发了个露脸帖子，有个新西兰的外包需求找到我了，同样也是指定用这套技术，于是顺利接单了。后面那个加拿大的老板可能看我比较空吧，时不时给点额外的外包给我做，甚至直接把客户推给我，然后类似的外包单子也越来越多，一个人根本接不下来，但是有钱不赚那不是onebadie嘛😛，然后又想着，如果教一些同学，让他们业余做点兼职帮我做外包，自己赚个差价呢？

于是立即头脑风暴一下，再加上原本做视频教程积累了一帮粉丝，于是就开始想装一回B啦。在自己的网站上加了个3R教室的栏目，提供所谓3R服务(Remote Learn,Remote Work,Remote Order)，远程TS全栈开发学习，远程工作求职指导，远程外包任务分配的闭环服务。

一开始抱着玩玩的心态，收费3700，尝试在自己的群里问了一下，直接来了7位同学报名，这效果连我自己都惊呆啦，清楚地记得那天是2022年8月10号。不过说实话，第一期来报名的同学大多只冲着学习TS全栈来的，对远程工作和外包的兴趣并不大。

🌱向死求生​

9月份的时候，第二期打算尝试招一批专门喜欢整个3R思维的同学来报名，然后就在v2ex，电鸭，知乎等社区发帖，同时勤快地更新B站视频，然后第二期又来了9位同学报名，第二期跟第一期不一样的地方在于，来报名的都是来自世界各地的华人，有台湾的，有美国的等等，后面两期这个现象越来越明显，海外学员占比越来越多。其实这时已经有些忙不过来了，因为同一时间外包也多了起来。这时要经营下去，只能选择辞职，要么不再招第三期，一二期教完，只当玩一场。当然后来毅然选择了辞职，因为人嘛，有时候是要有点梦想，实现梦想有时候是需要冒险的。但是等到9月底第三期开始，还不知道哪里去招生，因为该发的社区全发过了，老发广告贴应该会适得其反。。。不过天不厌一个有梦想并为此付出实践的人，因为这时一位新加坡的同学救活了3R，成为了3R教室的长期合作伙伴，开始帮我招生了(前面一直在我的群里发些他们公司的招聘信息)。三期微信群和Learnku社区两个地方也来了好几位同学，结果他帮忙一推，本来打算10人的三期变成了25人，同样的第四期各种搜索引擎，社区再加上那位新加坡的同学推荐过来的订阅者和3R同学加起来近30人。目前新加坡合作的朋友，其他同学推荐，搜索引擎，微信群等学生来源已经占据主流，希望后续慢慢地可以完全脱离社区发帖吧。目前(截止2022年12月3号)3R教室的成果是 订阅者 7人，学员70人，有来自大陆，台湾，瑞典，新加坡，美国，加拿大，澳大利亚等世界各地的同学，短短3个多月尽我所能也算是做了一份能力范围内的事业吧。

同时外包方面，也是遇到一位比较合得来的丹麦(现已居杭州)朋友，专门帮忙介绍客户过来，并且还为3R教室注入了一大笔个人启动资金，也长期为3R教室提供一些远程岗位。此外也有一位来自加拿大的朋友，长期提供外包项目，同时还有社区找过来的新西兰，台湾，美国等多个地区的客户，甚至前期Boss直聘也带来一位非常高质量的客户，大多数客户都非常专业，提供详细设计图和需求文档，部分非专业IT公司的传统行业客户也会另外找人做好，并且全部严格按照442方式微信转账及直接打银行卡付款，大多数外包在稳步推进，部分已经完结或即将完结。因为外包比较多，大部分分配出去给学员兼职做，已经渐渐形成闭环。

对于远程工作方面，目前有多个方面来提供远程岗位，首先是帮我推荐学生的新加坡朋友，他固定提供长期的高端TS全栈(React/Nextjs/Nestjs/Deno/Rust等等)远程岗位，其次是丹麦的投资人，固定长期提供React+PHP/Rails方面的中低端远程岗位，另外还有前面的台湾老东家，偶尔也会提供一些React,React Native方面的远程岗位，以及我自己长期提供外包兼职机会，目前来说岗位并不是很多，也不丰富，但是毕竟刚刚起步，需要走的路还是非常远的，我要做的并不是包就业的培训班，内推只是其中3R免费附加的一项服务，并不是重点，专门提供远程岗位也不是3R理念中应该做的，3R要做的最重要的是指导同学学好这套技术栈去合适的平台寻找合适自己的工作，比如电鸭，领英这些专业的远程岗位提供平台。

🍀后事之师​

各位同学对目前的大环境多多少少有些了解，因为经济下滑，目前国内IT环境是非常内卷的，尤其是 Vue，Java，Python 等在国内非常流行的技术，被卷到白菜价，同时由于疫情影响导致线下工作多多少少会比较麻烦，加上一线城市的高额生活成本以及长期加班无法兼顾家庭和生活，这也倒逼我们这些中低端码农需要做一些改变来Get到新的机会，并拓展自己的思维从而提升收入，实现自由。

于此同时，一些海外发达国家的劳务用工费用高得出奇，非常想用其它国家或地区的IT人来降低运营成本。然而大多数需要远程工作人员的企业或外包需求者所要求的技术栈与国内大多数坐班企业的要求是不一样的。对于求职者和接单者来说使用国内的热门技术（Java、PHP、Vue之类）去寻找远程机会时，得到反馈少之又少，就算偶尔有一个一般也会瞬间被卷走。反之 TS、React、Node.js、Go 等新兴技能甚至 Ruby 之类国内无人问津的技术却在各种远程工作Offer和外包需求中持续刷榜，尤其以TS全栈开发为甚，远程工作机会极少会遇到国内高校和培训班里教的最多的 Java，Vue 等。

就以本人自己的工作经历为例子对国内外远程全职工作和外包做一个对比吧

全职工作对比

本地和远程外包对比

下面对本人创业以来承接并完成的外包单子做一下对比

站长给出的建议是，学习好TS全栈开发，然后开始找第一份远程工作，习惯并体验一下，不要想第一次就找长期高薪的，适应一段时间后慢慢选择更好的。同时远程工作虽然多了很多自由和陪家人的时间，不过也同时失去了社交，所以在工作的同时十分建议大家去维护好社交圈，因为总有一天你会有做不动的时候，在这之前你需要有一份自己的事业。我这里建议大家在周末的时候多接一些海外的远程外包做做，尽量承接一些简单不影响工作又可以拓展人脉的单子，这对以后是非常有用的。尤其在外包比较多的时候直接尝试自由职业也是一种不错的选择，这也是站长目前在做的。

另外对于远程招聘和发包者来说，我们拥有规范的开发流程与包含各种技术栈的稳定团队，不仅有兼职者，同时也有处于自由职业状态，随时可以全职的同学，我们的协作模式可以参考3R教室。

到目前为止(进行到第五期)，整个3R闭环已经形成，我也有了自己的小团队(由一二期的部分同学和订阅者组成)，后面期待随着业务的扩大，能有更多的长期合作外包客户加入，有更多热爱学习技术的同学加入，有更多需要这项技术栈的远程岗位提供者加入，一起把3R这个理念推广开来，让更多的人习惯于远程学习，远程工作，远程自由接单，更高的收入，更好的生活，干自己更感兴趣的事。期待你的加入，报名3R教室请点 此处

🌾有关收益​

收益的确是每个月都在增长，差不多相当于打工的2-2.5倍左右，但是付出更多的是汗水，需要备课，周末教学，独立做外包，或者对分配给学生的外包把控项目进度，客户需求跟进，帮人招聘到处挖人，帮人求职时对简历，项目的包装以及求职指导等等。不过相信这一切都是值得的，也希望3R会帮到越来越多的人

============================== 更新 ==============================

🌵更新​

自从上一次发文之后，又过了好长一段时间了，3R教室已经运转140，转眼就是元旦，祝大家新年快乐！💐💐💐

现在3R教室已经有快100位同学，感谢电鸭，感谢Learnku，感谢谷歌！

新年伊始，我们3R的讲课模式和课程内容也开始全面升级，进行了一次大翻新，期望能让更多的同学更好地学习和接受知识。

🎓讲课模式​

因为原来直播+录制模式导致课程时长过长。很多海外的同学又有时差，无法跟进直播，只能去看录制，而过长的直播时长，很多无用的聊天和废话使许多海外或者没时间上课的同学在看录制时不断地需要拉进度条，甚至放弃视频直接看文档为主了，所以新课改为录制剪辑好的视频直接发送来替代原来的直播模式。这样做会有许多优点

• 同学们可以随时随地的学习，而不受时间束缚，就算报名后突然没有时间，也可以过段时间再学习，视频也能跟着最新的技术栈更新，后续用到某个技术点的时候拿出来复习即可。而原来的方式，每一期的直播教学内容都是有些调整的，因为课程技术栈一直会更新，上新课之后就是5年后同学们拿到的视频和文档以及源码也是最新技术栈和生态的内容，这使得教学质量会更高

• 不再有所谓哪一期的限制，这样做就不需要一个所谓的固定的学习期限内学习完，可以一个月内学完，也可以等有时间断断续续学习，哪怕两年后依然能学习到最新的TS全栈开发知识。并且飞书一个群里就可以永久问答，不需要一下子在本期教室群一下子在总群循环切换来提问，所有常见问题一个群就可以统计

📝课程内容​

新课的目录表请查看官网

因为讲课模式的改变，所以新课的内容和目录变得更加丰富与精细，因为不需要再在指定时间两小时内讲完一大部分的内容，而且切割成一小个一小个的小节，所以很多旧课程没有的东西，比如OAuth等等，都能加进去。

另外关于零基础的同学，我们目前有成熟的入门文档和助教预教学来带同学们入门

✨重点方向​

虽然3R中的远程工作和远程外包我们会持续扩展，但是后面我们会把更多地精力放在为同学们提供远程自由职业及被动收入的创意上。

为什么这样做呢？

因为经过这段时间的摸索，发觉很多远程工作和外包开发的同学活得也比较累，虽说时间上的确是比较自由，但是花进去的碎片化时间可能比坐班还要更多，再加上无限的视频会议让人喘不过气。反倒是部分在搞个人作品或者平台的自由职业的同学不仅仅收入特别高，而且比较轻松，大多都是睡后至少也是被动收入。经过一段时间的调研和思考，我们发觉无论远程上班还是坐在公司上班又或是主动做外包，都很难有真正的自由，打工也并不是长久之计。所以后面后续规划将另辟蹊径，把需要3R教室的自由职业，创业以及被动收入等创意专门搞一个创意墙，然后把更多周边已经成功的朋友和同学的思路放上去，最后集思广益，去粗取精，使得大家可以更好地实现真正的被动收入

3R教室每个周末还会有个专门的茶话会去聊被动收入，睡后收入的方向与创意，鼓励更多的同学去实现

• 2022-06-22
  平克小站正式上线
• Rowfish正式开源
  2022-07-01
• 2022-07-06
  与愧怍小站交换链接
• v.3rcd.com(Rowfish Pro)上线[已废弃]
  2022-07-09
• 2022-07-10
  知乎上来了一位订阅者，3R第一位付费用户
• 2022-07-17
  站长入职第一份国内远程工作
• 在boss直聘上承接第一个来自浙江杭州的项目: "诺思网站"
  2022-07-19
• 2022-07-21
  与第一份远程工作解约
• 签约第二份台湾远程工作
  2022-07-27
• 2022-08-01
  Rowfish被加入docusaurus官方的showcase
• git.3rcd.com上线
  2022-08-01
• 2022-08-05
  因家庭事务主动离职
• 2022-08-11
  3R教室正式开始第一期(8名学员)，收费2999
• 飞书群及3R内部群上线
  2022-08-12
• 2022-08-14
  签约第三份加拿大远程工作
• 废弃v.3rcd.com
  2022-08-15
• 2022-09-01
  3R教室开始第二期(12名学员)，收费3699
• 承接来自台湾的"双北小宠物网站"项目
  2022-09-03
• 2022-09-13
  承接来自美国的"Goflashdeal"项目
• 辞职后全职经营3R教室
  2022-09-25
• 2022-10-01
  3R教室第三期开始(25名学员)，收费不变
• 获得来自丹麦的一笔"98w"的投资
  2022-10-07
• 2022-10-08
  承接来自新西兰的"Lubolu"项目
• 承接来自加拿大的"Youni"项目
  2022-10-18
• 2022-10-22
  玛卡巴卡成为助教
• 3R教室第四期开始(22名学员)，收费不变
  2022-11-01
• 2022-11-09
  承接来自丹麦的"旅游看客APP"项目
• 承接来自加拿大的"移民网站"项目
  2022-12-01
• 2022-12-05
  3R教室第五期开始(24名学员)，收费不变
• 承接来自新加坡的"kro crm"项目
  2022-12-09
• 2022-12-13
  欧欧成为项目总负责人
• 承接来自加拿大的N个"爬虫"项目
  2022-12-15
• 2022-12-19
  承接来自浙江-绍兴的"同城直播交友小程序"项目
• 新课上线,持续招生,不再分期(13名学员),收费不变
  2023-01-01
• 2023-01-03
  3R教室纯营收突破50w(投资除外)
• 承接来自芬兰的"tradovel"项目
  2023-01-10
• 2023-01-11
  CC辰成为客户经理
• 突破100名学员
  2023-01-12
• 2023-01-16
  外包团队正式成立
• 翻译小组正式成立
  2023-01-18
• 2023-01-21
  新年快乐
• 社区开始开发
  2023-01-23
• 凌晨，上线此3R教室时间线
  2023-01-24
• 2023-01-24
  3R教室收费调整为4199
• 3R教室成员: 226人
  2023-05-07
• 2023-07-01
  3R英语教室成立: 讲师 @慧敏
• 3R教室会员费调整为4599，成员: 410人
  2023-10-01
• 2023-10-05
  3R工作室正式成立(原3R外包团队)
• 来自美国-波特兰的Sandy的爬虫项目开工
  2023-10-20
• 2023-11-1
  3R会员三哥的招财猫项目正式开工
• 来自英国客户的多租户商城项目开工
  2023-11-1
• 2023-11-21
  3R教室会员454人，盈利190w
• 专职助教: @cloneable，@愧怍
  2023-11-01
• 2023-11-01
  工作室开发者15人，主力开发: @欧欧，@愧怍
• 3R工作室进行中或已完结的项目(90%海外) 16个，总费用140w，利润60w
  2023-11-21
• 2023-11-21
  3R编码(教室与工作室)股东7人，分红售卖 190w
• 3R编码(教室与工作室)总收入 440w
  2023-11-21

装饰器用于给类,方法,属性以及方法参数等增加一些附属功能而不影响其原有特性。其在Typescript应用中的主要作用类似于Java中的注解,在AOP(面向切面编程)使用场景下非常有用。

面向切面编程（AOP） 是一种编程范式，它允许我们分离横切关注点，藉此达到增加模块化程度的目标。它可以在不修改代码自身的前提下，给已有代码增加额外的行为（通知）

装饰器一般用于处理一些与类以及类属性本身无关的逻辑,例如: 一个类方法的执行耗时统计或者记录日志,可以单独拿出来写成装饰器。

看一下官方的解释更加清晰明了

装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上。 装饰器使用 @expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。

如果有使用过spring boot或者php的symfony框架的话,就基本知道装饰器的作用分别类似于以上两者注解和annotation，而node中装饰器用的比较好的框架是nest.js。不过不了解也没关系,接下来我就按我的理解讲解一下装饰器的使用。

不过目前装饰器还不属于标准，还在建议征集的第二阶段，但这并不妨碍我们在ts中的使用。只要在 tsconfig.json中开启 experimentalDecorators编译器选项就可以愉快地使用啦^^

{
    "compilerOptions": {
        "target": "ES5",
        "experimentalDecorators": true
    }
}

基本概念​

可能有些时候，我们会对传入参数的类型判断、对返回值的排序、过滤，对函数添加节流、防抖或其他的功能性代码，基于多个类的继承，各种各样的与函数逻辑本身无关的、重复性的代码。

比如,我们要在用户登录的时候记录一下登录时间

const logger = (now: number) => console.log(`lasted logged in ${now}`);

class User {
  async login() {
    await setTimeout(() => console.log('login success'), 100);
    logger(new Date().valueOf());
  }
}

以上代码把记录日志的代码强行写入登录的逻辑处理,这样代码量越高则代码越冗余。我们需要把日志逻辑单独拿出来，使login方法更专注于处理登录的逻辑,接下去我们用高阶函数模拟一下装饰器的原理,以便于后面更好的理解装饰器。

/**
 * 使用高阶函数
 * 柯里化解构登录与日志记录
 */

type DecoratorFunc = (
    target: any,
    key: string,
    descriptor: PropertyDescriptor,
) => void;

// 模拟的装饰器工厂函数
const createDecorator =
    (decorator: DecoratorFunc) => (Model: any, key: string) => {
        // 获取即将使用装饰器的类原型
        const target = Model.prototype;
        // 获取这个原型上某个方法的描述
        const descriptor = Object.getOwnPropertyDescriptor(target, key);
        // 更改描述,生成新的方法
        decorator(target, key, descriptor);
    };

const logger: DecoratorFunc = (target, key, descriptor) =>
    // 将修改后的函数重新定义到原型链上
    Object.defineProperty(target, key, {
        ...descriptor,
        value: async (...args: any[]) => {
            try {
                return descriptor.value.apply(this, args); // 调用之前的函数
            } finally {
                const now = new Date().valueOf();
                console.log(`lasted logged in ${now}`);
            }
        },
    });

class User {
    async login() {
        console.log('login success');
        await new Promise((resolve) => {
            setTimeout(resolve, 100);
        });
    }
}

export const exp1 = () => {
    console.log();
    console.log(
        '-----------------------示例1:高阶函数柯里化(装饰器内部原理)-----------------------',
    );
    console.log(
        '-----------------------实现登录和日志记录解耦-----------------------',
    );
    console.log();
    const loggerDecorator = createDecorator(logger);
    loggerDecorator(User, 'login');
    const user = new User();
    user.login();
    console.log();
    console.log('-----------------------示例1:执行完毕-----------------------');
};

// 控制台输出
// login success
// 停顿100ms
// lasted logged in 1571771681793

了解了以上概念,接下去让我们学习真正的装饰器。

装饰器类型​

TS中的装饰器有几种类型，如下：

• 参数装饰器

• 方法装饰器

• 访问符装饰器

• 属性装饰器

• 类装饰器

以上每中装饰器分别可以作用于类原型(prototype属性)和类本身

类装饰器​

TS官方文档中举了一个类装饰器的例子,也可以看一下。类装饰器其实就是把我们本身的类传入装饰器注解中,并对这个类或类的原型进行一些处理，仅此而已。例如：

const HelloDerorator = <T extends new (...args: any[]) => any>(
    constructor: T,
) => {
    return class extends constructor {
        newProperty = 'new property';

        hello = 'override';

        sayHello() {
            return this.hello;
        }
    };
};

@HelloDerorator
export class Hello {
    [key: string]: any; // 此处用于防止eslint提示sayHello方法不存在

    hello: string;

    constructor() {
        this.hello = 'test';
    }
}

const exp2 = () => {
    console.log(
        '-----------------------示例2:简单的类装饰器-----------------------',
    );
    console.log(
        '-----------------------动态添加一个sayHello方法以及覆盖hello的值-----------------------',
    );
    console.log();
    const hello = new Hello();
    console.log(hello.sayHello());
    console.log();
    console.log('-----------------------示例2:执行完毕-----------------------');
};


// 控制台打印 override

装饰器工厂​

上面的方法我们为UserService添加了一个HelloDerorator装饰器，这个装饰器的属性将覆盖UserService的默认属性。为了方便给装饰器添加其它参数，我们把HelloDerorator改造成为一个装饰器工厂,如下：

const SetNameDerorator = (firstname: string, lastname: string) => {
    const name = `${firstname}.${lastname}`;
    return <T extends new (...args: any[]) => any>(target: T) => {
        return class extends target {
            _name: string = name;

            getMyName() {
                return this._name;
            }
        };
    };
};

@SetNameDerorator('jesse', 'pincman')
class UserService {
    getName() {}
}

const exp3 = () => {
    console.log();
    console.log(
        '-----------------------示例3:装饰器工厂-----------------------',
    );
    console.log(
        '-----------------------通过继承方式 重载getName方法-----------------------',
    );
    console.log();
    const user = new UserService();
    console.log(user.getName());
    console.log();
    console.log('-----------------------示例3:执行完毕-----------------------');
};

// 控制台打印 jesse.pincman

其它用法​

我们还可以对类原型链property上的属性/方法和类本身的静态属性/方法进行赋值或重载操作，还可以重载构造函数，如下：

type UserProfile = Record<string, any> & {
    phone?: number;
    address?: string;
};

const ProfileDecorator = (profile: UserProfile) => (target: any) => {
    const Original = target;
    let userinfo = '';
    Object.keys(profile).forEach((key) => {
        userinfo = `${userinfo}.${profile[key].toString()}`;
    });
    // 添加一个原型属性
    Original.prototype.userinfo = userinfo;
    // 使用函数创建一个新的类(类构造器),返回值为传入类的对象,这样就重载了构造函数
    function constructor(...args: any[]) {
        console.log('contruct has been changed');
        return new Original(...args);
    }
    // 赋值原型链
    constructor.prototype = Original.prototype;
    // 添加一个静态属性
    // constructor.myinfo = `myinfo ${userinfo}`;
    return constructor as typeof Original;
};

// 因为静态属性是无法通过[key: string]: any;获取类型提示的,所以这里添加一个接口用于动态各类添加静态属性
interface StaticUser {
    new (): UserService;
    myinfo: string;
}

@ProfileDecorator({ phone: 133, address: 'zhejiang' })
class ProfileService {}

const exp4 = () => {
    console.log();
    console.log(
        '-----------------------示例4:修类的构造函数,原型属性,静态属性等-----------------------',
    );
    console.log(
        '-----------------------设置原型属性值,重载构造防反,添加静态属性-----------------------',
    );
    console.log();
    // console.log((ProfileService as unknown as StaticUser).myinfo);
    const profile = new ProfileService();
    console.log((profile as any).userinfo);
    console.log();
    console.log('-----------------------示例4:执行完毕-----------------------');
};

// 打印静态属性则控制台输出 myinfo .133.zhejiang
// 控制台输出 contruct has been changed
// 控制台输出 .133.zhejiang

属性装饰器​

属性装饰器一般不单独使用，主要用于配合类或方法装饰器进行组合装饰

参数​

属性装饰器函数有两个参数：

target

对于普通属性，target就是当前对象的原型，也就是说，假设 Employee 是对象，那么 target 就是 Employee.prototype

对于静态属性，target就是当前对象的类

propertyKey

属性的名称

使用示例​

const userRoles: string[] = [];

// 通过属性装饰器把角色赋值给userRoles
const RoleDerorator = (roles: string[]) => (target: any, key: string) => {
    roles.forEach((role) => userRoles.push(role));
};

// 根据userRoles生成Roles对象并赋值给类原型的roles属性
const SetRoleDerorator = <
    T extends new (...args: any[]) => {
        [key: string]: any;
    },
>(
    constructor: T,
) => {
    const roles = [
        { name: 'super-admin', desc: '超级管理员' },
        { name: 'admin', desc: '管理员' },
        { name: 'user', desc: '普通用户' },
    ];
    return class extends constructor {
        constructor(...args: any) {
            super(...args);
            this.roles = roles.filter((role) => userRoles.includes(role.name));
        }
    };
};

@SetRoleDerorator
class UserEntity {
    @RoleDerorator(['admin', 'user'])
    roles: string[] = [];
}

export const exp5 = () => {
    console.log();
    console.log(
        '-----------------------示例5:属性装饰器-----------------------',
    );
    console.log(
        '-----------------------使用装饰器根据权限过滤用户列表-----------------------',
    );
    console.log();
    const user = new UserEntity();
    console.log(user.roles);
    console.log();
    console.log('-----------------------示例5:执行完毕-----------------------');
};

// 控制台输出 [ { name: 'admin', desc: '管理员' }, { name: 'user', desc: '普通用户' } ]

方法装饰器​

在一开始我们介绍了装饰器的原理,其实这就是方法装饰器的原始实现。与属性装饰器不同的是,方法装饰器接受三个参数

方法装饰器重载的时候需要注意的一点是定义value务必使用function，而不是箭头函数，因为我们在调用原始的旧方法使用会使用到this，如：method.apply(this, args)，这里的this指向需要function来定义，具体原因可参考我的另一篇文章apply,bind,call使用

参数​

target

对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。

key

方法名称

descriptor: PropertyDescriptor

方法的属性描述符(最重要的参数)

属性描述符​

属性描述包含以下几个属性

• configurable?: boolean; // 能否使用delete、能否修改方法特性或修改访问器属性

• enumerable?: boolean; 是否在遍历对象的时候存在

• value?: any; 用于定义新的方法代替旧方法

• writable?: boolean; 是否可写

• get?(): any; // 访问器

• set?(v: any): void; // 访问器

接下来我们使用方法装饰器修改一开始的装饰器原理中的登录日志记录器

const loggerDecorator = () => {
    return function logMethod(
        target: any,
        propertyName: string,
        propertyDescriptor: PropertyDescriptor,
    ): PropertyDescriptor {
        const method = propertyDescriptor.value;

        // 重载方法
        propertyDescriptor.value = function async(...args: any[]) {
            try {
                return method.apply(this, args); // 调用之前的函数
            } finally {
                const now = new Date().valueOf();
                console.log(`lasted logged in ${now}`);
            }
        };
        return propertyDescriptor;
    };
};

class UserService {
    @loggerDecorator()
    async login() {
        console.log('login success');
        await new Promise((resolve) => {
            setTimeout(resolve, 100);
        });
    }
}

export const exp6 = () => {
    console.log();
    console.log(
        '-----------------------示例6:方法装饰器-----------------------',
    );
    console.log(
        '-----------------------使用装饰器重写示例1-----------------------',
    );
    console.log();
    const user = new UserService();
    user.login();
    console.log();
    console.log('-----------------------示例6:执行完毕-----------------------');
};

// 控制台输出结果与前面的示例1相同

参数装饰器​

一个类中每个方法的参数也可以有自己的装饰器。

与属性装饰器类似，参数装饰器一般不单独使用，而是配合类或方法装饰器组合使用

参数​

1. target: 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。

2. key:方法名称

3. index: 参数数组中的位置

比如我们需要格式化一个方法的参数,那么可以创建一个转么用于格式化的装饰器

// 参数格式化配置
const parseConf: ((...args: any[]) => any)[] = [];

export const parse =
    (parseTo: (...args: any[]) => any) =>
    (target: any, propertyName: string, index: number) => {
        parseConf[index] = parseTo;
    };

// 在函数调用前执行格式化操作
export const parseDecorator = (
    target: any,
    propertyName: string,
    descriptor: PropertyDescriptor,
): PropertyDescriptor => {
    console.log('开始格式化数据');
    return {
        ...descriptor,
        value(...args: any[]) {
            // 获取格式化后的参数列表
            const newArgs = args.map((v, i) =>
                parseConf[i] ? parseConf[i](v) : v,
            );
            console.log('格式化完毕');
            return descriptor.value.apply(this, newArgs);
        },
    };
};

export interface UserType {
    id: number;
    username: string;
}

class UserService {
    private users: UserType[] = [
        { id: 1, username: 'admin' },
        { id: 2, username: 'pincman' },
    ];

    getUsers() {
        return this.users;
    }

    @parseDecorator
    delete(@parse((arg: any) => Number(arg)) id: number) {
        this.users = this.users.filter((userObj) => userObj.id !== id);
        return this;
    }
}

export const exp78 = () => {
    console.log();
    console.log(
        '-----------------------示例7:参数装饰器-----------------------',
    );
    console.log('-----------------------格式化参数-----------------------');
    console.log();
    const userService = new UserService();
    userService.delete(1);
    console.log(userService.getUsers());
    console.log();
    console.log('-----------------------示例7:执行完毕-----------------------');
};


// 控制台输出: [ { id: 2, username: 'pincman' } ]

访问器装饰器​

访问器其实只是那些添加了get,set前缀的方法，用于使用调用属性的方式获取和设置一些属性的方法，类似于PHP中的魔术方法__get,__set。其装饰器使用方法与普通方法并无差异，只是在获取值的时候是调用描述符的get和set来替代value而已。

例如，我们添加一个nickname字段，给设置nickname添加一个自定义前缀，并禁止在遍历user对象时出现nickname的值，添加一个fullname字段，在设置nickname时添加一个字符串后缀生成。

export const HiddenDecorator = () => {
    return (
        target: any,
        propertyName: string,
        descriptor: PropertyDescriptor,
    ) => {
        descriptor.enumerable = false;
    };
};

export const PrefixDecorator = (prefix: string) => {
    return (
        target: any,
        propertyName: string,
        descriptor: PropertyDescriptor,
    ) => {
        return {
            ...descriptor,
            set(value: string) {
                descriptor.set.apply(this, [`${prefix}_${value}`]);
            },
        };
    };
};

export class UserEntity {
    private _nickname: string;

    // @ts-ignore
    private fullname: string;

    @HiddenDecorator()
    @PrefixDecorator('jesse_')
    get nickname() {
        return this._nickname;
    }

    set nickname(value: string) {
        this._nickname = value;
        this.fullname = `${value}_fullname`;
    }
}

export const exp78 = () => {
    // ...

    console.log();
    console.log(
        '-----------------------示例8:get/set装饰器-----------------------',
    );
    console.log(
        '-----------------------禁止nickname出现在遍历中,为nickname添加前缀-----------------------',
    );
    console.log();
    const user = new UserEntity();

    user.nickname = 'pincman';
    console.log(user);
    console.log(user.nickname);
    console.log();
    console.log('-----------------------示例8:执行完毕-----------------------');
};

// 第一个console.log控制台输出,可以看到遍历对象后并没有nickname字段的值
// UserService {
//  users: [ { id: 1, username: 'admin' }, { id: 2, username: 'pincman' } ],
//  roles: [],
//  hello: 'test',
//  password: '123456',
//  _nickname: 'gkr__lichnow',
//  fullname: 'gkr__lichnow_fullname'
//}
// 第二个console.log控制台输出
// gkr__lichnow

装饰器写法​

通过装饰器重载方法有许多写法，可以根据自己的喜好来，以下举例几种

继承法​

一般用于类装饰器中添加属性或方法，例如：

 return <T extends new (...args: any[]) => any>(target: T) => {
    return class extends target {
      getMyName() {
        return this._name;
      }
    };
  };

原型法​

一般用于类装饰器上重载构造函数以及添加属性或方法，例如：

const ProfileDerorator = (profile: UserProfile) => {
  return (target: any) => {
    const original = target;
    function constructor(...args: any[]) {
      console.log('contruct has been changed');
      return new original(...args);
    }
    // 赋值原型链
    constructor.prototype = original.prototype;
    // 添加一个静态属性
    constructor.myinfo = `myinfo ${userinfo}`;
    return constructor as typeof original;
  };
};

赋值法​

一般用于方法装饰器上修改某个描述符，例如

const loggerDecorator = () => {
  return function logMethod(
    target: Object,
    propertyName: string,
    propertyDescriptor: PropertyDescriptor,
  ): PropertyDescriptor {
    const method = propertyDescriptor.value;
    // 重载方法
    propertyDescriptor.value = function async (...args: any[]) {...};
    return propertyDescriptor;
  };
};

展开法​

与赋值法类似，只不过使用ES6+的展开语法，更容易理解和使用，例如

const parseFunc = (
  target: Object,
  propertyName: string,
  descriptor: PropertyDescriptor,
): PropertyDescriptor => {
  return {
    ...descriptor,
    value(...args: any[]) {
      // 获取格式化后的参数列表
      const newArgs = parseConf.map((toParse, index) => toParse(args[index]));

      return descriptor.value.apply(this, newArgs);
    },
  };
};

元信息反射 API​

元信息反射 API （例如 Reflect）能够用来以标准方式组织元信息。而装饰器中的元信息反射使用非常简单，外观上仅仅可以看做在类的某个方法上附加一些随时可以获取的信息而已。

使用之前我们必须先安装reflect-metadata这个库

npm i reflect-metadata --save

并且在tsconfig.json中启用原信息配置

{
    "compilerOptions": {
        "target": "ES5",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    }
}

基本使用​

我们看一下TS官方的示例是如何通过反射API获取属性设计阶段的类型信息的。

需要注意的是目前预定义的元信息只有三种

• 类型元信息: design:type。

• 参数类型元信息: design:paramtypes。

• 返回类型元信息: design:returntype。

import 'reflect-metadata';

import { parse, parseDecorator, UserType } from './exp7-8';

class Point {
    x: number;

    y: number;
}

class Line {
    private _p0: Point;

    private _p1: Point;

    @validate
    // 这句可以省略,因为design:type是预定义属性
    // @Reflect.metadata('design:type', Point)
    set p0(value: Point) {
        this._p0 = value;
    }

    get p0() {
        return this._p0;
    }

    @validate
    // @Reflect.metadata("design:type", Point)
    set p1(value: Point) {
        this._p1 = value;
    }

    get p1() {
        return this._p1;
    }
}

function validate<T>(
    target: any,
    propertyKey: string,
    descriptor: TypedPropertyDescriptor<T>,
) {
    const { set } = descriptor;
    descriptor.set = function (value: T) {
        const type = Reflect.getMetadata('design:type', target, propertyKey);
        if (!(value instanceof type)) {
            throw new TypeError('Invalid type.');
        }
        set.apply(this, [value]);
    };
    return descriptor;
}

export const exp910 = () => {
    console.log();
    console.log(
        '-----------------------示例9:基本元元素类型反射-----------------------',
    );
    console.log(
        '-----------------------为访问器的set方法添加类型验证-----------------------',
    );
    console.log();
    const line = new Line();
    const p0 = new Point();
    p0.x = 1;
    p0.y = 2;
    line.p1 = p0;
    console.log(line);
    console.log();
    console.log('-----------------------示例9:执行完毕-----------------------');
};


// 控制台输出: Line { _p1: Point { x: 1, y: 2 } }

自定义元信息​

除了使用类似design:type这种预定义的原信息外，我们也可以自定义信息，因为一般我们都是用reflect-metadata来自定义原信息的。比如我们可以在删除用户的方法上添加一个角色判断，只有拥有我们设定角色的用户才能删除用户，比如管理员角色，具体可参考以下代码：

// 角色守卫
export const RoleGuardDecorator = (roles: string[]) => {
    console.log('开始验证角色');
    return function roleGuard(
        target: any,
        propertyKey: string,
        descriptor: PropertyDescriptor,
    ) {
        // 根据传入的参数定义守卫所需的角色
        Reflect.defineMetadata('roles', roles, target, propertyKey);
        const method = descriptor.value;
        descriptor.value = function (...args: any[]) {
            // 获取当前用户的角色
            const currentRoles = target.getRoles();
            // 获取我们定义的操作此方法所需的角色
            const needRoles = Reflect.getMetadata('roles', target, propertyKey);
            // 判断当前用户是否拥有所需的角色,没有则抛出异常
            for (const role of needRoles) {
                if (!currentRoles.includes(role)) {
                    throw new Error(
                        `you have not permission to run ${propertyKey}`,
                    );
                }
            }
            console.log('验证角色完毕');
            return method.apply(this, args);
        };
        return descriptor;
    };
};

export class UserService {
    protected users: UserType[] = [
        { id: 1, username: 'admin' },
        { id: 2, username: 'pincman' },
    ];

    getUsers() {
        return this.users;
    }

    // 设定当前用户的角色
    getRoles() {
        return ['user'];
    }

    @RoleGuardDecorator(['admin'])
    // 在装饰器中使用Reflect.defineMetadata()放定义roles只是为了方便封装
    // 当然,我们也可以在方法上直接定义roles,如下
    // Reflect.metadata('roles',['admin'])
    @parseDecorator
    delete(@parse((arg: any) => Number(arg)) id: number): UserService {
        this.users = this.getUsers().filter((userObj) => userObj.id !== id);
        return this;
    }
}

export const exp910 = () => {
    // ...
    console.log();
    console.log(
        '-----------------------示例10:自定义元元素反射-----------------------',
    );
    console.log(
        '-----------------------添加角色守卫来判断当前用户是否有删除权限-----------------------',
    );
    console.log();
    const user = new UserService();
    user.delete(1);
    console.log(user.getUsers());
    console.log();
    console.log(
        '-----------------------示例10:执行完毕-----------------------',
    );
};


// 控制台将输出异常
// Error: you have not permission to run delete

组合与顺序​

每一个属性,参数或方法都可以使用多组装饰器。每个类型的装饰器的调用顺序也是不同的。

组合使用​

我们可以对任意一个被装饰者调用多组装饰器，多组装饰器一般书写在多行上(当然你也可以写在一行上，多行书写只不过是个约定俗成的惯例)，比如

@RoleGuardDecorator
@parseDecorator
delete(@parse((arg: any) => Number(arg)) id): UserService 

当多个装饰器应用于一个声明上，它们求值方式与高阶函数相似。在这个模型下，当复合*RoleGuardDecorator和parseDecorator时，复合的结果等同于RoleGuardDecorator(parseDecorator(delete*))。

同时，我们可以参考react中的高阶，原理相似

它们的调用步骤类似剥洋葱法，即：

1. 由上至下依次对装饰器表达式求值。

2. 求值的结果会被当作函数，由下至上依次调用。

比如

export const parseDecorator = () => {
  console.log('开始格式化数据');
  return (
    target: Object,
    propertyName: string,
    descriptor: PropertyDescriptor,
  ): PropertyDescriptor => {
    return {
      ...descriptor,
      value(...args: any[]) {
        const newArgs = parseConf.map((toParse, index) => toParse(args[index]));
        console.log('格式化完毕');
        return descriptor.value.apply(this, newArgs);
      },
    };
  };
};

export const RoleGuardDecorator = (roles: string[]) => {
  return function roleGuard(
    target: any,
    propertyKey: string,
    descriptor: PropertyDescriptor,
  ) {
    console.log('开始验证角色');
    ...
    descriptor.value = function(...args: any[]) {
      ...
      console.log('验证角色完毕');
      return method.apply(this, args);
    };
    return descriptor;
  };
};

export class UserService {
  ...
  @RoleGuardDecorator(['admin'])
  // 把parseDecorator改成parseDecorator()
  @parseDecorator()
  getRoles() {
    // 提供验证角色为admin
    return ['admin'];
  }
}

调用顺序​

特别需要注意的是getMetadata与getOwneMetadata的区别

每种类型的装饰器的调用顺序是不同的，具体顺序如下：

1. 参数装饰器，然后依次是方法装饰器，访问符装饰器，或属性装饰器应用到每个实例成员(即类原型的成员)。

2. 参数装饰器，然后依次是方法装饰器，访问符装饰器，或属性装饰器应用到每个静态成员。

3. 参数装饰器应用到构造函数(即类原型)。

4. 类装饰器应用到类。

例如：我们使用元信息结合方法和参数装饰器来验证参数的required，其调用顺序为参数装饰器->方法装饰器

/**
 * 装饰器调用顺序
 */
import { UserType } from './exp7-8';
import { UserService as ParentUserService } from './exp9-10';

const requiredMetadataKey = Symbol('required');

export const RequiredDecorator = (
    target: any,
    propertyKey: string | symbol,
    parameterIndex: number,
) => {
    const existingRequiredParameters: number[] =
        Reflect.getOwnMetadata(requiredMetadataKey, target, propertyKey) || [];
    existingRequiredParameters.push(parameterIndex);
    Reflect.defineMetadata(
        requiredMetadataKey,
        existingRequiredParameters,
        target,
        propertyKey,
    );
};

export const ValidateDecorator = (
    target: any,
    propertyName: string,
    descriptor: TypedPropertyDescriptor<(...args: any[]) => any>,
) => {
    const method = descriptor.value;
    descriptor.value = function (...args: any[]) {
        const requiredParameters: number[] = Reflect.getOwnMetadata(
            requiredMetadataKey,
            target,
            propertyName,
        );
        if (requiredParameters) {
            for (const parameterIndex of requiredParameters) {
                if (
                    parameterIndex >= args.length ||
                    args[parameterIndex] === undefined
                ) {
                    throw new Error('Missing required argument.');
                }
            }
        }

        return method.apply(this, args);
    };
};

class UserService extends ParentUserService {
    @ValidateDecorator
    createUser(@RequiredDecorator username?: string, id?: number) {
        const ids: number[] = this.users.map((userEntity) => userEntity.id);
        const newUser: UserType = {
            // 如果不提供ID参数,则新用户的ID为所有用户的最大ID + 1
            id: id || Math.max(...ids) + 1,
            // 如果不提供username参数,则生成随机字符串作为用户名
            username: username || Math.random().toString(36).substring(2, 15),
        };
        this.users.push(newUser);
        return newUser;
    }
}

export const exp11 = () => {
    console.log();
    console.log(
        '-----------------------示例11:装饰器组合-----------------------',
    );
    console.log(
        '-----------------------为username参数提供必填验证-----------------------',
    );
    console.log();
    const user = new UserService();
    user.createUser();
    console.log(user.getUsers());
    console.log();
    console.log(
        '-----------------------示例11:执行完毕-----------------------',
    );
};