One place for hosting & domains

      Cara Menggunakan EJS untuk Membuat Templat Aplikasi Node


      Pengantar

      Saat membuat aplikasi Node secara cepat, kadang-kadang diperlukan cara mudah dan cepat untuk membuat templat aplikasi kita.

      Jade hadir sebagai mesin tampilan untuk Express secara asali, tetapi sintaks Jade dapat menjadi terlalu rumit untuk banyak kasus penggunaan. EJS adalah satu alternatif yang melakukan pekerjaan itu dengan baik dan sangat mudah disiapkan. Mari kita lihat cara membuat aplikasi sederhana dan menggunakan EJS untuk memasukkan bagian situs kita yang dapat diulang (potongan) dan menyalurkan data ke tampilan.

      Menyiapkan Aplikasi Demo

      Kita akan membuat dua halaman untuk aplikasi, satu halaman dengan lebar penuh dan yang satu lagi dengan bilah samping.

      Dapatkan kode: Anda dapat menemukan git repo kode demo lengkap di GitHub, di sini

      Struktur Berkas

      Inilah berkas yang akan kita perlukan untuk aplikasi kita. Kita akan membuat templat dari dalam folder tampilan dan selebihnya adalah praktik Node yang cukup standar.

      - views
      ----- partials
      ---------- footer.ejs
      ---------- head.ejs
      ---------- header.ejs
      ----- pages
      ---------- index.ejs
      ---------- about.ejs
      - package.json
      - server.js
      

      package.json akan menyimpan informasi aplikasi Node dan dependensi yang kita perlukan (express dan EJS). server.js akan menyimpan konfigurasi dan penyiapan server Express. Kita akan mendefinisikan rute ke halaman kita di sini.

      Penyiapan Node

      Mari kita masuk ke berkas package.json dan menyiapkan proyek kita di sana.

      package.json

      {
        "name": "node-ejs",
        "main": "server.js",
        "dependencies": {
          "ejs": "^3.1.5",
          "express": "^4.17.1"
        }
      }
      

      Kita cuma perlu Express dan EJS. Sekarang kita harus menginstal dependensi yang baru saja kita definisikan. Lanjutkan dan jalankan:

      Dengan semua dependensi yang telah diinstal, mari kita konfigurasi aplikasi untuk menggunakan EJS dan menyiapkan rute untuk dua halaman yang kita perlukan: halaman indeks (lebar penuh) dan halaman about (bilah samping). Kita akan melakukannya semua dalam berkas server.js.

      server.js

      // load the things we need
      var express = require('express');
      var app = express();
      
      // set the view engine to ejs
      app.set('view engine', 'ejs');
      
      // use res.render to load up an ejs view file
      
      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          res.render('pages/index');
      });
      
      // about page
      app.get('/about', function(req, res) {
          res.render('pages/about');
      });
      
      app.listen(8080);
      console.log('8080 is the magic port');
      

      Di sini kita mendefinisikan aplikasi dan mengaturnya untuk ditampilkan di porta 8080. Kita juga harus menjadikan EJS sebagai mesin tampilan untuk aplikasi Express menggunakan app.set('view engine','ejs;. Perhatikan cara kita mengirim tampilan kepada pengguna dengan res.render(). Perlu diperhatikan bahwa res.render() akan mencari tampilan di folder tampilan. Jadi kita hanya perlu mendefinisikan pages/index karena jalur lengkapnya adalah views/pages/index.

      Memulai Server kita

      Lanjutkan dan mulai server menggunakan:

      Sekarang kita dapat melihat aplikasi dalam browser di http://localhost:8080 dan http://localhost:8080/about. Aplikasi kita sudah siap dan kita harus mendefinisikan berkas tampilan dan melihat cara kerja EJS di sana.

      Buat Potongan EJS

      Seperti banyak aplikasi yang kita buat, akan ada banyak kode yang digunakan kembali. Kita akan memanggil potongan itu dan mendefinisikan tiga berkas yang akan kita gunakan di seluruh bagian situs kita: head.ejs, header.ejs, dan footer.ejs. Mari kita buat berkas-berkas itu sekarang.

      views/partials/head.ejs

      <meta charset="UTF-8">
      <title>EJS Is Fun</title>
      
      <!-- CSS (load bootstrap from a CDN) -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
      <style>
          body { padding-top:50px; }
      </style>
      

      views/partials/header.ejs

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="https://www.digitalocean.com/">EJS Is Fun</a>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="https://www.digitalocean.com/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="http://www.digitalocean.com/about">About</a>
          </li>
        </ul>
      </nav>
      

      views/partials/footer.ejs

      <p class="text-center text-muted">© Copyright 2020 The Awesome People</p>
      

      Menambahkan Potongan EJS ke Tampilan

      Sekarang potongan kita telah didefinisikan. Kita tinggal memasukkannya dalam tampilan. Mari kita masuk ke dalam index.ejs dan about.ejs serta menggunakan sintaks include untuk menambahkan potongan tersebut.

      Sintaks untuk Memasukkan Potongan EJS

      Gunakan <%- include('RELATIVE/PATH/TO/FILE') %> untuk menyematkan potongan EJS di berkas lain.

      • Tanda hubung <%- daripada cuma <% untuk memberi tahu EJS agar merender HTML mentah.
      • Jalur ke potongan itu relatif terhadap berkas saat ini.

      views/pages/index.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
          <div class="jumbotron">
              <h1>This is great</h1>
              <p>Welcome to templating using EJS</p>
          </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Sekarang kita dapat melihat tampilan yang didefinisikan dalam browser di http://localhost:8080. node-ejs-templating-index

      Untuk halaman about, kita juga menambahkan bilah samping bootstrap guna memeragakan cara menstrukturkan potongan untuk digunakan kembali di seluruh bagian templat dan halaman yang berbeda.

      views/pages/about.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
      <div class="row">
          <div class="col-sm-8">
              <div class="jumbotron">
                  <h1>This is great</h1>
                  <p>Welcome to templating using EJS</p>
              </div>
          </div>
      
          <div class="col-sm-4">
              <div class="well">
                  <h3>Look I'm A Sidebar!</h3>
              </div>
          </div>
      
      </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Jika kita mengunjungi http://localhost:8080/about, kita dapat melihat halaman about dengan bilah samping! node-ejs-templating-about

      Sekarang kita dapat mulai menggunakan EJS untuk menyalurkan data dari aplikasi Node ke tampilan kita.

      Menyalurkan Data ke Tampilan dan Potongan

      Mari kita definisikan beberapa variabel dasar dan daftar yang harus disalurkan ke halaman beranda kita. Kembalilah ke berkas server.js dan tambahkan yang berikut ini di dalam rute app.get("https://www.digitalocean.com/").

      server.js

      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          var mascots = [
              { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
              { name: 'Tux', organization: "Linux", birth_year: 1996},
              { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
          ];
          var tagline = "No programming concept is complete without a cute animal mascot.";
      
          res.render('pages/index', {
              mascots: mascots,
              tagline: tagline
          });
      });
      

      Kita telah membuat daftar bernama mascots dan string sederhana bernama tagline. Mari kita masuk ke berkas index.ejs dan menggunakannya.

      Merender Variabel Tunggal di EJS

      Untuk menggemakan variabel tunggal, kita cukup menggunakan <%= tagline %>. Mari kita tambahkan ini ke berkas index.ejs:

      views/pages/index.ejs

      ...
      <h2>Variable</h2>
      <p><%= tagline %></p>
      ...
      

      Mengulang-ulang Data di EJS

      Untuk mengulang-ulang data, kita akan menggunakan .forEach. Mari kita tambahkan ini ke berkas tampilan:

      views/pages/index.ejs

      ...
      <ul>
          <% mascots.forEach(function(mascot) { %>
              <li>
                  <strong><%= mascot.name %></strong>
                  representing <%= mascot.organization %>, born <%= mascot.birth_year %>
              </li>
          <% }); %>
      </ul>
      ...
      

      Sekarang kita dapat melihat informasi baru yang telah ditambahkan di browser!

      node-ejs-templating-rendered

      Menyalurkan Data ke Potongan di EJS

      Potongan EJS memiliki akses ke semua data yang sama seperti tampilan induk. Namun, berhati-hatilah: Jika Anda merujuk variabel di potongan, perlu didefinisikan di setiap tampilan yang menggunakan potongan atau akan dihasilkan kesalahan.

      Anda juga dapat mendefinisikan dan menyalurkan variabel ke potongan EJS dalam sintaks include seperti ini:

      views/pages/about.ejs

      ...
      <header>
          <%- include('../partials/header', {variant:'compact'}); %>
      </header>
      ...
      

      Namun, sekali lagi, Anda perlu berhati-hati ketika berasumsi variabel telah didefinisikan.

      Jika Anda ingin merujuk variabel di potongan yang mungkin tidak selalu didefinisikan, dan memberinya nilai asali, Anda dapat melakukannya seperti ini:

      views/partials/header.ejs

      ...
      <em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
      ...
      

      Dalam baris di atas, kode EJS merender nilai variant jika telah didefinisikan, dan default jika tidak.

      Kesimpulan

      EJS memungkinkan kita untuk menjalankan aplikasi secara cepat saat kita tidak membutuhkan sesuatu yang terlalu rumit. Dengan menggunakan potongan dan memiliki kemampuan menyalurkan variabel ke tampilan, kita dapat membuat aplikasi yang bagus dengan cepat.

      Untuk referensi lainnya tentang EJS, lihat dokumentasi resmi di sini.



      Source link

      Cara Menyiapkan Proyek Node dengan Typescript


      Pengantar

      Node adalah lingkungan run-time yang memungkinkan penulisan JavaScript di pihak server. Ini telah banyak digunakan sejak dirilis tahun 2011. Menulis JavaScript di pihak server dapat menjadi hal yang menantang seiring berkembangnya basis kode karena sifat bahasa JavaScript; dinamis dan bertipe lemah.

      Para pengembang yang memilih JavaScript dari bahasa lain sering mengeluhkan kekurangan tipe statis kuat, di sinilah TypeScript hadir menjembatani kesenjangan itu.

      TypeScript adalah super-set bertipe (opsional) dari JavaScript yang dapat membantu membangun dan mengelola proyek JavaScript berskala besar. Ini dapat dianggap sebagai JavaScript dengan fitur tambahan, seperti tipe statis kuat, kompilasi, dan pemrograman berorientasi objek.

      Catatan: TypeScript secara teknis adalah super-set JavaScript, yang berarti semua kode JavaScript adalah kode TypeScript yang valid.

      Berikut ini beberapa manfaat menggunakan TypeScript:

      1. Tipe statis opsional.
      2. Tipe interferensi.
      3. Kemampuan untuk menggunakan Antarmuka.

      Dalam tutorial ini, Anda akan menyiapkan proyek Node dengan TypeScript. Anda akan membangun aplikasi Express menggunakan TypeScript dan menerjemahkannya menjadi kode JavaScript yang rapi dan andal.

      Prasyarat

      Sebelum memulai panduan ini, Node.js sudah harus terinstal di mesin Anda. Anda dapat melakukannya dengan mengikuti panduan Cara Menginstal Node.js dan Membuat Lingkungan Pengembangan Lokal bagi sistem operasi Anda.

      Langkah 1 — Inisialisasi Proyek npm

      Untuk memulai, buat folder baru bernama node_project dan pindah ke direktori itu.

      • mkdir node_project
      • cd node_project

      Selanjutnya, inisialisasi sebagai proyek npm:

      Setelah menjalankan init npm, Anda perlu memberikan informasi tentang proyek Anda kepada npm. Jika Anda lebih suka membiarkan npm mengasumsikan asali yang wajar, Anda dapat menambahkan bendera y untuk melewatkan prompt informasi tambahan:

      Karena kini ruang proyek sudah disiapkan, Anda siap untuk melanjutkan ke instalasi dependensi yang diperlukan.

      Langkah 2 — Menginstal Dependensi

      Dengan proyek npm kosong yang telah diinisialisasi, langkah selanjutnya adalah menginstal dependensi yang diperlukan untuk menjalankan TypeScript.

      Jalankan perintah berikut dari direktori proyek Anda untuk menginstal dependensi:

      • npm install -D typescript@3.3.3
      • npm install -D tslint@5.12.1

      Bendera -D adalah pintasan untuk: --save-dev. Anda dapat mempelajari lebih lanjut tentang bendera ini dalam dokumentasi npmjs.

      Sekarang, saatnya menginstal kerangka kerja Express:

      • npm install -S express@4.16.4
      • npm install -D @types/express@4.16.1

      Perintah kedua menginstal beberapa tipe Express untuk dukungan TypeScript. Tipe dalam TypeScript adalah berkas, biasanya dengan ekstensi .d.ts. Berkas digunakan untuk memberikan informasi tentang API kepada tipe, dalam hal ini adalah kerangka kerja Express.

      Paket ini diperlukan karena TypeScript dan Express adalah paket independen. Tanpa paket @types/express, TypeScript tidak dapat mengetahui tipe kelas Express.

      Langkah 3 — Mengonfigurasi TypeScript

      Di bagian ini, Anda akan menyiapkan TypeScript dan mengonfigurasi proses lint untuk TypeScript. TypeScript menggunakan berkas bernama tsconfig.json untuk mengonfigurasi opsi pengompilasi proyek. Buat berkas tsconfig.json di root direktori proyek dan tempelkan dalam cuplikan kode berikut:

      tsconfig.json

      {
        "compilerOptions": {
          "module": "commonjs",
          "esModuleInterop": true,
          "target": "es6",
          "moduleResolution": "node",
          "sourceMap": true,
          "outDir": "dist"
        },
        "lib": ["es2015"]
      }
      

      Mari kita tinjau beberapa hal pokok dalam cuplikan JSON di atas:

      • module: Menentukan metode pembuatan kode modul. Node menggunakan commonjs.
      • target: Menentukan tingkat bahasa keluaran.
      • moduleResolution: Ini membantu pengompilasi mengetahui apa yang dirujuk oleh impor. Nilai node menirukan mekanisme resolusi modul Node.
      • outDir: Ini adalah lokasi untuk keluaran berkas .js setelah penerjemahan. Dalam tutorial ini, Anda akan menyimpannya sebagai dist.

      Alternatif untuk membuat dan mengisi berkas tsconfig.json adalah dengan menjalankan perintah berikut:

      Perintah ini akan menghasilkan berkas tsconfig.json yang telah diberi komentar dengan baik.

      Untuk mempelajari lebih lanjut berbagai opsi nilai kunci yang tersedia, dokumentasi TypeScript resmi memberikan penjelasan tentang setiap opsi.

      Sekarang Anda dapat mengonfigurasi proses lint TypeScript untuk proyek. Dalam terminal yang sedang berjalan di root direktori proyek Anda, tempat tutorial ini dibuat sebagai node_project, jalankan perintah berikut untuk menghasilkan berkas tslint.json:

      • ./node_modules/.bin/tslint --init

      Buka berkas tslint.json yang baru dihasilkan dan tambahkan aturan no-console yang sesuai:

      tslint.json

      {
        "defaultSeverity": "error",
        "extends": ["tslint:recommended"],
        "jsRules": {},
        "rules": {
          "no-console": false
        },
        "rulesDirectory": []
      }
      

      Secara asali, linter di TypeScript mencegah penggunaan awakutu dengan pernyataan console, sehingga perlu secara eksplisit memberi tahu linter untuk mencabut aturan no-console asali.

      Langkah 4 — Memperbarui Berkas package.json

      Pada titik ini dalam tutorial, Anda dapat menjalankan fungsi dalam terminal satu per satu, atau membuat npm script untuk menjalankannya.

      Dalam langkah ini, Anda akan membuat skrip start yang akan mengompilasi dan menerjemahkan kode TypeScript, kemudian menjalankan app.js yang dihasilkan.

      Buka berkas package.json dan perbarui sebagaimana mestinya:

      package.json

      {
        "name": "node-with-ts",
        "version": "1.0.0",
        "description": "",
        "main": "dist/app.js",
        "scripts": {
          "start": "tsc && node dist/app.js",
          "test": "echo "Error: no test specified" && exit 1"
        },
        "author": "",
        "license": "ISC",
        "devDependencies": {
          "@types/express": "^4.16.1",
          "tslint": "^5.12.1",
          "typescript": "^3.3.3"
        },
        "dependencies": {
          "express": "^4.16.4"
        }
      }
      

      Dalam cuplikan di atas, Anda memperbarui jalur main dan menambahkan perintah start ke bagian skrip. Bila memperhatikan perintah start, Anda akan melihat bahwa perintah tsc pertama adalah berjalan, kemudian perintah node. Ini akan mengompilasi kemudian menjalankan keluaran yang dihasilkan dengan node.

      Perintah tsc memberi tahu TypeScript untuk mengompilasi aplikasi dan menempatkan keluaran .js yang dihasilkan dalam direktori outDir yang ditentukan karena telah diatur dalam berkas tsconfig.json.

      Langkah 5 — Membuat dan Menjalankan Server Express Dasar

      Karena TypeScript dan linter telah dikonfigurasi, saatnya membangun Server Express Node.

      Pertama-tama, buat folder src di root direktori proyek Anda:

      Kemudian, buat berkas bernama app.ts di dalamnya:

      Sehingga struktur folder akan terlihat seperti ini:

      ├── node_modules/
      ├── src/
        ├── app.ts
      ├── package-lock.json
      ├── package.json
      ├── tsconfig.json
      ├── tslint.json
      

      Buka berkas app.ts dengan editor teks pilihan Anda dan tempelkan dalam cuplikan kode berikut:

      src/app.ts

      import express from 'express';
      
      const app = express();
      const port = 3000;
      app.get('/', (req, res) => {
        res.send('The sedulous hyena ate the antelope!');
      });
      app.listen(port, err => {
        if (err) {
          return console.error(err);
        }
        return console.log(`server is listening on ${port}`);
      });
      

      Kode di atas membuat Server Node yang mendengarkan permintaan di porta 3000. Jalankan aplikasi menggunakan perintah berikut:

      Jika berhasil dijalankan, pesan akan dicatat ke terminal:

      Output

      • server is listening on 3000

      Sekarang, Anda dapat mengunjungi http://localhost:3000 di peramban Anda dan seharusnya melihat pesan:

      Output

      • The sedulous hyena ate the antelope!

      Jendela peramban berisi pesan: The sedulous hyena ate the antelope!

      Buka berkas dist/app.js dan Anda akan menemukan versi kode TypeScript yang telah diterjemahkan:

      dist/app.js

      "use strict";
      
      var __importDefault = (this && this.__importDefault) || function (mod) {
          return (mod && mod.__esModule) ? mod : { "default": mod };
      };
      Object.defineProperty(exports, "__esModule", { value: true });
      const express_1 = __importDefault(require("express"));
      const app = express_1.default();
      const port = 3000;
      app.get('/', (req, res) => {
          res.send('The sedulous hyena ate the antelope!');
      });
      app.listen(port, err => {
          if (err) {
              return console.error(err);
          }
          return console.log(`server is listening on ${port}`);
      });
      
      //# sourceMappingURL=app.js.map
      

      Saat ini, Anda berhasil menyiapkan proyek Node menggunakan TypeScript.

      Kesimpulan

      Dalam tutorial ini, Anda telah mempelajari alasan TypeScript berguna untuk penulisan kode JavaScript yang andal. Anda juga telah mempelajari beberapa manfaat menggunakan TypeScript.

      Terakhir, Anda telah menyiapkan proyek Node dengan kerangka kerja Express, kemudian mengompilasi dan menjalankan proyek dengan TypeScript.



      Source link

      Cómo configurar un proyecto Node con Typescript


      Introducción

      Node es un entorno de tiempo de ejecución que hace que sea posible escribir JavaScript en el lado del servidor. Ha logrado una amplia adopción desde su lanzamiento en 2011. Escribir JavaSccript en el servidor puede ser difícil a medida que la base de código crece debido a la naturaleza del lenguaje JavaScript: dinámico y con escritura débil.

      Los desarrolladores que llegan a JavaScript desde otros lenguajes a menudo se quejan sobre su falta de escritura estática fuerte, pero aquí es donde entra TypeScript, para cerrar esta brecha.

      TypeScript es un superconjunto escrito (opcional) de JavaScript que puede ayudar a la hora de crear y gestionar proyectos JavaScript a gran escala. Puede verse como JavaScript con funciones adicionales como escritura estática fuerte, compilación y programación orientada a objetos.

      Nota: TypeScript es técnicamente un superconjunto de JavaScript, lo que significa que todo el código JavaScript es código TypeScript válido.

      Aquí tiene algunos beneficios del uso de TypeScript:

      1. Escritura estática opcional.
      2. Inferencia de escritura.
      3. Capacidad para usar interfaces.

      En este tutorial, configurará un proyecto Node con TypeScript. Creará una aplicación Express usando TypeScript y la convertirá en un código JavaScript limpio y fiable.

      Requisitos previos

      Antes de comenzar con esta guía, necesitará Node.js instalado en su equipo. Puede hacerlo siguiendo la guía Cómo instalar Node.js y crear un entorno de desarrollo local para su sistema operativo.

      Paso 1: Iniciar un proyecto npm

      Para comenzar, cree una nueva carpeta llamada node_project y entre en ese directorio.

      • mkdir node_project
      • cd node_project

      A continuación, inícielo como proyecto npm:

      Tras ejecutar npm init, necesitará suministrar a npm información sobre su proyecto. Si prefiere que npm asuma los valores predeterminados más sensatos, puede añadir el indicador y para omitir las solicitudes de información adicional:

      Ahora que el espacio de su proyecto está configurado, está listo para instalar las dependencias necesarias.

      Paso 2: Instalar las dependencias

      Con un proyecto npm vacío iniciado, el siguiente paso es instalar las dependencias que se necesitan para ejecutar TypeScript.

      Ejecute los siguientes comandos desde el directorio de su proyecto para instalar las dependencias:

      • npm install -D typescript@3.3.3
      • npm install -D tslint@5.12.1

      El indicador -D es el atajo para: --save-dev. Puede obtener más información sobre este indicador en la documentación de npmjs.

      Ahora es el momento de instalar el marco Express:

      • npm install -S express@4.16.4
      • npm install -D @types/express@4.16.1

      El segundo comando instala los tipos de Express para la compatibilidad con TypeScript. Los Tipos de TypeScript son archivos, normalmente con una extensión .d.ts. Los archivos se usan para proporcionar información de tipo sobre una API, en este caso el marco Express.

      Este paquete es necesario porque TypeScript y Express son paquetes independientes. Sin el paquete @typ/express, no hay forma de que TypeScript sepa sobre los tipos de clases Express.

      Paso 3: Configurar TypeScript

      En esta sección, configurará TypeScript y configurará un linting para TypeScript. TypeScript utiliza un archivo llamado tsconfig.json para configurar las opciones del compilador para un proyecto. Cree un archivo tsconfig.json en la raíz del directorio del proyecto y péguelo en el siguiente fragmento de código:

      tsconfig.json

      {
        "compilerOptions": {
          "module": "commonjs",
          "esModuleInterop": true,
          "target": "es6",
          "moduleResolution": "node",
          "sourceMap": true,
          "outDir": "dist"
        },
        "lib": ["es2015"]
      }
      

      Vamos a repasar algunas de las claves del fragmento de código JSON anterior:

      • module: Especifica el método de generación de código del módulo. Node utiliza commonjs.
      • target: Especifica el nivel de lenguaje de salida.
      • moduleResolution: Esto ayuda al compilador a averiguar a qué se refiere una importación. El valor node imita al mecanismo de resolución del módulo de Node.
      • outDir: Esta es la ubicación para los archivos .js tras la transpilación. En este tutorial, lo guardará como dist.

      Una alternativa a crear y popular manualmente el archivo tsconfig.json es ejecutando el siguiente comando:

      Este comando generará un archivo tsconfig.json bien redactado.

      Para obtener más información sobre las opciones de valor clave disponibles, la documentación de TypeScript oficial ofrece explicaciones sobre cada opción.

      Ahora puede configurar el linting de TypeScript para el proyecto. En un terminal que se ejecute en la raíz del directorio de su proyecto, que en este tutorial se estableció como node_project, ejecute el siguiente comando para generar un archivo tslint.json.

      • ./node_modules/.bin/tslint --init

      Abra el archivo tslint.json recién generado y añada la regla no-console como corresponda:

      tslint.json

      {
        "defaultSeverity": "error",
        "extends": ["tslint:recommended"],
        "jsRules": {},
        "rules": {
          "no-console": false
        },
        "rulesDirectory": []
      }
      

      Por defecto, el linter de TypeScript evita el uso de depuración usando declaraciones console, por tanto es necesario indicar explícitamente al linter que revoque la regla no-console predeterminada.

      Paso 4: Actualizar el archivo package.json

      En este momento del tutorial, puede ejecutar funciones en el terminal individualmente o crear un npm script para ejecutarlos.

      En este paso, creará una secuencia de comandos start que compilará y transpilará el código de TypeScript, y luego ejecutará la aplicación .js resultante.

      Abra el archivo package.json y actualícelo:

      package.json

      {
        "name": "node-with-ts",
        "version": "1.0.0",
        "description": "",
        "main": "dist/app.js",
        "scripts": {
          "start": "tsc && node dist/app.js",
          "test": "echo "Error: no test specified" && exit 1"
        },
        "author": "",
        "license": "ISC",
        "devDependencies": {
          "@types/express": "^4.16.1",
          "tslint": "^5.12.1",
          "typescript": "^3.3.3"
        },
        "dependencies": {
          "express": "^4.16.4"
        }
      }
      

      En el fragmento de código anterior, actualizó la ruta main y añadió el comando start a la sección scripts. Cuando se observa el comando start, verá que primero se ejecuta el comando tsc y luego el comando node. Esto compilará y ejecutará el resultado generado con node.

      El comando tsc indica a TypeScript que compile la aplicación y coloque el resultado .jso generado en el directorio outDir especificado como se establece en el archivo tsconfig.json.

      Paso 5: Crear y ejecutar un servidor Express básico

      Ahora que TypeScript y su linter están configurados, es el momento de crear un servidor Node Express.

      Primero cree una carpeta src en la raíz del directorio de su proyecto:

      A continuación cree un archivo llamado app.ts dentro:

      En este momento, la estructura de la carpeta debería tener este aspecto:

      ├── node_modules/
      ├── src/
        ├── app.ts
      ├── package-lock.json
      ├── package.json
      ├── tsconfig.json
      ├── tslint.json
      

      Abra el archivo app.ts con el editor de texto que prefiera y pegue el siguiente fragmento de código:

      src/app.ts

      import express from 'express';
      
      const app = express();
      const port = 3000;
      app.get('/', (req, res) => {
        res.send('The sedulous hyena ate the antelope!');
      });
      app.listen(port, err => {
        if (err) {
          return console.error(err);
        }
        return console.log(`server is listening on ${port}`);
      });
      

      El código anterior crea Node Server que escucha las solicitudes sobre el puerto 3000. Ejecute la aplicación usando el siguiente comando:

      Si se ejecuta correctamente se registrará un mensaje en el terminal:

      Output

      • server is listening on 3000

      Ahora, puede visitar http://localhost:3000 en su navegador y debería ver el mensaje:

      Output

      • The sedulous hyena ate the antelope!

      Ventana del navegador con el mensaje: The sedulous hyena ate the antelope!

      Abra el archivo dist/app.js y encontrará la versión transpilada del código TypeScript:

      dist/app.js

      "use strict";
      
      var __importDefault = (this && this.__importDefault) || function (mod) {
          return (mod && mod.__esModule) ? mod : { "default": mod };
      };
      Object.defineProperty(exports, "__esModule", { value: true });
      const express_1 = __importDefault(require("express"));
      const app = express_1.default();
      const port = 3000;
      app.get('/', (req, res) => {
          res.send('The sedulous hyena ate the antelope!');
      });
      app.listen(port, err => {
          if (err) {
              return console.error(err);
          }
          return console.log(`server is listening on ${port}`);
      });
      
      //# sourceMappingURL=app.js.map
      

      En este momento ha configurado correctamente su proyecto Node para usar TypeScript.

      Conclusión

      En este tutorial, aprendió por qué TypeScript es útil para escribir un código JavaScript fiable. También aprendió algunos de los beneficios de trabajar con TypeScript.

      Finalmente, ha configurado un proyecto Node usando el marco Express, pero compiló y ejecutó el proyecto usando TypeScript.



      Source link