# ts-react

**Repository Path**: sbotlp/ts-react

## Basic Information

- **Project Name**: ts-react
- **Description**: typeScript+react全家桶项目构架
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2019-06-30
- **Last Updated**: 2021-07-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 参考文章
 - https://www.html.cn/doc/typescript/doc/handbook/tutorials/React.html
 - https://segmentfault.com/a/1190000016578634
# 环境搭建
- create-react-app my-app --scripts-version=react-scripts-ts 

# 项目目录
```
my-app/
├─build 打包 
├─config wbpack配置
├─public react打包配置
├─scripts 编译逻辑
└─src 主要代码
  ├─app 主要代码
  │  ├─api 接口
  │  ├─routers 路由
  │  ├─redux 数据管理
  │  │  ├─actions redux动作触发
  │  │  ├─connect 封装connect
  │  │  ├─constants 数据唯一标识
  │  │  ├─stateTypes 定义数据类型
  │  ├─utils 工具
  │  └─views 页面
  │     ├─component 公共组件
  │     ├─Xxxx.scss 样式表
  │     ├─Xxxx.test.tsx 单元测试
  │     ├─Xxxx.service.ts 定义请求接口
  │     ├─Xxxx.component.tsx 页面和交互逻辑
  │     ├─Schema.service.ts 接口提交字段校验
  └─assets 静态文件
```
# 启动
- yarn start 

# 启动报错

```
Failed to compile
C:/Users/user/Desktop/My/ts-react/node_modules/@types/react/index.d.ts
(2817,14): Duplicate identifier 'LibraryManagedAttributes'.
```
# 报错处理
```
  在tsconfig.json添加
 "skipLibCheck": true
```
# 运行测试
- yarn run test 

# 打包
- yarn run build 

# 解开react配置， 不可逆
- yarn run eject

# 配置tsLint.js
 - [tslint] Import sources within a group must be alphabetized.
 - "ordered-imports": false
 - [tslint] interface name must start with a capitalized I
 - "interface-name" : [true, "never-prefix"]

# 配置scss
  - https://palantir.github.io/tslint/rules/
  - yarn add sass-loader -D
  - yarn add node-sass -D
  - 修改 webpack.config.dev.js 和 webpack.config.prod.js
```
  // 添加
  { 
    test: /\.scss$/, 
    loaders: ['style-loader', 'css-loader', 'sass-loader'], 
  }
  // 修改
  exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/] 
  => 
  exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/,/\.scss$/]
```
# 样式模块化
  - 修改 webpack.config.dev.js 和 webpack.config.prod.js
  ```
    { 
      test: /\.scss$/, | test: /\.css$/,| test: /\.less$/,
      use: [
        require.resolve('style-loader'),
        {
          loader: require.resolve('css-loader'),
          options: {
            importLoaders: 1,
            modules: true,
            localIdentName:'[name]__[local]__[hash:base64:5]'
          },
        },
        require.resolve('sass-loader') | require.resolve('css-loader') | require.resolve('less-loader')
      ]
    }
    // 使用 TS这么玩会报错，没找到好办法
    improt Stype from './index.scss';
    <div className={Stype.xxx}></div>
  ```
  # 配置tsconfig.json 
  ```
  "noUnusedLocals": false, // 关闭变量已定义但未使用停止编译
  "noImplicitAny": false, // any报错关闭
  ```
  # 配置redux
  - https://segmentfault.com/a/1190000016047027
  - https://blog.csdn.net/margin_0px/article/details/81628170
  - 报错
  - 对修饰器的实验支持是一项将在将来版本中更改的功能。设置+"experimentalDecorators"+选项以删除此警告。
  - 解决
  ```
  // .babelrc
  {
    "presets": [
      "react-app"
    ],
    "plugins": [
      ["@babel/plugin-proposal-decorators", {
        "legacy": true
      }]
    ]
  }
  // tsconfig.json
    "experimentalDecorators": true
    "target": "es2017"

  ```
# Xxxxx.component.tsx
```
import * as React from 'react';
// 定义props传参
interface Props extends React.Props<any> {
  history?: string 非必传
  ccc: number 必传
}
export default class  XxxxxComponent extends React.PureComponent<Props, any> {
  // 默认Props
  public static defaultProps: Props = {
    history: '/'
  }
  render(){
    return(
      <div> XxxxxComponent </div>
    )
  }
}
```
# Schema.service.ts
```
import { Schema } from '../../api/schema';
import { ValidateMethod } from '../../api/validate.method';
import * as _ from 'lodash';
const validate = new ValidateMethod();
// 校验规则
const config = {
  input: (body: object, value: string) => validate.isEmpty(value) ? '输入框封装不能为空' : null,
}
export class SchemaService implements Schema {
  constructor() { }
  schema() {
    return config;
  }
  checkPaths(paths: any) {
    return _.pick(config, paths);
  }
}
```
# xxxxx.service.ts
```
import { JsonApiService } from 'src/app/api/JsonApi.service';
import { ValidatorService } from 'src/app/api/validator.service';
import { SchemaService } from './Schema.service';
export class xxxxxService {
  private jsonApiService: JsonApiService;
  private validatorService: ValidatorService;
  private schema: SchemaService;
  constructor() {
    this.jsonApiService = new JsonApiService();
    this.validatorService = new ValidatorService();
    this.schema = new SchemaService();
  }
  // 调用接口
  save(data) {
    return this.validatorService.validate(
      this.jsonApiService.checkGet(`/get`, data),
      this.schema,
      data,
      // 指定字段校验，如果指定则校验所有
      this.schema.checkPaths(['input']) 
    )
  }
}
```