ቪዥዋል ስቱዲዮ ኮድ ውስጥ ሰር ማጠናቀር ቁጠባ በታይፕ

በዚህ ልጥፍ ውስጥ ሁለት ችግሮች መፍትሔ ይሆናል: 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 :D

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 ጫን 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 -v

ችግር

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 ፋይል.

ከዚህም በላይ, 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 አይ “tsconfig.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.

አሁን አዎ, após instalação, abra o terminal integrado do Visual Studio Code, teclando:

// Tecla de atalho para o terminal integrado do Visual Studio Code:
CTRL+`
// Ou use o Menu para abrir o terminal no Visual Studio Code:
View > Integrated Terminal

Tente verificar a versão do TypeScript direto no terminal integrado do VS Code (Não no terminal do Windows), e provavelmente estará funcionando:

tsc -v

Compilação automática ao salvar um arquivo .TS

Pelo terminal do VS Code se posicione no diretório do seu script (.TS), ለምሳሌ:

ሲዲ ሲ:\wamp64\www\ts

Crie o arquivo tsconfig.json digitando no terminal VS Code:

tsc --init

Note que um arquivotsconfig.jsonserá criado emሴ:\wamp64\www\ts” (diretório corrente).

Abra o tsconfig.json e habilite a opção sourceMap”: እውነተኛ, e salve a modificação, በመሆኑም መሆን:

  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (ነባሪ), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    // "lib": [],                             /* Specify library files to be included in the compilation:  */
    // "allowJs": እውነተኛ,                       /* Allow javascript files to be compiled. */
    // "checkJs": እውነተኛ,                       /* Report errors in .js files. */
    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": እውነተኛ,                   /* Generates corresponding '.d.ts' file. */
    "sourceMap": እውነተኛ,                     /* Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    // "outDir": "./",                        /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    ... ይቀጥላል ...

Pronto, agora é só ir no terminal do VS Code e digitar o comando:

tsc -

Este comando fica monitorando (ou vendo, por isso “ወ” de watch) a aplicação e qualquer alteração no arquivos .TS, quando salvo, fará a imediata compilação em .js.

በቃ!

ጠቅላላ የመጠቀሚያ ጊዜ: 1117

አንድ መልስ ውጣ

የእርስዎ ኢሜይል አድራሻ ሊታተም አይችልም. የሚያስፈልጉ መስኮች ጋር ምልክት ነው *