TypeScript扩展类方法

币秋缠论培训 發表於 2019-7-30 18:03:00

以数组删除元素为例
javascript数组删除一般是这样
<div class="cnblogs_code">
<pre>1 const idx = selectedIDs.findIndex(x => x === deSelected);
2 selectedIDs.splice(idx, 1); </pre>
</div>
或者 
<div class="cnblogs_code">
<pre>const deleteId='xxxx'; const selectedIDs= selectedIDs.filter(x => x!==deleteId)</pre>
</div>
不方便
在tyscript中扩展数组增加常用方法
1 建立接口声明文件
extension.d.ts
<div class="cnblogs_code">
<pre>declare global {
interface Number {
 thousandsSeperator(): String;
}
}
export {}; </pre>
</div>
2 建立实现文件 number-extensions.ts
<div class="cnblogs_code">
<pre>Number.prototype.thousandsSeperator = function(): string {
return Number(this).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
} </pre>
<pre>export {}; </pre>
</div>
3 使用
<div class="cnblogs_code">
<pre>import "../utils/number-extensions";
const num=111111;
console.log(num.thousandsSeperator() );</pre>
</div>
4 数组常用方法
接口声明
<div class="cnblogs_code">
<pre>export { }; // this file needs to be a module
declare global {
interface Array<T> {
 firstOrDefault(predicate: (item: T) => boolean): T;
 where(predicate: (item: T) => boolean): T[];
 orderBy(propertyExpression: (item: T) => any): T[];
 orderByDescending(propertyExpression: (item: T) => any): T[];
 orderByMany(propertyExpressions: [(item: T) => any]): T[];
 orderByManyDescending(propertyExpressions: [(item: T) => any]): T[];
 remove(item: T): boolean;
 add(item: T): void;
 addRange(items: T[]): void;
 removeRange(items: T[]): void;
}
interface String {
 isNullOrEmpty(this: string): boolean; <code>　　　　 format(...replacements: string[]): string;</code></pre>
<pre>} }</pre>
</div>
实现
<div class="cnblogs_code">
<pre>export { }; // this file needs to be a module


(function () {
if (!String.prototype.isNullOrEmpty) {
 String.prototype.isNullOrEmpty = function (this: string): boolean {
 return !this;
 };
} </pre>
<pre> if (!String.prototype.<code>format</code>) { </pre>
<pre><code>　　　　String.prototype.format = function() {
　　　　 var args = arguments;
　　　　return this.replace(/{(\d+)}/g, function(match, number) {
　　　　 return typeof args != 'undefined' ? args: match ;
　　　　});
　　 };</code>}</pre>
<pre>if (!Array.prototype.firstOrDefault) { Array.prototype.firstOrDefault = function (predicate: (item: any) => boolean) { for (var i = 0; i < (<Array<any>>this).length; i++) { let item = (<Array<any>>this); if (predicate(item)) { return item; } } return null; } } if (!Array.prototype.where) { Array.prototype.where = function (predicate: (item: any) => boolean) { let result = []; for (var i = 0; i < (<Array<any>>this).length; i++) { let item = (<Array<any>>this); if (predicate(item)) { result.push(item); } } return result; } } if (!Array.prototype.remove) { Array.prototype.remove = function (item: any): boolean { let index = (<Array<any>>this).indexOf(item); if (index >= 0) { (<Array<any>>this).splice(index, 1); return true; } return false; } } if (!Array.prototype.removeRange) { Array.prototype.removeRange = function (items: any[]): void { for (var i = 0; i < items.length; i++) { (<Array<any>>this).remove(items); } } } if (!Array.prototype.add) { Array.prototype.add = function (item: any): void { (<Array<any>>this).push(item); } } if (!Array.prototype.addRange) { Array.prototype.addRange = function (items: any[]): void { for (var i = 0; i < items.length; i++) { (<Array<any>>this).push(items); } } } if (!Array.prototype.orderBy) { Array.prototype.orderBy = function (propertyExpression: (item: any) => any) { let result = []; var compareFunction = (item1: any, item2: any): number => { if (propertyExpression(item1) > propertyExpression(item2)) return 1; if (propertyExpression(item2) > propertyExpression(item1)) return -1; return 0; } for (var i = 0; i < (<Array<any>>this).length; i++) { return (<Array<any>>this).sort(compareFunction); } return result; } } if (!Array.prototype.orderByDescending) { Array.prototype.orderByDescending = function (propertyExpression: (item: any) => any) { let result = []; var compareFunction = (item1: any, item2: any): number => { if (propertyExpression(item1) > propertyExpression(item2)) return -1; if (propertyExpression(item2) > propertyExpression(item1)) return 1; return 0; } for (var i = 0; i < (<Array<any>>this).length; i++) { return (<Array<any>>this).sort(compareFunction); } return result; } } if (!Array.prototype.orderByMany) { Array.prototype.orderByMany = function (propertyExpressions: [(item: any) => any]) { let result = []; var compareFunction = (item1: any, item2: any): number => { for (var i = 0; i < propertyExpressions.length; i++) { let propertyExpression = propertyExpressions; if (propertyExpression(item1) > propertyExpression(item2)) return 1; if (propertyExpression(item2) > propertyExpression(item1)) return -1; } return 0; } for (var i = 0; i < (<Array<any>>this).length; i++) { return (<Array<any>>this).sort(compareFunction); } return result; } } if (!Array.prototype.orderByManyDescending) { Array.prototype.orderByManyDescending = function (propertyExpressions: [(item: any) => any]) { let result = []; var compareFunction = (item1: any, item2: any): number => { for (var i = 0; i < propertyExpressions.length; i++) { let propertyExpression = propertyExpressions; if (propertyExpression(item1) > propertyExpression(item2)) return -1; if (propertyExpression(item2) > propertyExpression(item1)) return 1; } return 0; } for (var i = 0; i < (<Array<any>>this).length; i++) { return (<Array<any>>this).sort(compareFunction); } return result; } } })();</pre>
</div>
 
参考:
https://www.c-sharpcorner.com/article/learn-about-extension-methods-in-typescript/
  
来源：https://www.cnblogs.com/wolbo/p/11271774.html

頁: [1]

琼殿技术论坛's Archiver

TypeScript扩展类方法