当 Egg 遇到 TypeScript，收获茶叶蛋一枚 #27

向右看齐 2023-05-22 06:38 56阅读 0赞

# 当 Egg 遇到 TypeScript，收获茶叶蛋一枚 \#27 #

<table> 
 <tbody> 
  <tr> 
   <td> <p><a href="https://user-images.githubusercontent.com/227713/38357893-627a1cc0-38f6-11e8-9003-ef3931a9e939.png" rel="nofollow"><img alt="slice" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWltYWdlcy5naXRodWJ1c2VyY29udGVudC5jb20vMjI3NzEzLzM4MzU3ODkzLTYyN2ExY2MwLTM4ZjYtMTFlOC05MDAzLWVmMzkzMWE5ZTkzOS5wbmc?x-oss-process=image/format,png"></a></p> <h2>&nbsp;</h2> <h2>前言</h2> 
    <blockquote> 
     <p><a href="https://www.typescriptlang.org/" rel="nofollow">TypeScript</a>&nbsp;is a typed superset of JavaScript that compiles to plain JavaScript.</p> 
    </blockquote> <p>TypeScript 的静态类型检查，智能提示，IDE 友好性等特性，对于大规模企业级应用，是非常的有价值的。详见：<a href="https://juejin.im/post/59c46bc86fb9a00a4636f939" rel="nofollow">TypeScript体系调研报告</a>&nbsp;。</p> <p>然而，此前使用 TypeScript 开发 Egg ，会遇到一些影响&nbsp;<strong>开发者体验</strong>&nbsp;问题：</p> 
    <ul> 
     <li>Egg 最精髓的 Loader 自动加载机制，导致 TS 无法静态分析出部分依赖。</li> 
     <li>Config 自动合并机制下，如何在&nbsp;<code>config.{env}.js</code>&nbsp;里面修改插件提供的配置时，能校验并智能提示？</li> 
     <li>开发期需要独立开一个&nbsp;<code>tsc -w</code>&nbsp;独立进程来构建代码，带来临时文件位置纠结以及&nbsp;<code>npm scripts</code>&nbsp;复杂化。</li> 
     <li>单元测试，覆盖率测试，线上错误堆栈如何指向 TS 源文件，而不是编译后的 js 文件。</li> 
    </ul><p>本文主要阐述：</p> 
    <ul> 
     <li><strong>应用层 TS 开发规范</strong></li> 
     <li><strong>我们在工具链方面的支持，是如何来解决上述问题，让开发者几乎无感知并保持一致性。</strong></li> 
    </ul><p>具体的折腾过程参见：<a href="https://github.com/eggjs/egg/issues/2272" rel="nofollow">[RFC] TypeScript tool support</a></p> 
    <hr><h2>快速入门</h2> <p>通过骨架快速初始化：</p> <pre><code>$ npx egg-init --type=ts showcase
$ cd showcase &amp;&amp; npm i
$ npm run dev</code></pre> <p>上述骨架会生成一个极简版的示例，更完整的示例参见：<a href="https://github.com/eggjs/examples/tree/master/hackernews-async-ts" rel="nofollow">eggjs/examples/hackernews-async-ts</a></p> <p><a href="https://user-images.githubusercontent.com/227713/38358019-bf7890fa-38f6-11e8-8955-ea072ac6dc8c.gif" rel="nofollow"><img alt="" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWltYWdlcy5naXRodWJ1c2VyY29udGVudC5jb20vMjI3NzEzLzM4MzU4MDE5LWJmNzg5MGZhLTM4ZjYtMTFlOC04OTU1LWVhMDcyYWM2ZGM4Yy5naWY"></a></p> 
    <hr><h2>目录规范</h2> <p><strong>一些约束：</strong></p> 
    <ul> 
     <li>Egg 目前没有计划使用 TS 重写。</li> 
     <li>Egg 以及它对应的插件，会提供对应的&nbsp;<code>index.d.ts</code>&nbsp;文件方便开发者使用。</li> 
     <li>TypeScript 只是其中一种社区实践，我们通过工具链给予一定程度的支持。</li> 
    </ul><p>整体目录结构上跟 Egg 普通项目没啥区别:</p> 
    <ul> 
     <li><code>typescript</code>&nbsp;代码风格，后缀名为&nbsp;<code>ts</code></li> 
     <li><code>typings</code>&nbsp;目录用于放置&nbsp;<code>d.ts</code>&nbsp;文件（大部分会自动生成）</li> 
    </ul><pre><code>showcase
