typescript 显示组件宽度不透明度为5s +按日期排序

ts
import {Component, Input, OnInit} from '@angular/core';
import * as I from '../../general/Models/interfaces';
import * as ITichnun from '../../general/Models/tichnun.interface';
import {tihnunArihatData} from '../../../../assets/mock-data/tihnun-ariha-mock';
import {ISugTzerufListItems} from '../../general/Models/interfaces';
import {Observable} from 'rxjs';
import 'rxjs-compat/add/observable/of';
import 'rxjs-compat/add/operator/delay';


@Component({
    selector: 'app-tichnun-ariha',
    templateUrl: './tichnun-ariha.component.html',
    styleUrls: ['./tichnun-ariha.component.scss']
})
export class TichnunArihaComponent implements OnInit {

    breadcrumbsList: Array<I.ISiteLink> = [
        {
            link: '#',
            text: 'תכנון הבחנות'
        },
        {
            link: '#',
            text: 'איתור כיתות'
        },
        {
            link: '#',
            text: 'תכנון תלת שנתי לתלמיד'
        },
        {text: 'תכנון למקצוע אנגלית'}
    ];
    subTitleBarData: ITichnun.ISubTitleBarData = {
        icon: 'pencil-w.svg', h3: 'תכנון לתנ"ך כללי',
        mainLinkText: 'אביבה פיינברג',
        mainLinkHref: '',
        numberAndSubject: 'י"א 2',
        moreInfo: 'מידע מלא על תוכניות הלימוד ניתן למצוא ב',
        moreInfoLinkText: 'אתר המפמ"ר בהסטוריה',
        moreInfoLinkHref: '#'
    };

    herkevTzerufim: ISugTzerufListItems[] = [];
    interval = 0;


    constructor() {
        this.herkevTzerufim = tihnunArihatData;

    }

    ngOnInit() {
        setTimeout(() => {
            this.interval = 1;
        }, 5000);
    }

    onDeleteZiruf(event) {
        this.herkevTzerufim.forEach((ziruf) => {
            if (event === ziruf.sugTzerufId) {
                this.herkevTzerufim.splice(this.herkevTzerufim.indexOf(ziruf), 1);
            }
        });
    }

    getIndex(index) {


    }


}
html
<app-breadcrumbs [breadcrumbsList]="breadcrumbsList"></app-breadcrumbs>
<div class="tichnun-ariha">
    <div class="title-wrapper">
        <div><h2 id="page-title" class="page-title">עריכת תכנון</h2></div>



    <div class="top-line">
        <button  kendoButton [icon]="'edit'" class="reg-btn chief-btn btn-top-line">הוספת תכנון למקצוע/דרישה</button>
        <button  kendoButton [icon]="'trash'" class="reg-btn chief-btn blue-outline-btn"> מחיקת תכנון למקצוע</button>
    </div>
    </div>

    <div>
        <app-sub-title-bar [subTitleBarData]="subTitleBarData"></app-sub-title-bar>
    </div>

    <div *ngFor="let i of herkevTzerufim | orderByDate let index=index" [ngClass]="{'older': index > interval}">
        <app-tihnun-ariha-details    [herkevTzerufim]="i" (emitId)="onDeleteZiruf($event)">


        </app-tihnun-ariha-details>
    </div>
    <div class="actions">
        <button type="submit" class="reg-btn blue-btn btn-submit"  >סגירה</button>
    </div>
</div>
style
.tichnun-ariha #page-title.page-title {
    margin-bottom: 24px!important;
    margin-top: 14px!important;
}


.tichnun-ariha .title-wrapper {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;

    .top-line{
        margin-bottom: 0;
    }

    button.reg-btn.chief-btn.btn-top-line.k-button-icontext.k-button{
        margin-left: 15px;
    }


}
.actions{
    display: flex;
    justify-content: flex-end;
    margin-top: 31px;
}
.older {
    opacity: 0.5;
}
pipe by date
import {Pipe, PipeTransform} from '@angular/core';
import {ISugTzerufListItems} from '../../general/Models/interfaces';

