વિઝ્યુઅલ સ્ટુડિયો કોડ આપમેળે સંકલન બચત ટાઇપસ્ક્રિપ્ટ

આ પોસ્ટ માં અમે બે સમસ્યાઓ ઉકેલવા કરશે: 1) આદેશ “TSC” તે સંકલિત ટર્મિનલ વિ કોડ માન્ય નથી, ઈ 2) જ્યારે ફાઈલ બચત સંકલન આપોઆપ કામ કરતું નથી “.TS” (લખો સ્ક્રિપ્ટ).

પરિચય

Apenas para contextualizar, આ TypeScript permite escrever código utilizando uma estrutura fortemente tipada e ter este código compilado para JavaScript puro. Já o Visual Studio Code é um editor de código multiplataforma criado pela Microsoft.

// Versões utilizadas neste Post:
- Visual Studio (VS) Code: આવૃત્તિ 1.14.1
- Typescript: આવૃત્તિ 2.4.1

Essa é uma dica fácil, mas você pode ter problemas se não souber o que está fazendo: meu caso :ડી

Instalação Node.js e TypeScript

Uma das formas de instalar o TypeScript é por meio do gerenciador de pacotes do Node.js (npmNode package manager), mas para usá-lo, você primeiro precisa instalar o Node.js.

Após instalar o Node, abra o terminal (આદેશ) e execute o seguinte comando para instalar o TypeScript:

npm install -g typescript

Ainda pelo terminal do Windows (ou Linux), faça um teste de funcionamento do TypeScript verificando a versão instalada. O comandoTSCé uma acrônimo para TypeScript Compiler.

TSC -વી

સમસ્યા

O problema é que o comandoTSCfuncionava normalmente no terminal do Windows, mas não no terminal integrado que vem dentro do próprio Visual Studio Code (VS code), exibindo o seguinte erro:

'tsc' is not recognized કારણ કે an internal or external command,operable program or batch ફાઈલ.

Além disso, eu não queria executar o comandoTSCpara cada vez que quisesse compilar um arquivo.TS” (extensão para TypeScript). પછી, como sempre fazer a compilação automática ao salvar (CTRL+S)? É o que veremos adiante.

અન્ય ભૂલો

Procurando resolver esses problemas, encontrei Posts dizendo para usar o compileOnSave, mas isto só é suportado pelo Visual Studio 2015 com TypeScript >= 1.8.4 e atom-typescript plugin. બીજા શબ્દોમાં કહીએ તો, não adianta usar compileOnSave notsconfig.jsondo Visual Studio Code, o código abaixo não irá funcionar:

{
   "compileOnSave": સાચું,
   "compilerOptions": {
       "noImplicitAny" : સાચું
   }
}

ઉકેલ

TSC no Terminal integrado do VS Code

Primeiro vamos resolver o problema do TSC não ser reconhecido no terminal integrado do Visual Studio Code (VS code).

Alguns Posts sugerem colocar o caminho do tsc ou npm na variável de ambiente PATH, mas um jeito fácil de solucionar isto foi fazendo a instalação doTypeScript for Visual Studio, que é compatível para o VS Code também.

Agora sim, após instalação, abra o terminal integrado do Visual Studio Code, teclando:

// Tecla de atalho para o terminal integrado do Visual Studio Code:
સીટીઆરએલ+`
// અથવા વિઝ્યુઅલ સ્ટુડિયો કોડમાં ટર્મિનલ ખોલવા માટે મેનૂનો ઉપયોગ કરો:
જુઓ > ઇન્ટિગ્રેટેડ ટર્મિનલ

ચેક કરવાનો પ્રયાસ કરો ટાઇપસ્ક્રિપ્ટ સંસ્કરણ સીધા જ સંકલિત વીએસ કોડ ટર્મિનલમાં (વિન્ડોઝ ટર્મિનલમાં નથી), અને તે કદાચ કામ કરશે:

TSC -વી

ફાઇલને સાચવતી વખતે આપમેળે સંકલન .TS

વીએસ કોડ ટર્મિનલમાંથી, તમારી સ્ક્રિપ્ટ ડિરેક્ટરીમાં તમારી જાતને સ્થિત કરો (.TS), ઉદાહરણ તરીકે:

CDC:\wamp64  www  ts

ફાઇલ બનાવો tsconfig.json વી.એસ. કોડ ટર્મિનલમાં ટાઇપ કરવું:

TSC --તેમાં

નોંધ લો કે ફાઇલ “tsconfig.json” માં બનાવવામાં આવશે “સી:\wamp64 www ts” (વર્તમાન ડિરેક્ટરી).

ખોલો tsconfig.json અને વિકલ્પને સક્ષમ કરો “સોર્સમેપ”: સાચું, અને પરિવર્તન સાચવો, આ જેમ મેળવવામાં:

  "compilerOptions": {
    /* મૂળભૂત વિકલ્પો */
    "target": "es5",                          /* ECMAScript લક્ષ્ય સંસ્કરણનો ઉલ્લેખ કરો: 'ES3' (મૂળભૂત), 'ES5', 'ES2015', "ES2016", 'ES2017', અથવા 'ESNEXT'. */
    "module": "commonjs",                     /* મોડ્યુલ કોડ જનરેશનનો ઉલ્લેખ કરો: 'કોમનજ', 'અમડ', 'સિસ્ટમ', 'અમદ', 'es2015', અથવા 'ESNext'. */
    // "lib": [],                             /* સંકલનમાં સમાવિષ્ટ કરવા માટે લાઇબ્રેરી ફાઇલોનો ઉલ્લેખ કરો:  */
    // "allowJs": સાચું,                       /* જાવાસ્ક્રિપ્ટ ફાઇલોને કમ્પાઇલ કરવાની મંજૂરી આપો. */
    // "checkJs": સાચું,                       /* .Js ફાઇલોમાં ભૂલોની જાણ કરો. */
    // "jsx": "preserve",                     /* જેએસએક્સ કોડ જનરેશનનો ઉલ્લેખ કરો: 'સાચવો', 'રિએક્ટિવ વતની', અથવા 'પ્રતિક્રિયા'. */
    // "declaration": સાચું,                   /* અનુરૂપ '.d.ts' ફાઇલ બનાવે છે. */
    "sourceMap": સાચું,                     /* અનુરૂપ '.map' ફાઇલ ઉત્પન્ન કરે છે. */
    // "outFile": "./",                       /* સિંગલ ફાઇલમાં કન્કેનેટ અને આઉટપુટ આઉટપુટ. */
    // "outDir": "./",                        /* આઉટપુટ સ્ટ્રક્ચરને ડિરેક્ટરીમાં રીડાયરેક્ટ કરો. */
    // "rootDir": "./",                       /* ઇનપુટ ફાઇલોની રુટ ડિરેક્ટરીનો ઉલ્લેખ કરો. આઉટઆઉટ ડિરેક્ટરી સ્ટ્રક્ચરને --outDir સાથે નિયંત્રિત કરવા માટે વાપરો. */
    ... પર જાઓ ...

ટૂંક સમયમાં, હવે ફક્ત વીએસ કોડ ટર્મિનલ પર જાઓ અને આદેશ લખો:

TSC -ડબલ્યુ

આ આદેશ મોનીટરીંગ છે (અથવા જોઈ, તેથી “ડબલ્યુ” ઘડીયાળ) એપ્લિકેશન અને ફાઇલોમાં કોઈપણ ફેરફાર .TS, જ્યારે હું બચત કરું છું, માં તાત્કાલિક સંકલન કરશે .જેએસ.

બસ આ જ!

હિટ કુલ સંખ્યા: 9221

એક જવાબ છોડો

તમારું ઇમેઇલ સરનામું પ્રકાશિત કરવામાં આવશે નહીં. જરૂરી ક્ષેત્રો સાથે ચિહ્નિત થયેલ છે *