shopware-typedef
Shopware TypeScript typings
This package contains TypeScript type definitions for the Shopware 5 Frontend.
That includes correct types for the StateManager and other globals, jQuery.X
and jQuery.fn.X
extended by Shopware.
The type definitions can be used from TypeScript but also from JavaScript.
Installation
npm install --save-dev @types/jquery@2.x shopware-typedef
Usage
In TypeScript code it should probably look something like this:
/// $.plugin'scnFoo', ScnFoo.prototype; declare global
If you use plain JavaScript you can still use the typings in an IDE that supports it (Atom, VS Code, PHPStorm, etc.)
/// <reference types="shopware-typedef"/> StateManager;
You can use annotations in your JavaScript to tell your IDE what type your variables are, for example:
/** @type */var sman; sman... // intellisense support enabled $;
Support may vary.
More Info is available in the TypeScript Wiki.
Options
You can pass the type of your plugin options as a generic to $.PluginBase<T>
$.plugin'scnFoo', ScnFoo.prototype; declare global
And that's about all to do for adding a plugin. Have a look into the example.ts for more help.
If you want to, you can also add a new declaration for the StateManager.addPlugin
call, although it may not always work correctly.
declare global StateManager.addPlugin'.js--foo', 'scnFoo', ;
Notes
The declare global-block is necessary for all Plugins in order to get typescript to understand, that we've extended window.$
and window.PluginsCollection
Be aware that you can't yet pass $.plugin()
a constructor as a second argument. There's already an issue at shopware for that: #1489
If that gets merged, you can add plugins like this
$.plugin'scnFoo', ScnFoo; declare global ;
This does not yet work in Shopware 5.3.7.
The type SwPluginPrototypeConstructor
is a constructor-interface for all classes extending $.PluginBase
accepting a type T
which indicates what you want to return. And a type U
indicating the type of the options if any.
The constructor itself has the signature new(name: string, element: JQuery, options?: U): T
.
Contributions
Always welcome 💙