Utilizzo di TypeScript in un progetto di sito Web di Visual Studio esistente

Ho un progetto di Visual Studio esistente che è stato impostato come progetto “Sito Web”. Puoi creare progetti come questo andando su File-> Nuovo sito Web. Questo è un tipo di progetto diverso da un “Progetto di applicazione Web”.

Mi piacerebbe mixare alcuni TypeScript su questo progetto. Tuttavia, non riesco a capire come istruire Visual Studio a “compilare” i miei file .ts e generare file .js. Ho il plugin TypeScript VS2012 e sono in grado di creare un progetto TypeScript, come descritto qui . Quel progetto funziona bene, ma è più sulla falsariga di un “Web Application Project”. È un tipo di progetto diverso da un “Progetto sito Web”.

Inoltre, quando creo il file .ts, all’interno di quel file l’editor mi dà l’evidenziazione della syntax TypeScript e l’intellisense. Ma ancora, non riesco a capire come ottenerlo per compilare il TypeScript su JavaScript.

Un piccolo aiuto?

Visual Studio ora supporta “compile on save” per i file TypeScript. Uso Visual Studio 2013 Update 2 e posso triggersrlo in un progetto di sito Web andando su Strumenti -> Opzioni -> Editor di testo -> TypeScript -> Progetto e selezionando la casella “Compila automaticamente i file TypeScript che sono non fa parte di un progetto. ” Non so perché è etichettato come questo, perché sta chiaramente compilando i file che fanno parte del mio progetto …

Molte delle altre risposte a questo non sono applicabili ai progetti di siti Web, perché non è ansible connettersi al processo di creazione. Con un progetto di sito Web, non esiste alcun file csproj o vbproj , poiché la generazione viene gestita da IIS, non da Visual Studio.

Se stai utilizzando un progetto di sito Web e “compila su salvataggio” non funziona per te, ci sono solo alcune alternative:

1) Utilizzare il compilatore TSC della riga di comando per compilare manualmente il codice.

2) Crea uno strumento personalizzato per compilare manualmente i tuoi file. È ansible configurarlo per l’utilizzo in Visual Studio.

3) Creare una pagina .aspx “compilazione su richiesta” che compili il TypeScript e restituiscilo come JavaScript.

4) Utilizzare il progetto JavaScript Compilare TypeScript per automaticamente il codice nel browser. Questo ti dà la “compilazione on-demand” che normalmente viene fornita con i progetti di siti web.

Prima che “compile su save” funzionasse in VS, stavo usando la compilation TypeScript. Ora sto usando felicemente “compile su save”.

Questo è stato un objective in movimento, ma solo perché il team di TypeScript ha migliorato il modo in cui tutto funziona. Ho cercato di coprire il maggior numero ansible di scenari, dal più recente al più vecchio.

Il più recente è che ora dovrebbe funzionare nelle ultime versioni di Visual Studio (attualmente v1.4) anche per i progetti web.

Ho preso questi appunti abbreviati dalla mia risposta molto più lunga sull’aggiunta di TypeScript a un progetto esistente .

VS 2013 / 0.9.5

Se si utilizza l’estensione di Visual Studio per 0.9.5 o superiore insieme a Visual Studio 2013, si dovrebbe trovare che configurerà automaticamente tutto non appena si aggiunge il primo file TypeScript.

Auto TypeScript-isation non ha funzionato?

La configurazione automatica aggiunge solo poche righe: puoi farlo manualmente:

    

VS 2012 / 0.9.x

La seguente configurazione del file di progetto dovrebbe funzionare:

      ES5 false true AMD   ES5 true false AMD   

Ancora più vecchio?

Ho trovato il modo più affidabile per aggiungere TypeScript a un progetto esistente è quello di aggiungere quanto segue al file di progetto:

          

Puoi anche aggiungere dei flag facoltativi – come --module amd :

   

A partire dalla versione 0.8.2, rilasciata il 21 gennaio 2013, il plug-in TypeScript VS2012 supporta la compilazione su salvataggio senza utilizzare WebEssentials. Vai su Strumenti> Opzioni> Editor di testo> TypeScript> sezione Progetto e seleziona la casella “Compila automaticamente …”.