├── app
│   ├── controller
│   │   └── home.ts
│   ├── service
│   │   └── news.ts
│   └── router.ts
├── config
│   ├── config.default.ts
│   ├── config.local.ts
│   ├── config.prod.ts
│   └── plugin.ts
├── test
│   └── **/*.test.ts
├── typings
│   └── **/*.d.ts
├── README.md
├── package.json
├── tsconfig.json
└── tslint.json</code></pre> <h3>Controller</h3> <pre><code>// app/controller/home.ts
import { Controller } from 'egg';

export default class HomeController extends Controller {
  public async index() {
    const { ctx, service } = this;
 &nbsp; &nbsp;const page = ctx.query.page;
 &nbsp; &nbsp;const result = await service.news.list(page);
 &nbsp; &nbsp;await ctx.render('home.tpl', result);
 &nbsp;}
}</code></pre> <h3>Router</h3> <pre><code>// app/router.ts
import { Application } from 'egg';

export default (app: Application) =&gt; {
  const { router, controller } = app;
  router.get('/', controller.home.index);
};</code></pre> <h3>Service</h3> <pre><code>// app/service/news.ts
import { Service } from 'egg';

export default class NewsService extends Service {
  public async list(page?: number): Promise&lt;NewsItem[]&gt; {
    return [];
 &nbsp;}
}

export interface NewsItem {
  id: number;
  title: string;
}</code></pre> <h3>Middleware</h3> <pre><code>// app/middleware/robot.ts

import { Context } from 'egg';

export default function robotMiddleware() {
  return async (ctx: Context, next: any) =&gt; {
    await next();
  };
}</code></pre> <p>因为 Middleware 定义是支持入参的，第一个参数为同名的 Config，如有需求，可以用完整版：</p> <pre><code>// app/middleware/news.ts

import { Context, Application } from 'egg';
import { BizConfig } from '../../config/config.default';

// 注意，这里必须要用 ['news'] 而不能用 .news，因为 BizConfig 是 type，不是实例
export default function newsMiddleware(options: BizConfig['news'], app: Application) {
  return async (ctx: Context, next: () =&gt; Promise&lt;any&gt;) =&gt; {
    console.info(options.serverUrl);
    await next();
  };
}</code></pre> <h3>Extend</h3> <pre><code>// app/extend/context.ts
import { Context } from 'egg';

export default {
  isAjax(this: Context) {
    return this.get('X-Requested-With') === 'XMLHttpRequest';
  },
}

// app.ts
export default app =&gt; {
  app.beforeStart(async () =&gt; {
    await Promise.resolve('egg + ts');
  });
};</code></pre> <h3>Config</h3> <p><code>Config</code>&nbsp;这块稍微有点复杂，因为要支持：</p> 
    <ul> 
     <li>在 Controller，Service 那边使用配置，需支持多级提示，并自动关联。</li> 
     <li>Config 内部，&nbsp;<code>config.view = {}</code>&nbsp;的写法，也应该支持提示。</li> 
     <li>在&nbsp;<code>config.{env}.ts</code>&nbsp;里可以用到&nbsp;<code>config.default.ts</code>&nbsp;自定义配置的提示。</li> 
    </ul><pre><code>// app/config/config.default.ts
import { EggAppInfo, EggAppConfig, PowerPartial } from 'egg';

// 提供给 config.{env}.ts 使用
export type DefaultConfig = PowerPartial&lt;EggAppConfig &amp; BizConfig&gt;;

// 应用本身的配置 Scheme
export interface BizConfig {
  news: {
    pageSize: number;
    serverUrl: string;
  };
}

export default (appInfo: EggAppInfo) =&gt; {
  const config = {} as PowerPartial&lt;EggAppConfig&gt; &amp; BizConfig;

// 覆盖框架，插件的配置
  config.keys = appInfo.name + '123456';
  config.view = {
    defaultViewEngine: 'nunjucks',
    mapping: {
      '.tpl': 'nunjucks',
    },
  };

// 应用本身的配置
  config.news = {
    pageSize: 30,
    serverUrl: 'https://hacker-news.firebaseio.com/v0',
  };

return config;
};</code></pre> <p>简单版：</p> <pre><code>// app/config/config.local.ts
import { DefaultConfig } from './config.default';

