Shopify Node API Context初始化报TypeScript编译错误如何修复

问题背景 #

参照官方指引开发Shopify应用，完成代码配置后执行yarn start启动项目时出现TypeScript编译错误，删除node_modules重装依赖后问题仍存在。

现有src/index.ts代码 #

// src/index.ts
import http from 'http';
import url from 'url';
import querystring from 'querystring';
import Shopify, { ApiVersion } from '@shopify/shopify-api';
require('dotenv').config();

const { API_KEY, API_SECRET_KEY, SCOPES, SHOP, HOST } = process.env

Shopify.Context.initialize({
  API_KEY,
  API_SECRET_KEY,
  SCOPES: [SCOPES],
  HOST_NAME: HOST.replace(/https?:\/\//, ""),
  HOST_SCHEME: HOST.split("://")[0],
  IS_EMBEDDED_APP: {boolean},
  API_VERSION: ApiVersion.{version} // 注释说明支持所有正式版本，也可使用"unstable"和"unversioned"
});

// 内存存储当前激活店铺，服务重启后需要店铺重新登录，生产环境请持久化存储该对象
const ACTIVE_SHOPIFY_SHOPS: { [key: string]: string | undefined } = {};

async function onRequest(
    request: http.IncomingMessage,
    response: http.ServerResponse,
  ): Promise<void> {
    const {headers, url: req_url} = request;
    const pathName: string | null = url.parse(req_url).pathname;
    const queryString: string = String(url.parse(req_url).query);
    const query: Record<string, any> = querystring.parse(queryString);
  
    switch (pathName) {
      default:
        // 未识别到当前店铺，走OAuth流程创建会话
        if (ACTIVE_SHOPIFY_SHOPS[SHOP] === undefined) {
          // 未登录，重定向到登录页
          response.writeHead(302, {Location: `/login`});
          response.end();
        } else {
          response.write('Hello world!');
          // 加载集成App Bridge的应用骨架页面，编写业务逻辑
        }
        return;
    }
  }
  
  http.createServer(onRequest).listen(3000);

现有package.json配置 #

{
  "name": "shopify-checkout-apit",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@shopify/shopify-api": "^3.1.0"
  },
  "devDependencies": {
    "@types/node": "^17.0.40",
    "dotenv": "^16.0.1",
    "typescript": "^4.7.3"
  },
  "scripts": {
    "build": "npx tsc",
    "prestart": "yarn run build",
    "start": "node dist/index.js"
  }
}

报错日志 #

执行yarn start后输出的错误信息如下：

PS C:\Users\kawnah\shopify-checkout-apit> yarn start
yarn run v1.22.18
$ yarn run build
$ npx tsc
src/index.ts:17:27 - error TS1003: Identifier expected.

17 API_VERSION: ApiVersion.{version}
~

src/index.ts:18:1 - error TS1005: ',' expected.

18 });
~

同一文件共发现2个错误，起始位置为src/index.ts:17
命令执行失败，退出码2。

错误原因 #

报错是直接复制官方示例代码时，未替换模板自带的占位符导致的语法错误，共两处问题：

• IS_EMBEDDED_APP: {boolean} 中的{boolean}是模板占位符，不是合法的TypeScript语法，嵌入式Shopify应用直接替换为布尔值true即可
• API_VERSION: ApiVersion.{version} 中的{version}是模板占位符，需要替换为ApiVersion枚举下的实际版本值，当前3.1.0版本依赖可使用ApiVersion.July21等稳定版本，也可填ApiVersion.Unstable使用非稳定版本

修复方法 #

将Shopify.Context.initialize配置块修改为如下内容：

Shopify.Context.initialize({
  API_KEY,
  API_SECRET_KEY,
  SCOPES: [SCOPES],
  HOST_NAME: HOST.replace(/https?:\/\//, ""),
  HOST_SCHEME: HOST.split("://")[0],
  IS_EMBEDDED_APP: true,
  API_VERSION: ApiVersion.July21 // 可根据需求替换为其他支持的版本
});

修改完成后重新执行yarn start即可通过TypeScript编译。
注意：请提前在项目根目录的.env文件中配置好API_KEY、API_SECRET_KEY、SCOPES、SHOP、HOST这些环境变量的实际值，否则后续运行会出现参数缺失问题。

内容的提问来源于stack exchange，提问作者user5481714