TypeScript

Egg TypeScript 项目 Egg 和 React 前端代码需要按照 TypeScript 方式编写代码，同时构建部分需要同时结合 TypeScript 和 Webpack 构建进行相关配置。TypeScript 项目与 JavaScript 项目具体实现方面主要有以下区别：

• TypeScript 项目 js 文件改成 ts 文件， jsx 文件改成 tsx 文件
• Egg 和 React 代码采用 TypeScript 方式编写，同时加上TypeScript 类型声明
• 需要配置 Egg 和 React 代码 TypeScript 编译 tsconfig.json 配置文件

• Webpack 构建开启 TypeScript React 构建，也就是开发 ts-loader

  TypeScript 配置

• ${root}/app/web/tsconfig.json 前端 React TypeScript 配置

• ${root/tsconfig.json 前端 Egg TypeScript 配置
• 通过 egg-ts-helper 自动生成 Egg 代码类型声明

// package.json
"scripts": {
   "dev": "egg-bin dev -r egg-ts-helper/register",
   "tsc": "ets && tsc -p tsconfig.json"
 }

• Webpack 开启 TypeScript React 编译支持

'use strict';
module.exports = {
  ......
  module: {
    rules: [
      {
        ts: true
      }
    ],
  }
};

编写代码

Egg TypeScript 代码

Egg Controller

// ${root}/app/controller/index.ts
import { Controller, Context } from 'egg';
export default class AntDController extends Controller {
  public async index(ctx: Context) {
    await ctx.render('antd.js', {
      title: '--Ant Design Tab--',
      keywords: 'react, server side render, ant design',
      message: { text: 'Ant Design Tab Theme and Code Spliting' }
    });
  }
}

Egg Extend

// ${root}/app/extend/application.ts
import { Application } from 'egg';
import DB from '../lib/db/base';
import DBFactory from '../lib/db/factory';
const DBSymbol = Symbol('Application#db');
export default {
  get db(this: Application): DB {
    if (!this[DBSymbol]) {
      this[DBSymbol] = DBFactory();
    }
    return this[DBSymbol];
  }
};
// ${root}/app/extend/context.ts
'use strict';
import { Context } from 'egg';
import DB from '../lib/db/base';
export default {
  get db(this: Context): DB {
    return this.app.db;
  }
};

Egg Middleware

// ${root}/app/middleware/locals.ts
import { Context } from 'egg';
export default function locals() : any {
  return async (ctx: Context, next: () => Promise<any>) => {
    ctx.locals.locale = ctx.query.locale || 'cn';
    ctx.locals.origin = ctx.request.origin;
    await next();
  };
};

Egg Service

// ${root}/app/service/article.ts
import { Context, Service } from 'egg';
import { deserialize } from '@hubcarl/json-typescript-mapper';
import Colllection from '../lib/db/collection';
import Article from '../model/article';
import Condition from '../lib/condition';
export default class ArticeService extends Service {
  private context: Context;
  private colllection: Colllection;
  constructor(ctx: Context) {
    super(ctx);
    this.context = ctx;
    this.colllection = new Colllection(ctx.db, 'article');
  }
  public async getArtilceList(condition: Condition) {
    if (condition.categoryId) {
      condition.where.categoryId = condition.categoryId;
    }
    if (condition.status) {
      condition.where.status = condition.status;
    }
    if (condition.title) {
      condition.like.title = condition.title;
    }
    return this.colllection.getPager(condition);
  }
}

Egg Router

// ${root}/app/router.ts
import { Application } from 'egg';
export default (app: Application) => {
  const { router, controller } = app;
  router.get('/', controller.index.index);
};

Egg Config

// ${root}/config/config.default.ts
import * as path from 'path';
import * as fs from 'fs';
import { EggAppConfig } from 'egg';
export default function(app: EggAppConfig) {
  const exports: any = {};
  exports.keys = '123456';
  exports.middleware = [
    'locals' 
  ];
  return exports;
}
// ${root}/config/plugin.local.ts
export default {
  webpack: {
    package: 'egg-webpack'
  },
  webpackreact : {
    package: 'egg-webpack-react'
  }
};

React TypeScript 代码

• 类型声明

// ${root}/app/web/typings/type.ts
export interface TabProps {
  title: string;
  keywords: string;
  description: string;
  message: {
    text: string
  };
}

• React 代码

// ${root}/app/web/page/antd/index.tsx
import React, { Component, ReactElement } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import ConfigStore from './store/config';
import Layout from '../../component/layout';
import { Tab } from './component/tab';
import { TabProps } from '../../typings/type';
export class App extends Component<TabProps, any> {
  render() {
    const stores = {
      configStore: new ConfigStore()
    };
    return <Provider {...stores}><Layout {...this.props}><Tab {...this.props} /></Layout></Provider>;
  }
}

骨架项目

• Egg TypeScript 骨架： https://github.com/easy-team/egg-react-typescript-boilerplate
• Egg TypeScript 框架： https://github.com/easy-team/res