export default () =&gt; {
  const config: DefaultConfig = {};
  config.news = {
    pageSize: 20,
  };
  return config;
};</code></pre> <p>备注：</p> 
    <ul> 
     <li>TS 的&nbsp;<code>Conditional Types</code>&nbsp;是我们能完美解决 Config 提示的关键。</li> 
     <li>有兴趣的可以看下&nbsp;<a href="https://github.com/eggjs/egg/blob/master/index.d.ts" rel="nofollow">egg/index.d.ts</a>&nbsp;里面的&nbsp;<code>PowerPartial</code>&nbsp;实现。</li> 
    </ul><pre><code>// {egg}/index.d.ts
type PowerPartial&lt;T&gt; = {
 &nbsp;[U in keyof T]?: T[U] extends {}
  &nbsp; ? PowerPartial&lt;T[U]&gt;
  &nbsp; : T[U]
};</code></pre> <h3>Plugin</h3> <pre><code>// config/plugin.ts
import { EggPlugin } from 'egg';

const plugin: EggPlugin = {
  static: true,
  nunjucks: {
  &nbsp; enable: true,
  &nbsp; package: 'egg-view-nunjucks',
 &nbsp;},
};

export default plugin;</code></pre> <h3>Typings</h3> <p>该目录为 TS 的规范，在里面的&nbsp;<code>\*\*/\*.d.ts</code>&nbsp;文件将被自动识别。</p> 
    <ul> 
     <li>开发者需要手写的建议放在&nbsp;<code>typings/index.d.ts</code>&nbsp;中。</li> 
     <li>工具会自动生成&nbsp;<code>typings/{app,config}/\*\*.d.ts</code>&nbsp;，请勿自行修改，避免被覆盖。（见下文）</li> 
    </ul> 
    <blockquote> 
     <p>现在 Egg 自带的 d.ts 还有不少可以优化的空间，遇到的同学欢迎提 issue 或 PR。</p> 
    </blockquote> 
    <hr><h2>开发期</h2> <h3>ts-node</h3> <p><code>egg-bin</code>&nbsp;已经内建了 ts-node ，<code>egg loader</code>&nbsp;在开发期会自动加载&nbsp;<code>\*.ts</code>&nbsp;并内存编译。</p> <p>目前已支持&nbsp;<code>dev</code>&nbsp;/&nbsp;<code>debug</code>&nbsp;/&nbsp;<code>test</code>&nbsp;/&nbsp;<code>cov</code>&nbsp;。</p> <p>开发者仅需简单配置下&nbsp;<code>package.json</code>&nbsp;：</p> <pre><code>{
  "name": "showcase",
  "egg": {
    "typescript": true
  }
}</code></pre> <h3>egg-ts-helper</h3> <p>由于 Egg 的自动加载机制，导致 TS 无法静态分析依赖，关联提示。</p> <p>幸亏 TS 黑魔法比较多，我们可以通过 TS 的&nbsp;<a href="https://www.typescriptlang.org/docs/handbook/declaration-merging.html" rel="nofollow">Declaration Merging</a>&nbsp;编写&nbsp;<code>d.ts</code>&nbsp;来辅助。</p> <p>譬如&nbsp;<code>app/service/news.ts</code>&nbsp;会自动挂载为&nbsp;<code>ctx.service.news</code>&nbsp;，通过如下写法即识别到：</p> <pre><code>// typings/app/service/index.d.ts
import News from '../../../app/service/News';

declare module 'egg' {
  interface IService {
    news: News;
  }
}</code></pre> <p>手动写这些文件，未免有点繁琐，因此我们提供了&nbsp;<a href="https://github.com/whxaxes/egg-ts-helper" rel="nofollow">egg-ts-helper</a>&nbsp;工具来自动分析源码生成对应的&nbsp;<code>d.ts</code>&nbsp;文件。</p> <p>只需配置下&nbsp;<code>package.json</code>&nbsp;:</p> <pre><code>{
 &nbsp;"devDependencies": {
    "egg-ts-helper": "^1"
 &nbsp;},
  "scripts": {
    "dev": "egg-bin dev -r egg-ts-helper/register",
    "test-local": "egg-bin test -r egg-ts-helper/register",
    "clean": "ets clean"
  }
}</code></pre> <p>开发期将自动生成对应的&nbsp;<code>d.ts</code>&nbsp;到&nbsp;<code>typings/{app,config}/</code>&nbsp;下，<strong>请勿自行修改，避免被覆盖。</strong></p> 
    <blockquote> 
     <p>后续该工具也会考虑支持 js 版 egg 应用的分析，可以一定程度上提升 js 开发体验。</p> 
    </blockquote> <h3>Unit Test &amp;&amp; Cov</h3> <p>单元测试当然少不了：</p> <pre><code>// test/app/service/news.test.ts
