TypeScript với NodeJS

Tiếp tục với chủ đề về TypeScript, hôm nay tôi sẽ cùng các bạn tìm hiểu TypeScipt với NodeJs. Nếu bạn chưa biết về TypeScript thì hãy đọc bài này trước nhé TypeScript Hoặc nếu bạn muốn tìm hiểu TypeScript với Angular thì đọc bài này nhé TypeScript với Angular 2

Cài đặt môi trường

Ngay những phiên bản đầu tiên TypeScript đã ưu tiên hỗ trợ NodeJS, và bạn có thể cài đặt nó trong TypeScript đơn giản bằng 2 cách như sau:

• Biên dịch với --module để thiết lập thành commonjs
• Thêm node.d.ts (typings install dt~node --global) vào file biên dịch của bạn. Thông thường là tsconfig.json

Thật tuyệt phải không? Giờ chúng ta có thể sử dụng toàn bộ mọi thứ trong node modules (e.g. import fs = require('fs')) trong TypeScript

Sử dụng node modules trong TypeScript

Giả sử bạn muốn sử dụng gói CSX, hãy sử dụng lệnh npm install csx để cài đặt.

Cách dùng: import csx = require('csx')

Chỉ đơn giản vậy thôi =))

Tạo ứng dụng demo

Tạo thư mục dự án:

mkdir your-project
cd your-project

Tạo file tsconfig.json

{
  "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "sourceMap": true,
      "jsx": "react"
  },
  "exclude": [
      "node_modules",
      "typings/browser",
      "typings/browser.d.ts"
  ],
  "compileOnSave": false
}

Tạo một npm project

npm init -y

Cài đặt TypeScript-nightly, webpack, ts-loader, typings

npm install typescript@next webpack ts-loader typings --save-dev

Khởi tạo typings

"./node_modules/.bin/typings" init

Tạo file webpack.config.js để gói ghém các module của bạn thành 1 file duy nhất bundle.js bao gồm tất cả các tài nguyên trong dự án của bạn

module.exports = {
  entry: './src/app.tsx',
  output: {
      filename: './dist/bundle.js'
  },
  resolve: {
      extensions: [', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },
  module: {
      loaders: [
          { test: /.tsx?$/, loader: 'ts-loader' }
      ]
  }
}

Thiết lập một npm script để build ứng dụng. Thêm script sau trong file package.json của bạn

"scripts": {
  "prepublish": "typings install",
  "watch": "webpack --watch"
},

Và giờ là bước cuối cùng chạy ứng dụng thôi.

npm run watch

Một ví dụ hoàn chỉnh TypeScript với NodeJS các bạn có thể tham khảo tại đây

Tham khảo

• https://www.typescriptlang.org
• https://nodejs.org
• https://basarat.gitbooks.io/typescript/content/docs/quick/nodejs.html