Merge pull request cntehang#4 from cntehang/update-angular-ts

Update angular ts

Author: danranVm

frontend/angular-best-practices.md

@@ -42,7 +42,6 @@ A module whose class defined with the above constructor will throw an exception
 
 It is not recommended that a module provides services and declares declarables. If that happens, such as the `RouterModule`, use `forRoot()` to provide and config services for the root module and `forChild()` for other modules.
 
-
 ### 解决 Module 冲突
 
 出现场景：
@@ -60,7 +59,7 @@ It is not recommended that a module provides services and declares declarables.
   },
 ```
 
-那么就回会出现下面的错误提示：
+那么就会出现下面的错误提示：
 
 ```bash
 ERROR in Duplicated path in loadChildren detected: "./domestic-flight/domestic-flight.module#DomesticFlightModule" is used in2 loadChildren, but they point to different modules "(/Users/vm/Workspace/Webs/Angular/tehang-system/src/app/routes/order/domestic-flight/domestic-flight.module.ts and "/Users/vm/Workspace/Webs/Angular/tehang-system/src/app/routes/basic-resource/domestic-flight/domestic-flight.module.ts"). Webpack cannot distinguish on context and would fail to load the proper one.
@@ -143,7 +142,8 @@ createForm() {
   - 需要注意是否是最新的状态，因为可能某个表单项改变了验证规则，但是没有更新 from 状态.
   - 或者改变任意一项，请使用 `control.updateValueAndValidity()` 以保证 form 状态的正确性
 - 对于大范围改变表单验证规则的情况，可以考虑重新 init form, 但需要小心（注意 html 中需要用 ngif 把不需要的表单 remove 掉）.
-- 把定义和获取 control 的代码放到最后 `get controlName() { return this.form.get('controlName')}`, 以更方便 review .
+- `formGroup.value`属性是获得 `FormGroup`的 `value` 的最好方法，因为它排除了 `disabled controls`。
+- 如果特殊场景需要获得 `disabled controls` 的值，需要使用 `formGroup.getRawValue()` 。
 - 如果一个验证规则被重复多次使用，请使用类似 `const pattern = Validators.pattern(moneyRegex)` ,让代码变得更简洁.
 - 表单 `control` 统一使用 `touched` 进行错误提示。
 
@@ -224,3 +224,26 @@ this.service
     }
   }
   ```
+
+## Components 风格指南
+
+### 成员顺序
+
+- 属性成员 => constructor => 生命周期钩子 => 自定义方法
+- 属性成员： @Input/Output =>  `public` 成员 => `private` 成员
+  - 相关的成员应该放在一起，例如： `spinTip` 和 `isSpinning` , `STData`、`STColumn` 和 `STComponent`
+- constructor中的依赖注入顺序： `default` => `public` => `private`
+- 生命周期钩子：按执行顺序排序
+- 自定义方法：关键的和 `public` 修饰的放在前面
+- 注意：当组件包含大量表单元素，需要使用 `getter` 时，请放到最后并使用 `// #region controls` 与 `// #endregion` 包裹
+
+  ```ts
+    // #region controls
+    get bunkCode() {
+      return this.form.get('bunkCode')
+    }
+    get discount() {
+      return this.form.get('discount')
+    }
+    // #endregion
+  ```

frontend/js-best-practices.md

@@ -0,0 +1,8 @@
+# TypeScript Best Practices
+
+- Avoid inheritance and prefer composition.
+- 使用 `Object.keys(myObject).forEach(key=> {...})` 代替 `for in`.
+- 在 `Classes` 中的一些约定
+  - 所有不需要对外部可见的成员应该使用 `private` 修饰
+  - 所有**关键的**和使用 `public` 修饰的 `function` 必须有注释。
+  - 一个 `function` 如果有 `return` 语句，就**必须**指定返回值类型，否则**建议**添加 `: void`

frontend/ts-best-practices.md

@@ -6,14 +6,10 @@
 
 ## Suggestion
 
-- 简单查询条件 `form` 统一使用 `shf-item` 组件，较复杂（需要我们自己控制布局 长短的）统一使用 `nz row + nz col`
-
-- `spin` 统一使用 `BehaviorSubject`, 定义一个 `showSpin/hideSpin` 方法， 如果需要改变 `nzTip` 则 `showSpin(nzTip)`
+- 简单查询条件 `form` 统一使用 `se` 组件，较复杂（需要我们自己控制布局 长短的）统一使用 `nz row + nz col`
 
 - `Component` 中 方法名可以简单 `query add update delete` ，但是必须有注释
 
 - `Http Service` 中方法名参照 Api 命名， 且必须有注释。命名风格 `const getXxxApi = admin/xxx/getXxx`
 
 - 统一使用 `Router Service` 进行页面跳转，并且保证 一个 module 一个 router
-
-- `Simple table`, 显示金额时，统一加上: `type: 'currency'`