import * as assert from 'assert';
import { Context } from 'egg';
import { app } from 'egg-mock/bootstrap';

describe('test/app/service/news.test.js', () =&gt; {
  let ctx: Context;

before(async () =&gt; {
    ctx = app.mockContext();
  });

it('list()', async () =&gt; {
    const list = await ctx.service.news.list();
    assert(list.length === 30);
  });
});</code></pre> <p>运行命令也跟之前一样，并内置了&nbsp;<code>错误堆栈和覆盖率</code>&nbsp;的支持：</p> <pre><code>{
  "name": "showcase",
  "scripts": {
    "test": "npm run lint -- --fix &amp;&amp; npm run test-local",
    "test-local": "egg-bin test -r egg-ts-helper/register",
    "cov": "egg-bin cov -r egg-ts-helper/register",
    "lint": "tslint ."
  }
}</code></pre> <h3>Debug</h3> <p>断点调试跟之前也没啥区别，会自动通过&nbsp;<code>sourcemap</code>&nbsp;断点到正确的位置。</p> <pre><code>{
  "name": "showcase",
  "scripts": {
    "debug": "egg-bin debug -r egg-ts-helper/register",
    "debug-test": "npm run test-local -- --inspect"
  }
}</code></pre> 
    <ul> 
     <li><a href="https://eggjs.org/zh-cn/core/development.html#%E4%BD%BF%E7%94%A8-vscode-%E8%BF%9B%E8%A1%8C%E8%B0%83%E8%AF%95" rel="nofollow">使用 VSCode 进行调试</a></li> 
     <li><a href="https://github.com/atian25/blog/issues/25" rel="nofollow">VSCode 调试 Egg 完美版 - 进化史</a></li> 
    </ul> 
    <hr><h2>部署</h2> <h3>构建</h3> 
    <ul> 
     <li>正式环境下，我们更倾向于把 ts 构建为 js ，建议在&nbsp;<code>ci</code>&nbsp;上构建并打包。</li> 
    </ul><p>配置&nbsp;<code>package.json</code>&nbsp;:</p> <pre><code>{
  "egg": {
    "typescript": true
  },
  "scripts":  {
    "start": "egg-scripts start --title=egg-server-showcase",
     "stop": "egg-scripts stop --title=egg-server-showcase",
     "tsc": "ets &amp;&amp; tsc -p tsconfig.json",
     "ci": "npm run lint &amp;&amp; npm run cov &amp;&amp; npm run tsc",
     "clean": "ets clean"
  }
}</code></pre> <p>对应的&nbsp;<code>tsconfig.json</code>&nbsp;:</p> <pre><code>{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "strict": true,
    "noImplicitAny": false,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "charset": "utf8",
    "allowJs": false,
    "pretty": true,
    "noEmitOnError": false,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "strictPropertyInitialization": false,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "inlineSourceMap": true,
    "importHelpers": true
  },
  "exclude": [
    "app/public",
     "app/web",
    "app/views"
  ]
}</code></pre> <p><strong>注意：</strong></p> 
    <ul> 
     <li><strong>当有同名的 ts 和 js 文件时，egg 会优先加载 js 文件。</strong></li> 
     <li>因此在开发期，&nbsp;<code>egg-ts-helper</code>&nbsp;会自动调用清除同名的&nbsp;<code>js</code>&nbsp;文件，也可&nbsp;<code>npm run clean</code>&nbsp;手动清除。</li> 
    </ul><h3>错误堆栈</h3> <p>线上服务的代码是经过编译后的 js，而我们期望看到的错误堆栈是指向 TS 源码。<br> 因此：</p> 
    <ul> 
     <li>在构建的时候，需配置&nbsp;<code>inlineSourceMap: true</code>&nbsp;在 js 底部插入 sourcemap 信息。</li> 
     <li>在&nbsp;<code>egg-scripts</code>&nbsp;内建了处理，会自动纠正为正确的错误堆栈，应用开发者无需担心。</li> 
    </ul><p>具体内幕参见：</p> 
    <ul> 
     <li><a href="https://zhuanlan.zhihu.com/p/26267678" rel="nofollow">https://zhuanlan.zhihu.com/p/26267678</a></li> 
     <li><a href="https://github.com/eggjs/egg-scripts/pull/19" rel="nofollow">eggjs/egg-scripts#19</a></li> 
    </ul> 
    <hr><h2>插件/框架开发指南</h2> <p><strong>指导原则：</strong></p> 
    <ul> 
     <li>不建议使用 TS 直接开发插件/框架，发布到 npm 的插件应该是 js 形式。</li> 
     <li>当你开发了一个插件/框架后，需要提供对应的&nbsp;<code>index.d.ts</code>&nbsp;。</li> 
     <li>通过&nbsp;<a href="https://www.typescriptlang.org/docs/handbook/declaration-merging.html" rel="nofollow">Declaration Merging</a>&nbsp;将插件/框架的功能注入到 Egg 中。</li> 
     <li>都挂载到&nbsp;<code>egg</code>&nbsp;这个 module，不要用上层框架。</li> 
    </ul><h3>插件</h3> <p>可以参考&nbsp;<code>egg-ts-helper</code>&nbsp;自动生成的格式</p> <pre><code>// {plugin_root}/index.d.ts

