typescript 打字稿索引签名示例

ts-index.signatures.ts
class Animal {
    name: string = "";
}
class Dog extends Animal {
    breed: string = "";
}

interface NumberDictionary {
    [index: string]: number|string;
    length: number;    // ok, length is a number
    name: string;      // error, the type of 'name' is not a subtype of the indexer
}

let test:NumberDictionary = {length:2, name: 'anthonywang'}

console.log(test[name])
console.log(test[0])

interface NumberDictionary1 {
    [index: string]: number;
    length: number;    // ok, length is a number
}

interface ReadonlyStringArray {
    [index: number]: string;
}
let myArray: ReadonlyStringArray = ["Alice", "Bob"];
myArray[2] = "Mallory"; // error!

console.log(myArray[0])
console.log(myArray[1])
console.log(myArray[2])

typescript 打字稿函数示例

ts-functors .ts
const double = (x: number) => x * 2;
const hello = (x: string) => `Hello ${x}`;
const conversion = (x: number) => `Hello ${x.toString()}`;

interface Mappable<T> {
  map: <R>(fn: (x: T) => R) => Mappable<R>;
  valueOf: () => T;
}

const identity = <T>(value: T): Mappable<T> => ({
  map: <R>(fn: (x: T) => R): Mappable<R> => identity(fn(value)),
  valueOf: () => value,
});

const a = identity(3);
const b = a.map(double);
const vB = b.valueOf();
console.log(vB); // 6

const c = identity('cat');
const d = c.map(double); // COMPILE TIME ERROR
const vD = d.valueOf();
console.log(vD);

const e = c.map(hello);
const vE = e.valueOf();
console.log(vE); // Hello cat

const f = a.map(conversion);
const vF = f.valueOf();
console.log(vF); // Hello 3

const g = a.map(double).map(conversion);
const gF = g.valueOf();
console.log(gF); // Hello 6

typescript 选择DOM

DOM.ts
const conditionCompareContainer = document.querySelector<HTMLElement>('.dq_condition-compare');

// check if the selected element is null
if (!conditionCompareContainer) {return;}

typescript 使用传递Type的Typescript继承

Typescript Inheritance with passed Type
interface Item<T> { 
   id: T
   name: string
   price: number
} 

interface Product extends Item<number> {
   stock: number
}

interface Service extends Item<string> {}


const item1 = <Product> {}

item1.id = 1;
item1.name = "Juice";
item1.price = 5.00;

const item2 = <Service> {}

item2.id = 'ServiceABC';
item2.name = "Juice";
item2.price = 5.00;

typescript 打字稿接口继承

Typescript Interface Inheritance
interface Mother { 
   eyeColor:string 
} 
 
interface Father { 
   hairColor:string 
} 
 
interface Child extends Mother, Father { } 
 
var junior:Child = { eyeColor:'Brown', hairColor:'Black'} 
 
console.log(junior.eyeColor + ' ' + junior.hairColor)

typescript 打字稿界面类型函数

Typescript Interface Type Function

interface RunOptions { 
   program:string; 
   commandline: string[] | string | (()=>string); // Last is a type function which doesn't recieve parameters but returns a string 
} 

typescript 自定义日期管道Angular(格式日期)

html
   <kendo-grid-column  title="טווח תאריכים למועד">
        <ng-template kendoGridCellTemplate let-dataItem>
            <span>{{dataItem.tvahTaarihimLeMoedStart|customDate:dataItem.tvahTaarihimLeMoedStart}}</span>
            <span *ngIf="dataItem.tvahTaarihimLeMoedStart && dataItem.tvahTaarihimLeMoedEnd " class="dash">-</span>
            <span >{{dataItem.tvahTaarihimLeMoedEnd|customDate:dataItem.tvahTaarihimLeMoedEnd}}</span>
       </ng-template>
   </kendo-grid-column>
custom-date.pipe.ts
import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
    name: 'customDate'
})
export class CustomDatePipe implements PipeTransform {

    transform(value: Date, args?: any): any {
        // console.log(value);
        const formattedDate = value.toLocaleDateString('en-GB', {
            day: 'numeric', month: 'numeric', year: 'numeric'
        }).replace(/ /g, '/');
        return formattedDate;
    }
}

typescript Mobx getParent View

从父级获取计算视图

view.ts
get view() : IReturnType | undefined {
  try {
    return getParentOfType(self, Parent).parameter;
  } catch (error) {
    return undefined;
  }
}

typescript 对话框打开时添加到Body Class

ts
 constructor(@Inject(DOCUMENT) private document, private fb: FormBuilder,
                private dataService: PassDataFromTableService,
                private inputService: SearchInputService) {
    }
    
 onShiyuhLeHeder() {
    this.checkboxArray = [];
    this.isShowDialogShiyuhLeHadarim = true;
    this.document.body.style.overflow = 'hidden';
    this.showProgressBarComponent = true;
  } 
 onCloseDialog(event) {
    this.isShowDialogShiyuhLeHadarim = event;
    this.document.body.style.overflowY = 'visible';
    this.document.body.style.overflowX = 'hidden';
    this.isNotSelectedRow = true;
    this.showProgressBarComponent = false;
    this.dataBinding.rebind();

 }  

typescript 获取已过滤数组的长度

ts
this.shuihuLeHeder = this.nivhanimTableData.filter((item) => {
  return item.statusShiyuh !== '';
}).length;