feat: web and node model typescript support

easy-team · Oct 27, 2018 · 9152774 · 9152774
1 parent 9780108
commit 9152774
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 83 deletions.
diff --git a/app/web/framework/app.ts b/app/web/framework/app.ts
@@ -49,9 +49,10 @@ export default class App {
           }
           return Promise.all(
             matchedComponents.map((component: any) => {
-              if (component.preFetch) {
-                return component.preFetch(store);
-              }
+              // const methods = component.options && component.options.methods || {};
+              // if (methods && methods.fetchApi) {
+              //   methods.fetchApi.apply(component);
+              // }
               return null;
             })
           ).then(() => {

diff --git a/app/web/page/admin/home/view/detail/index.ts b/app/web/page/admin/home/view/detail/index.ts
@@ -1,16 +1,19 @@
-// export default {
-//   computed: {
-//     article() {
-//       return this.$store.state.article;
-//     }
-//   },
-//   methods: {
-//     fetchApi({ state, dispatch, commit }, params) {
-//       // params = params || state.route.params;
-//       // return dispatch(SET_ARTICLE_DETAIL, { id : params.id });
-//     },
-//   },
-//   beforeMount() {
-//     this.fetchApi(this.$store, this.$route.params);
-//   }
-// }
+import { Vue, Component } from 'vue-property-decorator';
+import Article from '../../../../../../model/article';
+import {
+  Getter,
+  Action
+} from 'vuex-class';
+
+@Component
+export default class Detail extends Vue {
+  @Getter('article') article?: Article;
+  @Action('getArticle') getArticle: any;
+  beforeMount() {
+    const { id } = this.$route.params;
+    this.getArticle({ id });
+  }
+  // fetchApi() {
+  //   this.getArticle({ id });
+  // }
+}
diff --git a/app/web/page/admin/home/view/detail/index.vue b/app/web/page/admin/home/view/detail/index.vue
@@ -7,4 +7,4 @@
 <style>
 
 </style>
-<script type="ts" src="./index.ts"></script>
+<script lang="ts" src="./index.ts"></script>
diff --git a/app/web/page/store/modules/admin/index.ts b/app/web/page/store/modules/admin/index.ts
@@ -9,6 +9,7 @@ import {
 
 import RootState from '../../state';
 import AdminState from './state';
+import Article from '../../../../../model/article';
 
 axios.defaults.baseURL = 'http://127.0.0.1:7001';
 axios.defaults.timeout = 15000;
@@ -19,51 +20,45 @@ export default class AdminModule implements Module<AdminState, RootState> {
   state: AdminState = {
     articleTotal: 0,
     articleList: [],
-    article: {},
+    article: null,
   };
   getters: GetterTree<AdminState, RootState> = {
     total(state): number {
       return state.articleTotal;
     },
-    article(state): any {
+    article(state): Article | null {
       return state.article;
     },
-    articleList(state): any {
+    articleList(state): Article[] {
       return state.articleList;
     },
   };
   actions: ActionTree<AdminState, RootState> = {
-    getArticleList({ commit, dispatch, state, rootState }, condition) {
+    async getArticleList({ commit, dispatch, state, rootState }, condition) {
       const headers = EASY_ENV_IS_NODE ? {
         'x-csrf-token': rootState.csrf,
         'Cookie': `csrfToken=${rootState.csrf}`
       } : {};
-      return axios.post(`${rootState.origin}/admin/api/article/list`, condition, { headers }).then(response => {
-        commit(SET_ARTICLE_LIST, response.data);
-      });
+      const res = await axios.post(`${rootState.origin}/admin/api/article/list`, condition, { headers });
+      commit(SET_ARTICLE_LIST, res.data);
     },
-    getArticle({ commit, dispatch, state , rootState}, { id }) {
-      return axios.get(`${rootState.origin}/admin/api/article/${id}`)
-      .then(response => {
-        commit(SET_ARTICLE_DETAIL, response.data);
-      });
+    async getArticle({ commit, dispatch, state , rootState}, { id }) {
+      const res = await axios.get(`${rootState.origin}/admin/api/article/${id}`);
+      commit(SET_ARTICLE_DETAIL, res.data);
     },
-    saveArticle({ commit, dispatch, state, rootState }, data) {
+    async saveArticle({ commit, dispatch, state, rootState }, data) {
       // node need auth
-      return axios.post(`${rootState.origin}/admin/api/article/add`, data, {
+      const res = await axios.post(`${rootState.origin}/admin/api/article/add`, data, {
         headers: {
           'x-csrf-token': this.csrf,
         }
-      }).then(response => {
-        commit(SET_ARTICLE_LIST, data);
       });
+      commit(SET_ARTICLE_LIST, res.data);
     },
-    deleteArticle({ commit, dispatch, state, rootState }, { id }) {
+    async deleteArticle({ commit, dispatch, state, rootState }, { id }) {
       // node need auth
-      return axios.post(`${rootState.origin}/admin/api/article/del`, { id })
-      .then(response => {
-        commit(DELETE_ARTICLE, { id });
-      });
+      await axios.post(`${rootState.origin}/admin/api/article/del`, { id });
+      commit(DELETE_ARTICLE, { id });
     }
   };
   mutations: MutationTree<AdminState> = {

diff --git a/app/web/page/store/modules/admin/state.ts b/app/web/page/store/modules/admin/state.ts
@@ -1,5 +1,7 @@
+import Article from '../../../../../model/article';
+
 export default interface AdminState {
   articleTotal: number;
-  articleList: any;
-  article: any;
+  articleList: Article[];
+  article: Article | null;
 }
diff --git a/app/web/tsconfig.json b/app/web/tsconfig.json
@@ -3,13 +3,17 @@
   "compilerOptions": {
     "target": "es5",      
     "module": "esnext",
+    "sourceMap": true,
     "lib": [
       "es6",
       "dom",
       "es2017",
       "esnext"
     ]
   },
+  "include": [
+    "./**/*.ts",
+  ],
   "exclude": [
     "node_modules",
     "**/*.spec.ts"

diff --git a/blog.json b/blog.json
@@ -58,17 +58,6 @@
       "authorId": 1,
       "createTime": 1515671348293
     },
-    {
-      "id": 6,
-      "title": "vue服务器渲染",
-      "summary": "服务器渲染可以加快首屏速度,利于SEO",
-      "hits": 565,
-      "url": "http://csbun.github.io/blog/2016/08/vue-2-0-server-side-rendering/",
-      "tag": "egg,vue,webpack",
-      "categoryId": 1,
-      "authorId": 1,
-      "createTime": 1515671348293
-    },
     {
       "id": "7",
       "title": "webpack服务器构建",
@@ -392,17 +381,6 @@
       "authorId": 1,
       "createTime": 1515671348340
     },
-    {
-      "id": "37",
-      "title": "webpack服务器构建",
-      "summary": "Webpack is an amazing tool.",
-      "hits": 988,
-      "url": "http://jlongster.com/Backend-Apps-with-Webpack--Part-I",
-      "tag": "egg,vue,webpack",
-      "categoryId": 1,
-      "authorId": 1,
-      "createTime": 1515671348340
-    },
     {
       "id": "38",
       "title": "vue component loader for Webpack",
@@ -502,18 +480,6 @@
       "categoryId": 1,
       "authorId": 1,
       "createTime": 1515671348345
-    },
-    {
-      "id": "47",
-      "title": "webpack配置官方文档",
-      "summary": "webpack is a module bundler for modern JavaScript applications.",
-      "hits": 550,
-      "url": "https://webpack.js.org/configuration/",
-      "status": 1,
-      "tag": "egg,vue,webpack",
-      "categoryId": 1,
-      "authorId": 1,
-      "createTime": 1515671348346
     }
   ]
 }
diff --git a/config/tsconfig.json b/config/tsconfig.json
@@ -12,18 +12,18 @@
     // "outFile": "./",                       /* Concatenate and emit output to single file. */
     // "outDir": "./",                        /* Redirect output structure to the directory. */
     // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
-    // "removeComments": true,                /* Do not emit comments to output. */
+    "removeComments": true,                /* Do not emit comments to output. */
     // "noEmit": true,                        /* Do not emit outputs. */
-    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
     // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
     // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
 
     /* Strict Type-Checking Options */
     "strict": true,                            /* Enable all strict type-checking options. */
-    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
     // "strictNullChecks": true,              /* Enable strict null checks. */
     "strictFunctionTypes": false,             /* Enable strict checking of function types. */
-    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
     // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
 
     /* Additional Checks */

diff --git a/config/ves.config.js b/config/ves.config.js
@@ -3,7 +3,7 @@ module.exports = {
   entry: {
     'admin/home': 'app/web/page/admin/home/index.ts'
   },
-  lib: ['vue', 'vuex', 'vue-router', 'vuex-router-sync', 'axios'],
+  dll: ['vue', 'vuex', 'vue-router', 'vuex-router-sync', 'axios'],
   loaders: {
     typescript: true
   },

diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
   },
   "dependencies": {
-    "@hubcarl/json-typescript-mapper": "^1.1.4",
+    "@hubcarl/json-typescript-mapper": "2.0.0",
     "element-ui": "^2.0.8",
     "extend": "~3.0.0",
     "font-awesome": "^4.7.0",