import News from '../../../app/service/News';

declare module 'egg' {

// 扩展 service
  interface IService {
 &nbsp; &nbsp;news: News;
  }

// 扩展 app
  interface Application {

}

// 扩展 context
  interface Context {

}

// 扩展你的配置
  interface EggAppConfig {

}

// 扩展自定义环境
 &nbsp;type EggEnvType = 'local' | 'unittest' | 'prod' | 'sit';
}</code></pre> <h3>上层框架</h3> <p>定义：</p> <pre><code>// {framework_root}/index.d.ts

import * as Egg from 'egg';

// 将该上层框架用到的插件 import 进来
import 'my-plugin';

declare module 'egg' {
  // 跟插件一样拓展 egg ...
}

// 将 Egg 整个 export 出去
export = Egg;</code></pre> <p>开发者使用的时候，可以直接 import 你的框架：</p> <pre><code>// app/service/news.ts

// 开发者引入你的框架，也可以使用到提示到所有 Egg 的提示
import { Service } from 'duck-egg';

export default class NewsService extends Service {
  public async list(page?: number): Promise&lt;NewsItem[]&gt; {
    return [];
 &nbsp;}
}</code></pre> 
    <hr><h2>其他</h2> <h3>TypeScript</h3> <p>最低要求 2.8+ 版本，依赖于新支持的&nbsp;<a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html" rel="nofollow">Conditional Types</a>&nbsp;，黑魔法中的黑魔法。</p> <pre><code>$ npm i typescript tslib --save-dev
$ npx tsc -v
Version 2.8.1</code></pre> <h3>VSCode</h3> <p>由于 VSCode 自带的 TypeScript 版本还未更新，需手动切换：</p> <pre><code>F1 -&gt; TypeScript: Select TypeScript Version -&gt; Use Workspace Version 2.8.1</code></pre> <p>之前为了不显示编译后的 js 文件，会配置&nbsp;<code>.vscode/settings.json</code>&nbsp;，但由于我们开发期已经不再构建 js，且 js 和 ts 同时存在时会优先加载 js，因为&nbsp;<strong>建议「不要」配置此项。</strong></p> <pre><code>// .vscode/settings.json
{
  "files.exclude": {
    "**/*.map": true，
    // 光注释掉 when 这行无效，需全部干掉
    // "**/*.js": {
    //  "when": "$(basename).ts"
    // }
  },
  "typescript.tsdk": "node_modules/typescript/lib"
}</code></pre> <h3>package.json</h3> <p>完整的配置如下：</p> <pre><code>{
  "name": "hackernews-async-ts",
  "version": "1.0.0",
  "description": "hackernews showcase using typescript &amp;&amp; egg",
  "private": true,
  "egg": {
    "typescript": true
  },
  "scripts": {
    "start": "egg-scripts start --title=egg-server-showcase",
    "stop": "egg-scripts stop --title=egg-server-showcase",
    "dev": "egg-bin dev -r egg-ts-helper/register",
    "debug": "egg-bin debug -r egg-ts-helper/register",
    "test-local": "egg-bin test -r egg-ts-helper/register",
    "test": "npm run lint -- --fix &amp;&amp; npm run test-local",
    "cov": "egg-bin cov -r egg-ts-helper/register",
    "tsc": "ets &amp;&amp; tsc -p tsconfig.json",
    "ci": "npm run lint &amp;&amp; npm run tsc &amp;&amp; egg-bin cov --no-ts",
    "autod": "autod",
    "lint": "tslint .",
    "clean": "ets clean"
  },
  "dependencies": {
    "egg": "^2.6.0",
    "egg-scripts": "^2.6.0"
  },
  "devDependencies": {
    "@types/mocha": "^2.2.40",
    "@types/node": "^7.0.12",
    "@types/supertest": "^2.0.0",
    "autod": "^3.0.1",
    "autod-egg": "^1.1.0",
    "egg-bin": "^4.6.3",
    "egg-mock": "^3.16.0",
    "egg-ts-helper": "^1.5.0",
    "tslib": "^1.9.0",
    "tslint": "^4.0.0",
    "typescript": "^2.8.1"
  },
  "engines": {
    "node": "&gt;=8.9.0"
  }
}</code></pre> 
    <hr><h2>高级用法</h2> <h3>装饰器</h3> <p>通过 TS 的装饰器，可以实现&nbsp;<code>依赖注入</code>&nbsp;/&nbsp;<code>参数校验</code>&nbsp;&nbsp;/&nbsp;<code>日志前置处理</code>&nbsp;等。</p> <pre><code>import { Controller } from 'egg';

