node typescript tutorial
1.0.0
Berasal dari GitHub? Pengalaman menonton yang lebih baik dari tutorial ini dapat dimiliki di situs di bawah ini: https://pokedpeter.dev
Tutorial ini akan menunjukkan kepada Anda cara membangun proyek Node Barebones (JavaScript) dari awal dengan barang -barang berikut:
Prasyarat:
Mari Siapkan Proyek Node Barebones
Buat Proyek Node kami. Dapat melewati semua opsi cepat.
mkdir project
cd project
npm init File yang disebut package.json akan diatur dengan opsi yang Anda pilih. Anda dapat melewatkan opsi antarmuka dan menggunakan default dengan menjalankan npm init -y
{
"name" : " project " ,
"version" : " 1.0.0 " ,
"description" : " " ,
"main" : " index.js " ,
"scripts" : {
"test" : " echo " Error: no test specified " && exit 1 "
},
"author" : " " ,
"license" : " ISC "
}Script utama yang dapat dieksekusi tidak dibuat secara otomatis. Buatnya.
touch index.js Tempatkan sesuatu yang mendasar di index.js untuk tujuan pengujian.
console . log ( 'Hello World' ) ;UJI DARI CLI:
node index.js
Yang memberi Anda beberapa output konsol:
Hello World
JavaScript tidak datang dengan pustaka standar bawaan. Pendekatan yang disarankan adalah menginstal paket NPM. Mari kita coba contoh. Kami akan menginstal LoDash, perpustakaan populer utilitas praktis.
npm install lodash
Inilah outputnya:
added 1 package, and audited 4 packages in 987ms
found 0 vulnerabilities
Sekarang kami telah melantunkan Lodash, kami sekarang dapat menggunakannya di aplikasi kami. Buka index.js lagi dan perbarui agar cocok:
const _ = require('lodash);
console.log(_.snakeCase('Hello World'));
Jalankan dan Anda akan melihat output berikut:
hello_world
Lihat file package.json lagi dan perhatikan bagian dependencies baru dengan entri LoDash:
"dependencies" : {
"lodash" : " ^4.17.21 "
}Tip
Untuk dengan cepat melihat konten file dari CLI, ketik: cat package.json
Lihat file proyek Anda dan perhatikan folder node_modules telah dibuat:
$ ls -l
index.js
node_modules
package-lock.json
package.jsonFolder ini adalah tempat ketergantungan Anda disimpan. Mari kita periksa:
$ ls node_modules
@types lodash typescriptMari kita tambahkan naskah ke proyek Node Barebones kami.
Instal ketergantungan TypeScript, sebagai depedensi dev. Semua dependensi naskah hanya diperlukan selama pengembangan sehingga kami melakukan --save-dev
npm install --save-dev typescriptInstal TypeScript Jenis Definisi untuk Node:
npm install --save-dev @types/nodeTip
Instal beberapa paket dalam satu perjalanan dengan menggabungkannya pada satu baris: npm install --save-dev typescript @types/node
Lihatlah dependensi di package.json . Inilah bagian yang relevan:
{
"devDependencies" : {
"@types/node" : " ^20.4.9 " ,
"typescript" : " ^5.1.6 "
}
}Inisialisasi naskah dengan menjalankan perintah berikut di mana saja dalam proyek Anda.
npx tsc --init Ini akan membuat file tsconfig.json dengan pengaturan default:
Created a new tsconfig.json with:
target: es2016
module: commonjs
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: true
Kami menggunakan npx yang mengeksekusi binari yang diinstal secara lokal yang telah diinstal melalui package.json .
Peringatan
Beberapa panduan instalasi akan merekomendasikan menginstal naskah secara global sudo npm install -g typescript . Saya akan merekomendasikan untuk menginstal versi lokal (mis. Di dalam folder proyek Anda)
Versi global mungkin berakhir berbeda dari versi lokal yang diinstal untuk proyek Anda. Menjalankan tsc secara langsung menggunakan versi global. Ketika tsc dijalankan sebagai bagian dari NPM dalam proyek Anda, ia menggunakan versi lokal.
Ada beberapa opsi yang ditetapkan secara default di tsconfig.json . Ada banyak opsi yang dikomentari - tidak ditunjukkan di bawah ini.
{
"compilerOptions" : {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
/* Basic Options */
"target" : " es5 " , /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
"module" : " commonjs " , /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
/* Strict Type-Checking Options */
"strict" : true , /* Enable all strict type-checking options. */
/* Module Resolution Options */
"esModuleInterop" : true , /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
/* Advanced Options */
"skipLibCheck" : true , /* Skip type checking of declaration files. */
"forceConsistentCasingInFileNames" : true /* Disallow inconsistently-cased references to the same file. */
}
}Beberapa penyesuaian yang direkomendasikan ke default:
"target" : " es2015 " , // I'd recommend es2015 at a minimum. es5 is ancient.
"outDir" : " build " , // Keep our compiled javascript in the build directory
"rootDir" : " src " , // Keep our source code in a separate directory
"noImplicitAny" : true , // We're using Typescript yeah? And not adding Typescript to an existing project. Enforce good habits from the start.
"lib" : [ " es2020 " ], // Setting this excludes DOM typings as we are using Node. Otherwise you'll run into errors declaring variables like 'name' Sehubungan dengan target . Umumnya versi node yang lebih baru akan mendukung fitur ECMA yang lebih baru. Situs web di bawah ini adalah sumber yang bagus untuk melihat fitur ECMA apa yang tersedia untuk setiap versi node:
https://node.green/
Tidak perlu lagi index.js:
rm index.jsSiapkan kode sumber proyek kami:
mkdir src
cd src
touch index.ts Tambahkan sesuatu yang mendasar ke index.ts untuk mengujinya:
console . log ( 'Hello typescript!' ) ;Kompilasi proyek barebones kami.
npx tsc Output yang dikompilasi, sebagai JavaScript, dapat ditemukan di direktori /build . Ini akan berisi index.js yang mencerminkan src/index.ts kami
Isi index.js:
"use strict" ;
console . log ( 'Hello World!' ) ;Anda sekarang siap untuk membangun proyek JavaScript dengan TypeScript!
Sampai baru-baru ini, Tslint adalah linter kode naskah masuk tetapi sekarang sudah usang karena proyek telah dikonsolidasikan ke dalam Eslint. Inilah beranda resmi:
Situs web:
https://eslint.org
Situs GitHub:
https://github.com/typescript-eslint/typescript-eslint
Instal Eslint (sebagai Ketergantungan Dev Tentu saja)
npm install --save-dev eslintMari Siapkan Konfigurasi Lint kami Menggunakan Perintah Init Eslint:
npx eslint --initIkuti petunjuknya. Kami menggunakan Node, jadi tidak diperlukan dukungan browser. Ini akan menanyakan apakah Anda ingin menginstal plugin TypeScript dependen. Silakan lakukan itu.
✔ How would you like to use ESLint ? · problems
✔ What type of modules does your project use ? · esm
✔ Which framework does your project use ? · none
✔ Does your project use TypeScript ? · No / Yes
✔ Where does your code run ? · node
✔ What format do you want your config file to be in ? · JSON
The config that you ' ve selected requires the following dependencies:
@typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
✔ Would you like to install them now with npm? · No / Yes
Successfully created .eslintrc.json file in /your/projectInformasi lebih lanjut tentang konfigurasi serat di bawah ini:
https://eslint.org/docs/user-guide/configuring
Menggunakan opsi yang dipilih di atas, file .eslintrc.json kami terlihat seperti ini:
{
"env" : {
"es2020" : true ,
"node" : true
},
"extends" : [
" eslint:recommended " ,
" plugin:@typescript-eslint/recommended "
],
"parser" : " @typescript-eslint/parser " ,
"parserOptions" : {
"ecmaVersion" : 11 ,
"sourceType" : " module "
},
"plugins" : [
" @typescript-eslint "
],
"rules" : {
}
}Anda mungkin telah memperhatikan salah satu pertanyaan selama proses Eslint Init adalah ini:
? How would you like to use ESLint ? …
To check syntax only
▸ To check syntax and find problems
To check syntax, find problems, and enforce code styleOpsi terakhir juga menegakkan gaya kode. Jika Anda memilih opsi itu, pertanyaan tindak lanjut adalah:
? How would you like to define a style for your project ? …
▸ Use a popular style guide
Answer questions about your style
Inspect your JavaScript file(s)Jika Anda memilih untuk menggunakan panduan gaya yang populer, Anda kemudian akan memiliki pilihan dari berikut ini:
? Which style guide do you want to follow ? …
▸ Airbnb: https://github.com/airbnb/javascript
Standard: https://github.com/standard/standard
Google: https://github.com/google/eslint-config-google
XO: https://github.com/xojs/eslint-config-xoSaya akan merekomendasikan meneliti panduan gaya di atas dan pergi dengan yang selaras dengan preferensi Anda.
Selanjutnya, kami akan membuat file konfigurasi lain dalam teks PLAIND untuk memungkinkan kami mengecualikan file dan direktori dari linting:
touch .eslintignoreDan tambahkan konten berikut ke file:
node_modules
build
Kami tidak ingin berbaris pada kode JavaScript yang dikompilasi.
Secara default, aturan standar diaktifkan. Lihat item yang dicentang dalam daftar di:
https://eslint.org/docs/rules/
Misalnya, mari kita coba melanggar aturan no-extra-semi .
Coba tambahkan semi-kolon ke akhir baris di index.ts dan lakukan pemeriksaan serat untuk melihat kesalahan:
console . log ( 'Hello typescript' ) ; ;Kemudian:
npx eslint srcYang mengakibatkan:
1:34 error Unnecessary semicolon @typescript-eslint/no-extra-semi
✖ 1 problem (1 error, 0 warnings)
1 error and 0 warnings potentially fixable with the `--fix` option.
Peringatan
Saat menginstal opsi Airbnb, saya perhatikan Eslint perlu memiliki ekstensi file .ts yang dilewati:
npx eslint src --ext .ts Buat skrip untuk ini di package.json sehingga kami dapat dengan mudah menyebutnya:
"scripts" : {
...
"lint" : " eslint src --ext .ts "
},Hanya berlaku saat di NPM <V7 tetapi perhatikan bahwa jika Anda menjalankan skrip NPM dan masalah ditemukan, Anda akan melihat pesan kesalahan NPM berikut ditambahkan di bawah output ESLINT:
> eslint src --ext .ts
/home/user/dev/test/src/index.ts
1:1 warning Unexpected console statement no-console
1:21 error Missing whitespace after semicolon semi-spacing
1:22 error Unnecessary semicolon no-extra-semi
✖ 3 problems (2 errors, 1 warning)
2 errors and 0 warnings potentially fixable with the ` --fix ` option.
npm ERR ! code ELIFECYCLE
npm ERR ! errno 1
npm ERR ! [email protected] lint: ` eslint src --ext .ts `
npm ERR ! Exit status 1
npm ERR !
npm ERR ! Failed at the [email protected] lint script.
npm ERR ! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR ! A complete log of this run can be found in:
npm ERR ! /home/user/.npm/_logs/2021-08-18T15_27_55_318Z-debug.logSaya tidak melihat kesalahan NPM saat pada NPM V7 (mis. Saat menggunakan simpul 16.6.2)
Setiap aturan bisa menjadi salah satu dari tiga negara bagian:
| Mode aturan | Keterangan |
|---|---|
| 0 atau "off" | Menonaktifkan aturan tersebut |
| 1 atau "memperingatkan" | Peringatan, linter tidak akan gagal |
| 2 atau "kesalahan" | Kesalahan, linter akan gagal |
Aturan dapat ditambahkan sebagai kunci ke objek aturan dalam file konfigurasi lint .eslintrc.json:
{
"root" : true ,
"parser" : " @typescript-eslint/parser " ,
"plugins" : [ ... ],
"extends" : [ ... ],
"rules" : {
..your rules go here..
}
}Temukan aturan di eslint.org:
https://eslint.org/docs/rules/
Mari kita uji aturan gaya yang bernama 'koma'. Kami ingin memperingatkan pengguna jika array dengan beberapa baris kehilangan koma pada item terakhir.
Tambahkan aturannya:
"rules" : {
"comma-dangle" : [
" warn " , {
"arrays" : " always-multiline "
}
]
}Baca detail aturan di situs web. Ada sedikit kustomisasi yang diizinkan untuk banyak aturan. Kami ingin selimut menegakkan koma yang menggantung di semua skenario dalam contoh ini.
Ubah index.ts dengan kode berikut:
const movies = [
'Lord of the Flies' ,
'Battle Royale'
] ;
movies . pop ( ) ;Jalankan linter:
npx eslint srcSekarang kita harus melihat peringatan berikut:
3:18 warning Missing trailing comma comma-dangle
✖ 1 problem (0 errors, 1 warning)
0 errors and 1 warning potentially fixable with the ` --fix ` option. Catatan di output ada opsi untuk memperbaiki masalah. Coba jalankan linter dengan opsi --fix :
npx eslint --fix src Tidak ada output dari linter kali ini dan jika kita memeriksa index.ts kita akan melihat bahwa koma yang menggantung telah ditambahkan secara otomatis:
const movies = [
'Lord of the Flies' ,
'Battle Royale' , // <-- dangling comma added
] ;
movies . pop ( ) ; Kami akan menggunakan kode yang lebih cantik untuk memformat. Ini adalah formatter kode yang bertentangan yang mendukung banyak bahasa termasuk TypeScript, JavaScript dan format lain yang dapat Anda gunakan untuk konfigurasi seperti JSON dan YAML.
https://prettier.io
Atau, Anda dapat tetap dengan Eslint untuk memformat kode Anda secara gaya. Prettier berbeda karena tidak memodifikasi kode Anda, kecuali jika Anda mengatur salah satu dari segelintir opsi.
Instal modul:
npm install --save-dev prettierBuat file konfigurasi. Ini memberi tahu editor dan alat lain yang tahu Anda menggunakan yang lebih cantik:
echo {} > .prettierrc.jsonAnda mungkin tidak perlu menambahkan opsi apa pun ke file konfigurasi karena sebagian besar akan melibatkan mengubah kode Anda. Tinggalkan itu ke Eslint dan biarkan lebih baik berurusan dengan pemformatan.
Buat file abaikan. Ini membuat CLI dan editor yang lebih cantik tahu file mana yang akan dikecualikan dari pemformatan.
touch .prettierignore Tambahkan baris berikut ke .prettierignore :
node_modules
buildUji lebih cantik dengan perintah berikut. Itu tidak akan overrite apa pun hanya mengeluarkan kode yang diformat:
npx prettier srcBerdasarkan perubahan terakhir kami ke index.ts, outputnya adalah:
const movies = [ "Lord of the Flies" , "Battle Royale" ] ;
movies . pop ( ) ;Kita dapat melihat bahwa array multi-line telah diformat menjadi satu baris.
Tulis perubahan ke file dengan mengulangi perintah dengan opsi --write :
npx prettier --write srcIni akan mencantumkan file yang telah diformat:
src/index.ts 279msMengingat Eslint dan Prettier dapat memformat kode, Anda dapat mengharapkan beberapa konflik terjadi. Prettier telah membuat aturan khusus untuk Eslint yang pada dasarnya menonaktifkan aturan apa pun yang tidak perlu atau bertentangan ketika dikombinasikan dengan lebih cantik.
Yang pertama adalah eslint-config-prettier :
https://github.com/prettier/eslint-config-prettier
Konfigurasi ini mematikan semua aturan yang tidak perlu atau konflik dengan lebih cantik. Instal dengan perintah berikut:
npm install --save-dev eslint-config-prettier Kemudian, tambahkan ke baris terakhir dari bagian extends Anda di Eslint Config, .eslintrc.json :
{
"extends" : [
"eslint:recommended" ,
"plugin:@typescript-eslint/recommended" ,
"plugin:@typescript-eslint/eslint-recommended" ,
"prettier" // <-- Add this
] ,
}Anda dapat menjalankan perintah berikut pada file apa pun untuk memeriksa bahwa tidak ada konflik antara Eslint dan lebih cantik:
npx eslint-config-prettier src/index.tsJika semuanya berjalan dengan baik, Anda harus mendapatkan respone berikut:
No rules that are unnecessary or conflict with Prettier were found. Selanjutnya yang akan diinstal adalah eslint-plugin-prettier :
https://github.com/prettier/eslint-plugin-prettier
Berjalan lebih cantik sebagai aturan eslint dan melaporkan perbedaan sebagai masalah eslint individu. Instal dengan perintah berikut:
npm install --save-dev eslint-plugin-prettier Kemudian perbarui file .eslintrc.json Anda sebagai berikut:
{
"plugins" : [ " prettier " ],
"rules" : {
"prettier/prettier" : " error "
}
}Cari plugin di bawah ini:
ESLint - oleh Dirk Baeumer
Cari plugin di bawah ini:
Prettier - Code formatter - oleh Prettier
Tekan Ctrl + Shift + I untuk memformat kode. Anda akan diminta untuk memilih formatter default. Pilih lebih cantik sebagai default Anda.
Cari plugin di bawah ini:
Prettier ESLint - oleh Rebecca Vest
Script ini disesuaikan dengan proyek TypeScript kami. Kami hanya memeriksa file .ts.
Tambahkan perintah di bawah ini ke bagian scripts package.json Anda.json.
"start:dev" : " nodemon " "lint" : " eslint --ext .ts src "
"lint-fix" : " eslint --fix --ext .ts src " "pretty" : " prettier --write 'src/**/*.ts' " Curveball adalah kerangka mikro untuk membangun API di node. Ini dibangun dari bawah ke atas dengan dukungan untuk naskah yang bertentangan dengan pendahulunya yang lebih populer KOA.
https://curveballjs.org/
Instal:
npm install @curveball/core Salin contoh dari situs web ke index.ts . Satu -satunya hal yang akan kami ubah adalah nomor port. Karena dua alasan. Satu, port 80 dapat diblokir. Dua. Berjalan di port yang berbeda memungkinkan kami untuk memiliki beberapa proyek node yang berjalan secara bersamaan.
import { Application } from '@curveball/core' ;
const app = new Application ( ) ;
app . use ( async ctx => {
ctx . response . type = 'text/plain' ;
ctx . response . body = 'hello world' ;
} ) ;
app . listen ( 9000 ) ;Mulai server dalam mode dev dengan skrip yang kami buat sebelumnya:
npm run start:devAnda akan mendapatkan output berikut saat Nodemon mendengarkan perubahan file:
> [email protected] start:dev /home/your_name/project
> nodemon
[nodemon] 2.0.4
[nodemon] to restart at any time, enter ` rs `
[nodemon] watching path(s): src/ ** / *
[nodemon] watching extensions: ts,jsSetelah membuat perubahan kode, tonton output konsol server menjadi nodemon di tempat kerja. Juga menyegarkan halaman web untuk melihat pembaruan.
Siapkan Muat Ulang Otomatis Setelah Perubahan Kode untuk Pengembangan. Instal nodemon untuk memantau perubahan file dan ts-node untuk menjalankan kode TypeScript secara langsung alih-alih harus mengkompilasi dan kemudian meneruskan ke node .
npm install --save-dev ts-node nodemon Tambahkan konfigurasi nodemon.json . Ini akan mengkonfigurasi nodemon untuk menonton perubahan pada file .ts dan .js di dalam direktori kode sumber Anda dan kemudian menjalankan perintah exec setelah perubahan.
{
"watch" : [ " src " ],
"ext" : " .ts,.js " ,
"ignore" : [],
"exec" : " ts-node ./src/index.ts "
} Tambahkan skrip NPM di dalam package.json untuk memulai nodemon untuk pengembangan:
"start:dev" : " nodemon " Jalankan npm run start:dev untuk memulai proses ulang.
Instal Docker dan Instruksi pencarian tentang cara menjalankan Docker tanpa sudo - instruksi dihilangkan di sini karena mereka adalah OS / distro spesifik.
Buat file docker-compose.yml dengan satu wadah simpul sebagai layanan:
Nama proyek kami adalah "Proyek" seperti nama layanan dan wadah. Kami memiliki volume pemetaan direktori proyek kami ke /proyek di dalam wadah simpul. Terakhir pastikan port cocok dengan port yang terbuka di aplikasi Anda.
Rincian lebih lanjut di bawah ini:
https://docs.docker.com/compose/compose-file/
version : ' 3 '
services :
project :
build : .
container_name : project
volumes :
- .:/project
ports :
- " 9000 " Selanjutnya buat Dockerfile dengan konten berikut.
FROM node:12
WORKDIR /project
COPY package.json .
RUN npm install
COPY . .
CMD [ "npm" , "run" , "start:dev" ]Ini mengatur direktori proyek kami di dalam wadah, menginstal paket node kami, salinan konten dari sistem file asli kami dan memulai server Curveball kami dalam mode dev.
Sekarang angkat wadah:
docker-compose upAnda akan melihat output berikut:
Creating network "project_default" with the default driver
Building project
Step 1/7 : FROM node:12
---> dfbb88cfffc8
Step 2/7 : WORKDIR /project
---> Running in 86fff3a3c90b
Removing intermediate container 86fff3a3c90b
---> 5912fd119492
Step 3/7 : COPY package.json .
---> 4fa4df04cc6b
Step 4/7 : RUN npm install
---> Running in 8b814e4d75d2
...
(Node package installation happens here)
...
Removing intermediate container 8b814e4d75d2
---> 3bfd2b1a83e4
Step 5/7 : COPY . .
---> f6971fdf7fb5
Step 6/7 : EXPOSE 9000
---> Running in 2ab0a152b0a6
Removing intermediate container 2ab0a152b0a6
---> 0e883b79c1b3
Step 7/7 : CMD ["npm", "run", "start:dev"]
---> Running in f64884ae2643
Removing intermediate container f64884ae2643
---> 1abb8edf6373
Successfully built 1abb8edf6373
Successfully tagged project_project:latest
WARNING: Image for service project was built because it did not already exist. To rebuild this image you must use `docker-compose build` or `docker-compose up --build`.
Creating project ...
Creating project ... done
Attaching to project
project |
project | > [email protected] start:dev /project
project | > nodemon
project |
project | [nodemon] 2.0.4
project | [nodemon] to restart at any time, enter `rs`
project | [nodemon] watching path(s): src/**/*
project | [nodemon] watching extensions: ts,js
project | [nodemon] starting `ts-node ./src/index.ts`
Anda dapat menggunakan CTRL-C untuk menghentikan wadah.
Gunakan docker-compose up -d untuk membawa wadah dalam mode terpisah -dibesarkan di brackground dan Anda bebas untuk terus menggunakan baris perintah.
Kami membuat wadah berdasarkan Node V12. Direktori Kerja kami di dalam wadah didefinisikan sebagai /project (di mana kode proyek kami akan dipetakan ke)
Versi node yang diinstal akan tergantung pada OS yang diinstal dan bagaimana up Date Paketnya.
Jika Anda menggunakan simpul di luar wadah Docker dan mengerjakan beberapa proyek node masing -masing membutuhkan versi node yang berbeda, lalu instal NVM:
https://github.com/nvm-sh/nvm
Terima kasih banyak untuk berikut untuk membantu saya membuat tutorial ini.