Se vuoi compilare tutti i tuoi file .ts in un singolo file .js come parte del processo di compilazione (che probabilmente dovresti), assicurati che lo script app.ts abbia s in tutti i file che devono essere inclusi e aggiungi la seguente fase di pre-costruzione al tuo progetto:

 "C:\Program Files (x86)\Microsoft SDKs\TypeScript\tsc.exe" --out app.js app.ts 

(Specificando il parametro –out si dice a tsc di includere tutti i file di riferimento).

Poiché non esiste un file di progetto, potrebbe essere necessario ripristinare “manualmente” l’esecuzione del compilatore TypeScript.

Aprire un prompt dei comandi di Visual Studio (Start -> Programmi -> Microsoft Visual Studio 20xx -> Visual Studio Tools -> Prompt dei comandi dello sviluppatore).

Esegui: tsc your_input_file.ts –target ES5

Per fornire più file .ts, utilizzare un file di testo con il parametro @args_file_name.

Quando ti stanchi, metti tutto in un file batch.

Quando ti stanchi di utilizzare un file batch, converti la tua app in un’applicazione Web e modifica il file .proj come da risposta di Sohnee.

Affinché funzioni sul mio setup, ho selezionato la casella di controllo “Compila automaticamente i file TypeScript che non fanno parte di un progetto”.

Ma questo non era abbastanza. Perché la compilazione automatica funzioni in un progetto di sito Web, ho dovuto creare un file tsconfig.json con le seguenti configurazioni:

 { "compilerOptions": { "noImplicitAny": false, "noEmitOnError": true, "removeComments": false, "sourceMap": true, "target": "es5", "alwaysStrict": true, "module": "amd" }, "compileOnSave": true, "exclude": [ "node_modules", "wwwroot", "packages" ] } 

Il "compileOnSave": true impostazione è cruciale qui. È ciò che triggers la compilazione automatica.

Typescript versione 2.1.5 su Visual Studio 2017

Josh, sto usando Visual Studio 2012 Express per Web e quello che ho capito è che ogni volta che salvi il file .ts, genera automaticamente .js.

Controlla la tua cartella .ts ogni volta che salvi un file e conferma che non sta succedendo anche a te.

Ho letto i post sopra quando cerco di usare i file * .aspx e * .ts in un progetto VS-2015. Inavvertitamente ho trovato la ricetta semplice e chiara “Come combinare i file di codice * .ASPX e * .TS in un progetto di Visual Studio” e voglio condividere questa soluzione per tutti. Scusami se è troppo facile.

Per l’utilizzo di file * .aspx e * .ts in un progetto VS, creare un nuovo progetto di tipo “Applicazione Web ASP.NET”. Quindi, nel passaggio successivo, selezionare “Vuoto” nel pannello “Asp.NET 4.5.2 Templates” e “Web Forms” e “Web API” nella parte inferiore “Aggiungi cartelle e riferimenti di base per:” riquadro. Aggiungo due foto con questa procedura.

Inoltre, ho un errore di script quando uso variabili di tipo JQuery nel mio codice TypeScript. Per usare il tipo di JQuery ho bisogno di aggiungere tre cartelle nidificate nel progetto: Script \ typings \ jquery e aggiungere il file jquery.d.ts con le definizioni di tipo per jQuery. Penso che i dettagli siano facili da usare su google.

Grazie per il mio amico, che mi aiuta a trovare questa soluzione. primo passo del progetto di creazione

seconda fase del progetto di creazione

Controlla se i tuoi file .ts nelle proprietà sono associati a TypeScriptCompiler.

Tieni presente che l’apertura di un file .ts in VS nel cosiddetto progetto virtuale non equivale ad avere un riferimento al file nel progetto web VS. Il primo non ti consentirà di impostare azioni di build su di esso. Mentre un altro lo farà.

PS. Ottieni il componente aggiuntivo di Web Essentials VS per ottenere trasformazioni su file salvati, texteditor ts / js split e minimizzatore integrato.

Edit : Sì, non ho notato che non esiste alcuna azione di build disponibile con altri progetti all’inizio … Ma hey, ho spinto Sohne nella giusta direzione.