export default class NewsController extends Controller {
  @GET('/news/:id')
  public async detail() {
    const { ctx, service } = this;
    const id = ctx.params.id;
    const result = await service.news.get(id);
    await ctx.render('detail.tpl', result);
  }
}</code></pre> <p>目前装饰器属于锦上添花，因为暂不做约定。<br> 交给开发者自行实践，期望能看到社区优秀实践反馈，也可以参考下：<a href="https://github.com/shepherdwind/egg-di" rel="nofollow">egg-di</a>&nbsp;。</p> 
    <blockquote> 
     <p>友情提示：要适度，不要滥用。</p> 
    </blockquote> <h3>tegg</h3> <p>未来可能还会封装一个上层框架&nbsp;<a href="https://github.com/eggjs/tegg" rel="nofollow">tegg</a>，具体 RFC 还没出，还在孕育中，敬请期待。</p> <p>名字典故：<code>typescript + egg</code>&nbsp;-&gt;&nbsp;<code>ts-egg</code>&nbsp;-&gt;&nbsp;<code>tea egg</code>&nbsp;-&gt;&nbsp;<code>茶叶蛋</code></p> <p>Logo：<a href="https://camo.githubusercontent.com/d6ba0fc19d4dd877e3a4be9dc7af52d0699075e5/68747470733a2f2f6c61726b2d6173736574732d70726f642e6f73732d636e2d68616e677a686f752e616c6979756e63732e636f6d2f323031382f706e672f31333031663432642d386361362d346638662d613037662d3130633530343364663330322e706e67" rel="nofollow"><img alt="image.png | left | 225x225" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jYW1vLmdpdGh1YnVzZXJjb250ZW50LmNvbS9kNmJhMGZjMTlkNGRkODc3ZTNhNGJlOWRjN2FmNTJkMDY5OTA3NWU1LzY4NzQ3NDcwNzMzYTJmMmY2YzYxNzI2YjJkNjE3MzczNjU3NDczMmQ3MDcyNmY2NDJlNmY3MzczMmQ2MzZlMmQ2ODYxNmU2NzdhNjg2Zjc1MmU2MTZjNjk3OTc1NmU2MzczMmU2MzZmNmQyZjMyMzAzMTM4MmY3MDZlNjcyZjMxMzMzMDMxNjYzNDMyNjQyZDM4NjM2MTM2MmQzNDY2Mzg2NjJkNjEzMDM3NjYyZDMxMzA2MzM1MzAzNDMzNjQ2NjMzMzAzMjJlNzA2ZTY3?x-oss-process=image/format,png"></a></p> 
    <hr><h2>写在最后</h2> <p>早在一年多前，阿里内部就有很多 BU 在实践 TS + Egg 了。</p> <p>随着 TS 的完善，终于能完美解决我们的开发者体验问题，也因此才有了本文。</p> <p>本来以为只需要 2 个 PR 搞定的，结果变为 Hail Hydra，好长的 List：<a href="https://github.com/eggjs/egg/issues/2272" rel="nofollow">[RFC] TypeScript tool support</a>&nbsp;。</p> <p>终于完成了&nbsp;<a href="https://zhuanlan.zhihu.com/p/31640541?refer=eggjs" rel="nofollow">Egg 2.0</a>&nbsp;发布时的一大承诺，希望能通过这套最佳实践规范，提升社区开发者的研发体验。</p> </td> 
  </tr> 
 </tbody> 
</table>