Обновление: 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 и другие.