Обновление: 10 января 2017 г .: Если вы используете Typescript 2.1 или выше, вы можете заменить любое упоминание typescript@next на typescript - необходимая опция (`jsxFactory ') теперь находится в стабильной версии :)

В этом руководстве мы собираемся установить минимум, необходимый для использования Preact с Typescript. Никаких горячих модулей или сложных конфигураций Webpack (мы будем использовать Webpack, но в его простейшей форме), только фактические части, которые вам нужны, чтобы научиться использовать оба этих удивительных инструмента в ваших проектах сегодня.

Теперь Typescript уже очень хорошо работает с React (›альтернатива Preact 40 КБ) - статическая типизация как для свойств, так и для объектов состояния делает создание JSX абсолютным удовольствием. Когда компилятор или ваш редактор предупреждают вас об опечатках или несовпадении типов во время работы, вы просто привыкните и не захотите отказываться от переключения между библиотеками.

Это проблема, с которой я столкнулся недавно - мне нужен рендерер представления размером 3 КБ (Preact), но мне также нужны мои статические типы и отличный опыт разработчика.

Хорошая новость заключается в том, что это можно сделать, просто требуется новейшая версия Typescript и правильная конфигурация. Вот, позвольте мне провести вас через это.

Шаг 1 - Установите зависимости

yarn add typescript@next preact webpack ts-loader
# or, for npm users
npm i typescript@next preact webpack ts-loader

Примечание. Нам нужно использовать typescript @ next, поскольку это позволяет нам использовать предстоящую опцию компилятора jsxFactory, которую мы вскоре увидим.

Шаг 2 - Создайте tsconfig.json file

Это настроит компилятор Typescript с параметрами, необходимыми для Preact.

{
  "compilerOptions": {
    "sourceMap": true,
    "module": "commonjs",
    "jsx": "react",
    "jsxFactory": "h",
    "target": "es5"
  },
  "include": [
    "src/*.ts",
    "src/*.tsx"
  ]
}

Примечания:

  • Мы установили "jsx": "react", чтобы инструктировать Typescript преобразовывать JSX, как <Hello />, в обычный JS ... Но одно только это привело бы к чему-то вроде React.createElement(...) вызовов, которые нам не подходят, поскольку Preact использует вместо этого h.
  • Вот почему мы установили "jsxFactory": "h" так, чтобы, когда Typescript встречает некоторый JSX, такой как <HelloWorld />, он вместо этого компилирует его в h(HelloWorld), который затем может использовать Preact.

Шаг 3 - Создайте файл webpack.config.js

Это минимальный код, необходимый для работы этой установки. Вы можете сойти с ума и сделать что-нибудь потрясающее с Webpack, но я бы посоветовал вам начать здесь и создавать по частям по мере необходимости - вы узнаете больше таким образом, а не копируете / вставляете конфигурацию из 200 строк, которую кто-то другой настраивать.

module.exports = {
    devtool: 'source-map',
    entry: ['./src/app'],
    output: {
        path: 'dist',
        filename: 'app.js'
    },
    resolve: {
        extensions: ['', '.ts', '.tsx']
    },
    module: {
        loaders: [
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                loaders: ['ts-loader']
            }
        ]
    }
};

Примечания:

  • Мы устанавливаем массив extensions в свойстве resolve, чтобы мы могли «импортировать» или «требовать» оба файла .ts и .tsx.
  • Единственный элемент в массиве loaders даст указание Webpack обработать любые .ts или .tsx файлы с помощью плагина ts-loader, который мы установили ранее. В ts-loader замечательно то, что по умолчанию он будет использовать вашу локально установленную версию Typescript, поэтому нам не нужно ничего дополнительно настраивать. :)

Шаг 4. Создайте файл входа src/app.tsx

import { h, render } from 'preact';
import HelloWorld from './HelloWorld';

render(<HelloWorld name="World" />, document.querySelector('#app'));

Примечания:

  • в строке 1 мы импортируем функцию рендеринга из preact, но также и функцию h. Нам не нужно вручную вызывать эту функцию, но помните, что Typescript преобразует любой JSX в h() вызовы, поэтому нам нужно, чтобы он был доступен в любом файле, содержащем JSX, иначе мы увидим ошибку при попытке компиляции.
  • в строке 3 мы монтируем компонент HelloWorld в DOM и передаем единственное свойство с именем name. Мы делаем это как простой пример того, где может помочь Typescript - путем проверки ваших свойств!

Шаг 4. Создайте компонент HelloWorld src/HelloWorld.tsx

import {h, Component} from 'preact';

export interface HelloWorldProps {
    name: string
}

export default class HelloWorld extends Component<HelloWorldProps, any> {
    render (props) {
        return <p>Hello {props.name}!</p>
    }
}

Примечания:

  • Я объявил интерфейс HelloWorldProps с одним свойством name, чтобы показать, как можно использовать универсальные шаблоны при создании компонентов в Preact - просто подумайте об этом как о лучших типах propTypes. Однако это не учебник по Typescript, поэтому мы оставим здесь детали TS - просто знайте, что, предоставляя Component<HelloWorldProps..., мы связываем интерфейс HelloWorldProps с этим HelloWorld классом, и это то, что позволяет Typescript обеспечивать проверку типов как внутри этого компонента, так и в любой момент, когда этот компонент используется где-либо еще.
  • Обратите внимание, что в функции render здесь мы получаем доступ к props компонента (а также к состоянию) - это область, в которой Preact улучшает React :). Опять же, это тоже не руководство по использованию Preact, поэтому мы будем краткими.

Резюме

Если вы следите за инструкциями, ваш каталог теперь должен выглядеть следующим образом (хотя, если вы использовали NPM для установки своих зависимостей, у вас не будет файла yarn.lock)

Шаг 5. Запустите Webpack, чтобы создать пакет

Поскольку мы установили Webpack локально, мы можем запустить его следующим образом.

./node_modules/.bin/webpack

Webpack будет использовать файл конфигурации, который мы создали ранее, для загрузки «точки входа» для приложения. Затем он создаст пакет, включающий каждый файл, на который мы ссылались. Итак, в нашем случае запись была ./src/app - так что она будет включена вместе с библиотекой Preact и нашим компонентом HelloWorld.

Если все сработало правильно, вы должны увидеть что-то вроде следующих строк:

Примечания:

  • Размеры файлов на этом снимке экрана не минифицированы и не сжаты, так как я не хотел включать в это руководство какие-либо дополнительные настройки, но вы можете быть уверены, что в производственной среде Preact действительно чуть больше 3.5кб :)

Шаг 6. Используйте пакет на веб-странице index.html

Пора загрузить его в выбранном вами браузере и полюбоваться удивительным компонентом HelloWorld!

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="dist/app.js"></script>
</body>
</html>

Заключение

Иногда вам нужно немного поработать, чтобы ваши любимые инструменты хорошо играли вместе, но, на мой взгляд, это почти всегда того стоит - особенно если это повышает вашу продуктивность! В этом одержимом производительностью интерфейсном мире, в котором мы живем, я просто не могу игнорировать такую ​​библиотеку, как Preact, которая имеет тактовую частоту всего 3,5 КБ, но в то же время я не хотел отказываться от опыта разработчика, к которому я привык с Typescript. . Этот пост показывает, что вы действительно можете съесть свой торт и съесть его.

Нравится? Возможно, вам понравятся некоторые из моих уроков на https://egghead.io/instructors/shane-osbourn Настоящее - многие из них бесплатны, и я охватываю Vanilla JS, Typescript, RxJS и другие.