Typescript

SALVO-TS themes use Typescript, a strongly typed language that builds on Javascript.

If you have not used Typescript before, it is highly recommended that you follow one of the Get started guides, and you should consider working your way through the rest of the Typescript Handbook as you get more familiar with the language.

Editor integration

You should consider installing a suitable set of extensions for Typescript based on your editor. Here are some features that you probably want to make your TS development experience much smoother:

• Inline errors
• Type documentation tooltips
• Suggestions & Fix Problem
• ESlint support
• Jump to Definition & Find Usages
• Rename symbol

Suggestions:

• VSCode: VSCode has built-in TS support, however you should also consider the ESLint (by Dirk Baeumer) extension.
• Atom: use the atom-typescript plugin.
• Sublime Text: use the TypeScript package.

If you use another editor, look for an extension that supports Typescript via the LSP (language server protocol) - this is a standard interface via which TS and other languages provide IDE-like functionality to editors, and it means you'll get support for the latest TS features immediately rather than waiting for a plugin author to support them.

Shopify types

SALVO-TS includes up-to-date types for common Shopify Liquid and AJAX API objects, so you don't need to define these every time you're dealing with Shopify data.

Work in progress

The Shopify Types are a work in progress - if you encounter Shopify Liquid or AJAX API objects which are missing fields or have correct types, please report them so we can improve the typings.

Liquid types

Liquid types are namespaced under Shopify.Liquid, i.e. Shopify.Liquid.Product or Shopify.Liquid.LinkedListItem.

Only items which are "JSON-able" (via the |json filter) are supported. For the full list of available types just start typing Shopify.Liquid. and refer to your editor's intellisense/autocomplete, or view the full typings file here.

By using these types, you'll get accurate intellisense/autocomplete for objects coming from Liquid:

ts
const product: Shopify.Liquid.Product = getProduct();
 
const price = product.price_
                            
price_max
price_min
price_varies
 

ts
const product: Shopify.Liquid.Product = getProduct();
 
const price = product.price_
                            
price_max
price_min
price_varies
 

Descriptions and links from the Shopify Liquid docs are also available - depending on your editor setup, you may need to hover over a property to expand them:

ts
const product: Shopify.Liquid.Product = getProduct();
                                
interface Shopify.Liquid.Product
 
const price = product.price_max;
                         
(property) Shopify.Liquid.Product.price_max: number
 

ts
const product: Shopify.Liquid.Product = getProduct();
                                
interface Shopify.Liquid.Product
 
const price = product.price_max;
                         
(property) Shopify.Liquid.Product.price_max: number
 

caution

Liquid types are generated automatically from the Liquid docs and may have issues. If you notice issues, please report them.

AJAX API types

tip

Where possible use the cart service instead of directly calling the Shopify Cart AJAX API.

Not implemented

Types for AJAX API objects other than the cart have not yet been implemented.

If you want to use the other AJAX APIs directly define your own interfaces for the request/response objects like the example below.

src/theme/product.ts
ts
interface AjaxProductResponse {
    product: {
        handle: string;
        title: string;
    };
}
 
const getProductTitle = async (handle: string): Promise<string|null> => {
    try {
        const response = await fetch(`/products/${handle}.json`);
        const data = await response.json();
        const { product } = JSON.parse(data) as AjaxProductResponse;
        return product.title;
                        
(property) title: string
    } catch (e) {
        return null;
    }
};

src/theme/product.ts
ts
interface AjaxProductResponse {
    product: {
        handle: string;
        title: string;
    };
}
 
const getProductTitle = async (handle: string): Promise<string|null> => {
    try {
        const response = await fetch(`/products/${handle}.json`);
        const data = await response.json();
        const { product } = JSON.parse(data) as AjaxProductResponse;
        return product.title;
                        
(property) title: string
    } catch (e) {
        return null;
    }
};