2016-04-05 21 views
12

Nel mio progetto angular2 sto provando ad estendere il prototipo della classe stringa utilizzando il dattiloscritto. Questo è il mio codice:Metodi di estensione in dattiloscritto (sistema)

interface String 
{ 
    startsWith(s:string); 
    contains(s:string); 
    containsOr(s1:string, s2:string); 
} 

String.prototype.startsWith = function (s:string):boolean { 
    return this.indexOf (s) === 0; 
} 
String.prototype.contains = function (s:string):boolean { 
    return this.indexOf(s) > 1; 
} 
String.prototype.containsOr = function (s1:string, s2:string):boolean { 
    return this.indexOf(s1) > 1 || this.indexOf (s2) > 1; 
} 

Con questo codice le compilazioni di progetto (anche il contenuto assist di codice Visual Studio mi aiuta), ma a run-time ho un 'contiene non è definito'.

Cosa sto facendo male?

Grazie mille

PS: questo è il mio TSconfig:

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "system", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "outDir": "wwwroot/app/source/" 
    }, 
    "exclude": [ 
    "node_modules", 
    "bower_components", 
    "wwwroot", 
    "typings/main", 
    "typings/main.d.ts" 
    ] 
} 

EDIT

ho notato che l'importazione del file dijs in index.html funziona, ma non mi piace questo approccio.

<script src="app/source/utils/extensions.js"></script> 
+0

Hai importato le estensioni? Se stai usando un caricatore di moduli dovrai controllare se il codice che hai scritto è effettivamente caricato. –

+0

Grazie Luka. Cosa intendi con importazione? Non sto esportando la classe. Ho aggiornato la domanda con ulteriori dettagli – user3471528

+0

Bene in System.js avrete bisogno di dire al compilatore dove trovare il vostro codice. Segue tutte le tue importazioni e le risolve, caricando i contenuti. In questo modo puoi evitare di inserire tutti i file js in te in html. –

risposta

1

Invece di importare il codice html basta mettere questo nella parte superiore del vostro codice:

import './utils/extensions'; 

Basta sostituirlo con il percorso del file.

Qui ci sono alcuni forum su moduli e importazioni:

TypeScript docs

MDN docs

+0

In questo modo viene visualizzato il seguente errore: * http: // localhost: 2068/app/source/utils/extensions.js rilevati come registrati ma non eseguiti. (...) * – user3471528

+0

Puoi provare ad esportare 'String' in il tuo 'extensions.ts'? :) –

+0

Aggiunta del lavoro * export * prima * dell'interfaccia * Ricevo un errore di compilazione * errore TS2339: La proprietà 'contains' non esiste sul tipo 'String'. app/source/utils/extensions.ts (15,18): errore TS2339: la proprietà 'containsOr' non esiste sul tipo 'String'. * La cosa strana è che l'errore è relativo a contiene() e contiene O , e non per startsWith()>. < – user3471528

15

ero in grado di farlo funzionare senza TS errori (1.8.9), Angular2 (2.0.0 -beta.12) errori, e lavorando chiamata di funzione utilizzando il seguente modello:

tsconfig.json

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "system", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false 
}, 
"exclude": [ 
    "node_modules", 
    "typings/main", 
    "typings/main.d.ts" 
    ] 
} 

successivo, creare (se non ne esiste) un file global.d.ts locale al progetto:

global.d.ts (locale al progetto, non il file principale TS con lo stesso nome)

export {} 

    declare global { 
    interface String { 
     calcWidth(): number; 
    } 
    } 

extensions.ts (tutto il file)

export {} 

//don't redefine if it's already there 
if (!String.prototype.hasOwnProperty('calcWidth')) { 
    String.prototype.calcWidth = function(): number { 
     //width calculations go here, but for brevity just return length 
     return this.length; 
    } 
} 

Poi, nel tuo qualunque il tuo primo System.import (nome file) è (il mio è main.ts).Basta usare una volta:

import './extensions' //or whatever path is appropriate 
... 
... 

Ora, tutta la vostra applicazione è possibile utilizzare l'interfaccia:

var testString = 'fun test'; 
console.log(testString.calcWidth()); 

produce un output della console:

8 

Spero che questo è utile.

Problemi correlati