@Pipe({
    name: 'orderByDate'
})
export class OrderByDatePipe implements PipeTransform {

    transform(herkevTzerufim: ISugTzerufListItems[], args?: any): any {
        // console.log('herkevTzerufim', herkevTzerufim);
        let newTzerufim = herkevTzerufim.sort((a: any, b: any) => {
            return new Date(b.updateDate).getTime() - new Date(a.updateDate).getTime();

        })
        return newTzerufim;
    }

}

typescript 使用模型类型创建数组

script.ts
// Model
export class Recipe {
  public name: string;
  public description: string;
  public imagePath: string;

  constructor(name: string, desc: string, imagePath: string) {
    this.name = name;
    this.description = desc;
    this.imagePath = imagePath;
  }
}



private recipes: Recipe[] = [
    new Recipe('Name 1', 'This is simply a test 1', 'img link 1'),
    new Recipe('Name 2', 'This is simply a test 2', 'img link 2')
  ];

typescript 通用类型

script.ts
// Better Generic
function betterEcho<T> (data: T){
    return data;
}

// Generic type and Arrays []
function printAll<T>(args: T[]){
    args.forEach((element) => console.log(element));
}

printAll<string>(['Apple','Banana']);
printAll<number>([1,2]);

// Built-in Generics
const testResults: Array<number> = [1,2,3,4,5,6,7];
const testResults2: Array<string> = ['a','b','c','d'];

console.log(testResults);
console.log(testResults2);

// Generic Types
// https://www.udemy.com/understanding-typescript/learn/v4/t/lecture/5660714?start=0
const echo: <T>(data: T) => T = betterEcho;
console.log(echo<string>('Hello'))

// Generic Class
// https://www.udemy.com/understanding-typescript/learn/v4/t/lecture/5660722?start=0
class SimpleMath<T extends number | string> {
    baseValue: T;
    multiplyValue: T;
    calculate(): number {
        return +this.baseValue * +this.multiplyValue;
    }
}

const simpleMath = new SimpleMath<number | string>();
simpleMath.baseValue = "10";
simpleMath.multiplyValue = 20;
console.log(simpleMath.calculate());

typescript 排除属性

exlude-props.ts
// interface for unneeded props
interface APIMetaProps {
   _id: number;
   created: number;
   last_updated: number;
}

//generic type for props - unneeded props
type DropAPIMeta<T> = Pick<T, Exclude<keyof T, keyof APIMetaProps>>;

//utility function to remove unneeded props from an object
function dropAPI<T extends DropAPIMeta>(obj: T): DropAPIMeta<T> {
    let { _id, created, last_updated, ...rest } = obj;
    return rest;
}

typescript 颠倒

transpose
  const transpose = (a: (number | string)[][]) =>
    a[0].map((_: number | string, c: number | string) =>
      a.map((r: (number | string)[]) => r[c])
    );

typescript 示例dinamic查询类似looporm与typeorm

示例dinamic查询类似looporm与typeorm

custom.ts
import { GruposEntity } from './../entity/GruposEntity';

import "reflect-metadata";
import { createConnection, getManager } from "typeorm";
import { ObrasEntity } from "../entity/ObrasEntity";
import { PersonasEntity } from '../entity/PersonasEntity';
import { UnidadesEnterramientoEntity } from '../entity/UnidadesEnterramientoEntity';
import { UsuariosGruposEntity } from '../entity/UsuariosGruposEntity';
import { DifuntosEntity } from './../entity/DifuntosEntity';
import { MovimientosEntity } from '../entity/MovimientosEntity';
import { TiposMovimientosEntity } from '../entity/TiposMovimientosEntity';
import { DerechosFunerariosEntity } from '../entity/DerechosFunerariosEntity';
import { resolve } from 'path';

var document: any;

const fs = require('fs-extra') // this is no longer necessary
const hbs = require('handlebars');
const path = require('path');

