3 способа реализовать TypeScript в вашем проекте

TypeScript великолепен - вы получаете статическую проверку типов, функции ECMAScript, которые еще не поддерживаются браузерами, и отличные функции IntelliSense.

Так как же нам реализовать этот замечательный язык в одном из наших проектов? Что ж, есть несколько способов! Однако сначала нам нужно настроить наш файл конфигурации!

1. Компилятор TypeScript

Самый простой способ скомпилировать код TypeScript - использовать компилятор по умолчанию. Все, что вам нужно сделать, чтобы это заработало, - запустить:

npm install --save typescript

Тогда в вашем package.json

{
  ...
  "scripts": {
    ...
    "build-ts": "tsc",
  }
  ...
}

На этом этапе все, что вам нужно сделать, это запустить:

npm run build-ts

Скомпилированный код должен появиться в вашем dist каталоге.

2. Глоток

Альтернативой компилятору по умолчанию является использование gulp! Чтобы заставить gulp скомпилировать ваш код TypeScript, начните с установки модулей gulp и gulp-typescript.

npm install --save-dev gulp gulp-typescript

Вам также потребуется обновить свой package.json:

{
  ...
  "scripts": {
    ...
    "gulp": "gulp",
  }
  ...
}

Затем вы можете настроить задачу gulp для сборки кода TypeScript.

const gulp = require('gulp');
const ts = require('gulp-typescript');
gulp.task('default', () => {
  return gulp.src('src/**/*.ts')
    .pipe(ts({
      noImplicitAny: true,
    }))
    .pipe(gulp.dest('dist'));
});

Чтобы создать код TypeScript, запустите npm run gulp, и все готово!

Чтобы использовать ваш tsconfig.json файл, настройте свой gulpfile.js как таковой:

const gulp = require('gulp');
const ts = require('gulp-typescript');
const tsProject = ts.createProject('tsconfig.json');
gulp.task('default', () => {
  return tsProject.src()
    .pipe(tsProject())
    .pipe(gulp.dest('dist'));
});

3. Webpack

Установите webpack и ts-loader. Обратите внимание, что для работы этого метода у вас также должен быть установлен пакет typescript.

npm install --save-dev webpack webpack-cli ts-loader

В вашем webpack.config.js файле:

module.exports = {
  mode: "development",
  devtool: "inline-source-map",
  entry: "./src/Rectangle.ts",
  output: {
    filename: "bundle.js"
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: "ts-loader" }
    ]
  }
};

Наконец, в package.json:

{
  ...
  "scripts": {
    ...
    "webpack": "webpack",
  }
  ...
}

Затем вы можете скомпилировать свой код, запустив npm run webpack.

Вы заметите, что вместо компиляции всех ваших файлов TypeScript по отдельности в файлы JavaScript, такие как компилятор по умолчанию или gulp, Webpack создает один bundle.js файл. В зависимости от того, что вы пытаетесь сделать, это может оказаться невероятно полезным для создания исполняемого кода браузера.

Вот и все, ребята!

Для реализации любого из этих методов требуется всего несколько секунд, и вы сразу же сможете использовать TypeScript! Удачного кодирования!

Эта статья была изначально опубликована Mae Bechdol в нашем блоге в Исовере.