vscode nodejs membina persekitaran ts

Sebagai pembangun bahagian hadapan, kami biasanya menggunakan Node.js dan TypeScript sebagai alatan asas untuk pembangunan. Semasa proses pembangunan, kita mungkin menghadapi banyak masalah dan masalah. Salah satu masalah terbesar ialah cara membina persekitaran TypeScript yang baik. Dalam artikel ini, kami akan memperkenalkan cara untuk menyediakan persekitaran TypeScript Node.js dalam Kod Visual Studio.

Persediaan

Pertama, kita perlu memuat turun versi terkini Node.js. Kami boleh memuat turun dan memasangnya terus dari laman web rasmi (https://nodejs.org). Setelah muat turun selesai, kami boleh mengesahkan bahawa pemasangan berjaya dengan menaip node -v dalam baris arahan.

Seterusnya, kita perlu memuat turun dan mengkonfigurasi Kod Visual Studio. Anda boleh memuat turun dan memasang Kod Visual Studio dari laman web rasmi https://code.visualstudio.com/download. Kemudian, buka Kod Visual Studio dan pasang sambungan TypeScript. Untuk melakukan ini, kita boleh mencari "TypeScript" dalam bar sambungan di sebelah kiri Kod Visual Studio dan memasangnya.

Buat Projek

Setelah menyiapkan persiapan di atas, kami boleh mula membuat projek kami. Dalam Visual Studio Code, kita boleh mencipta projek baharu dengan memilih "Fail" -> "Buka Folder" dalam bar menu. Di sini, kami boleh memilih mana-mana folder kosong sebagai folder projek kami. Kemudian, kita boleh membuka terminal dan masukkan folder projek melalui perintah cd.

Memasang kebergantungan

Untuk projek TypeScript kami berinteraksi dengan baik dengan Node.js, kami perlu memasang dua kebergantungan penting: typescript dan ts-node. Untuk melakukan ini, kami boleh memasangnya dengan menaip npm install typescript ts-node di terminal.

Mengkonfigurasi TypeScript

Selepas pemasangan selesai, kami boleh mengkonfigurasi persekitaran TypeScript. Cipta fail baharu bernama tsconfig.json dalam folder projek dan tambah kod berikut di dalamnya:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "sourceMap": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Fail ini mengandungi tetapan asas untuk menyusun kod TypeScript. Antaranya, kita boleh menetapkan sasaran kompilasi, jenis modul, direktori output, dll.

Buat fail kod

Sekarang, kami telah melengkapkan konfigurasi TypeScript. Seterusnya, kami boleh mula menulis fail kod kami. Kita boleh mencipta folder baharu bernama src dalam folder projek dan mencipta fail TypeScript baharu bernama index.ts di dalamnya. Kami kemudiannya boleh menambah kod berikut dalam fail index.ts:

console.log("Hello from TypeScript!");

Kompilasi TypeScript kepada JavaScript

Kami telah menulis fail TypeScript yang mudah, kini kami perlu menyusunnya ke fail JavaScript untuk dijalankan dalam Node.js. Kita boleh menyusun fail TypeScript ke dalam fail JavaScript dengan menggunakan arahan berikut dalam terminal:

npx tsc

Ini akan menjana fail bernama dist di bawah folder index.js. Kita boleh menjalankan fail ini dengan menaip node dist/index.js di terminal. Kita sepatutnya melihat output yang serupa dengan Hello from TypeScript! pada terminal.

Walau bagaimanapun, menyusun fail TypeScript secara manual setiap kali boleh menjadi sangat membosankan. Oleh itu, kita boleh menggunakan kebergantungan ts-node untuk menjalankan kod TypeScript secara langsung tanpa penyusunan. Kita boleh menjalankan kod TypeScript dengan menaip arahan berikut dalam terminal:

npx ts-node src/index.ts

Ini akan mengeluarkan Hello from TypeScript! terus tanpa menyusun.

Ringkasan

Dalam artikel ini, kami mempelajari cara membina persekitaran TypeScript Node.js yang mudah. Kami memasang sambungan Node.js, Kod Visual Studio dan TypeScript, serta kebergantungan lain yang diperlukan. Kami mencipta projek TypeScript dan melakukan persediaan asas dan pengekodan. Kami juga belajar menggunakan ts-node untuk melaksanakan kod TypeScript secara langsung tanpa perlu menyusunnya secara manual. Saya harap artikel ini dapat membantu anda memahami persekitaran TypeScript.

Atas ialah kandungan terperinci vscode nodejs membina persekitaran ts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!