module.exports = function (Custom) {

  // Ficheros comunes    
  var app = require('../../server/server');

  function sqlDinamica(manager, include, tabla) {

    console.log("Pasamos");

    if (include) {
      var arrayInlclude = (!Array.isArray(include)) ? Array(include) : include
      arrayInlclude.forEach(element => {


        if (element.tipo && element.tipo === "left") {
          manager.leftJoin(tabla.concat("." + element.relation), element.relation)
        } else {
          manager.innerJoinAndSelect(tabla.concat("." + element.relation), element.relation)
        }


        // where
        var arrayWhere = Array()
        if (element.where) {
          arrayWhere = !Array.isArray(element.where) ? Array(element.where) : element.where
        }
        arrayWhere.forEach(where => {

          var key = Object.keys(where)[0]
          if (key) {
            if (where[key] && where[key].regexp) {
              var nodo = {}
              nodo[key] = where[key].regexp
              manager.andWhere(element.relation + "." + key + " REGEXP " + ":" + key, nodo)
            } else {
              var clause = where.clausesql;
              delete where.clausesql;
              manager.andWhere(element.relation + "." + key + " " + clause + " " + ":" + key, where)
            }
          }

        });

        // or
        var arrayOr = Array()
        if (element.or) {
          arrayOr = !Array.isArray(element.or) ? Array(element.or) : element.or
        }
        arrayOr.forEach(or => {
          var key = Object.keys(or)[0]
          manager.orWhere(element.relation + "." + key + " = " + ":" + key, or)
        });

        // order
        if (element.order) {
          var arrayOrder = Array()
          arrayOrder = (!Array.isArray(element.order)) ? Array(element.order) : element.order
          arrayOrder.forEach(e => {
            var order = e.split(" ")
            if (e.indexOf(".") > -1) {
              manager.orderBy(order[0].trim(), order[1].trim())
            } else {
              order = e.split(" ")
              manager.orderBy(tabla + "." + order[0].trim(), order[1].trim())
            }
          });
        }


        // Recursividad
        if (element.include) {
          sqlDinamica(manager, element.include, element.relation);
        }

      });
    }

  }


  Custom.custom = function (options, tabla, filter, cb) {
    try {
      console.log("filter");
      console.log(filter);
      var rawSql = false;
      let manager = getManager().getRepository(tabla).createQueryBuilder(tabla)

      if (filter) {
        if (filter.fields) {

          var select = [];

          if (filter.fields.length === 1 && filter.fields[0].count) { // Solo tenemos count sacamos los datos de la tabla padre
            filter.fields.forEach(field => {
              if (field['count']) {
                select.push("COUNT(" + field.count.table + "." + field.count.field + ") AS " + field.count.table + "_count")
                //select.push("COUNT(" + field.table + "." + field.field + ") AS " + field.table + "_count")
                rawSql = true;
              }
              select.push(tabla + ".*")
            });

          } else {
            filter.fields.forEach(field => {
              if (field['count']) {
                select.push("COUNT(" + field.count.table + "." + field.count.field + ") AS " + field.count.table + "_count")
                rawSql = true;
              } else {
                select.push(field.field.table + "." + field.field.field + " AS " + field.field.field)
              }
            });
          }
          manager.select(select)
        }
        if (filter.groupby) {
          var groups = !Array.isArray(filter.groupby) ? Array(filter.groupby) : filter.groupby;
          groups.forEach(group => {
            manager.addGroupBy(group.table + "." + group.field)
          })
        }

        // Base para el where
        manager.where("1 = 1")

        // Dinamica 
        sqlDinamica(manager, filter.include, tabla);


        // wheres de la tabla base
        if (filter.where) {
          var arrayWhere = Array()
          if (filter.where) {
            arrayWhere = !Array.isArray(filter.where) ? Array(filter.where) : filter.where
          }
          arrayWhere.forEach(where => {

            var key = Object.keys(where)[0]
            if (key) {
              if (where[key] && where[key].regexp) {
                var nodo = {}
                nodo[key] = where[key].regexp
                manager.andWhere(tabla + "." + key + " REGEXP " + ":" + key, nodo)
              } else {
                manager.andWhere(tabla + "." + key + " = " + ":" + key, where)
              }
            }

          });
        }

        if (filter.or) {
          var arrayOr = Array()
          if (filter.or) {
            arrayOr = (!Array.isArray(filter.or)) ? Array(filter.or) : filter.or
          }
          arrayOr.forEach(or => {
            var key = Object.keys(or)[0]
            manager.orWhere(tabla + "." + key + " = " + ":" + key, or)
          });
        }

        // order
        if (filter.order) {
          var arrayOrder = Array()
          arrayOrder = (!Array.isArray(filter.order)) ? Array(filter.order) : filter.order
          arrayOrder.forEach(e => {
            var order = e.split(" ")
            if (e.indexOf(".") > -1) { // sin especificar la tabla 
              if ("table_count") { // para ordenar por el propio count 
                manager.orderBy(order[0].replace("table_count.", "").trim(), order[1].trim())
              } else {
                manager.orderBy(order[0].trim(), order[1].trim())
              }

            } else { // especificando la tabla
              order = e.split(" ")
              manager.orderBy(tabla + "." + order[0].trim(), order[1].trim())
            }
          });
        }

        // skip
        if (filter.skip) {

          manager.skip(filter.skip)
        }
        // limit
        if (filter.limit) {
          manager.limit(filter.limit)
        }
      }

      //  devuelve los datos  y un object  del total de registros

      if (rawSql) {
        manager.getRawMany().then(data => {
          cb(null, data);
        }).catch(error => {
          console.log(error);
          cb(null, error);
        })
      } else if (filter && filter.get && filter.get === "datacount") {
        manager.getManyAndCount().then(data => {
          cb(null, data);
        }).catch(error => {
          console.log(error);
          cb(null, error);
        })
      } else if (filter && filter.get && filter.get === "count") {
        manager.getCount().then(data => {
          cb(null, data);
        }).catch(error => {
          console.log(error);
          cb(null, error);
        })
      } else {
        manager.getMany().then(data => {
          cb(null, data);
        }).catch(error => {
          console.log(error);
          cb(null, error);
        })
      }

    } catch (error) {
      console.log(error);
      cb(error);
    }

  };

  Custom.pdf = function (options, req, res, cb) {

    const puppeteer = require('puppeteer');
    req.headers['Content-Disposition'] = 'inline; filename=nombre_fichero.pdf';
    var Difuntos = app.models.Difuntos

    hbs.registerHelper('formatDate', function (options) {
      if (this) {
        if (options) {
          var d = new Date(options);
          let month = String(d.getMonth() + 1);
          let day = String(d.getDate());
          const year = String(d.getFullYear());
          if (month.length < 2) month = '0' + month;
          if (day.length < 2) day = '0' + day;
          return `${day}/${month}/${year}`;
        } else {
          return null;
        }

      }
    });
  }


  Custom.remoteMethod(
    'custom', {
      accepts: [
        {
          "arg": "options",
          "type": "object",
          "http": "optionsFromRequest",

        },
        { arg: 'tabla', type: 'string', required: true },
        { arg: 'filter', type: 'object' }
      ],
      http: {
        path: '/custom/:tabla',
        verb: 'get'
      },
      returns: {
        arg: 'custom',
        type: 'array', root: true
      }
    }
  );

};

typescript 角形组

form-group
<app-form-group [form]="form" [path]="'[fieldname]'" [label]="'[fieldlabel]'">
     <input class="grey" type="text" id="[fieldname]" formGroupName="[fieldname]">
</app-form-group>

typescript 空组件

一个空的角度组件

calender.page.ts
import { Component, OnInit } from '@angular/core';

@Component({
	selector: 'pk-calender',
	template : `<div>Calender</div>`,
	styles 	: []
})

export class CalenderPage implements OnInit(){
	constructor(){}

	ngOnInit(){

	}
} 

typescript store.ts

store.ts
import { createStore } from "redux";
import rootReducer from "../reducers";

const store = createStore(rootReducer);

export default store;

typescript React Redux

React Redux

types.d.ts
declare module "MyTypes" {
  import { StateType, ActionType } from "typesafe-actions";
  // 1 for reducer, 1 for action creators
  export type ReducerState = StateType<typeof import("../reducers").default>;
  export type RootAction = ActionType<typeof import("../actions/actions")>;
}