【问题标题】:Converting Typescript Code to Javascript Code?将 Typescript 代码转换为 Javascript 代码?
【发布时间】:2022-01-06 17:03:26
【问题描述】:

我正在使用Shopify's Node Api 教程来创建 Redis 存储。但是,提供的代码块是打字稿,我的整个项目都是用 javascript (React/nextjs) 编写的。我已经工作了几个小时来尝试将代码转换为可用,但无法让它在我的项目中正常工作。认真地为此苦苦挣扎。

如何将下面的代码块从 typescript 转换为 javascript?

/* redis-store.ts */

// Import the Session type from the library, along with the Node redis package, and `promisify` from Node
import {Session} from '@shopify/shopify-api/dist/auth/session';
import redis from 'redis';
import {promisify} from 'util';

class RedisStore {
  private client: redis.RedisClient;
  private getAsync;
  private setAsync;
  private delAsync;

  constructor() {
    // Create a new redis client
    this.client = redis.createClient();
    // Use Node's `promisify` to have redis return a promise from the client methods
    this.getAsync = promisify(this.client.get).bind(this.client);
    this.setAsync = promisify(this.client.set).bind(this.client);
    this.delAsync = promisify(this.client.del).bind(this.client);
  }

  /*
    The storeCallback takes in the Session, and sets a stringified version of it on the redis store
    This callback is used for BOTH saving new Sessions and updating existing Sessions.
    If the session can be stored, return true
    Otherwise, return false
  */
  storeCallback = async (session: Session) => {
    try {
      // Inside our try, we use the `setAsync` method to save our session.
      // This method returns a boolean (true if successful, false if not)
      return await this.setAsync(session.id, JSON.stringify(session));
    } catch (err) {
      // throw errors, and handle them gracefully in your application
      throw new Error(err);
    }
  };

  /*
    The loadCallback takes in the id, and uses the getAsync method to access the session data
     If a stored session exists, it's parsed and returned
     Otherwise, return undefined
  */
  loadCallback = async (id: string) => {
    try {
      // Inside our try, we use `getAsync` to access the method by id
      // If we receive data back, we parse and return it
      // If not, we return `undefined`
      let reply = await this.getAsync(id);
      if (reply) {
        return JSON.parse(reply);
      } else {
        return undefined;
      }
    } catch (err) {
      throw new Error(err);
    }
  };

  /*
    The deleteCallback takes in the id, and uses the redis `del` method to delete it from the store
    If the session can be deleted, return true
    Otherwise, return false
  */
  deleteCallback = async (id: string) => {
    try {
      // Inside our try, we use the `delAsync` method to delete our session.
      // This method returns a boolean (true if successful, false if not)
      return await this.delAsync(id);
    } catch (err) {
      throw new Error(err);
    }
  };
}

// Export the class
export default RedisStore;

【问题讨论】:

  • 其中唯一的 typescript 位是 Session 接口、方法上的 string 类型和类的 private 关键字。只需删除这些并将文件另存为.js
  • 或者使用 TypeScript 编译器,这就是它的工作!

标签: javascript reactjs typescript redis shopify


【解决方案1】:

只需将所有打字稿代码保存在 .ts 文件中(可能是 redis-store.ts)。 然后使用 typescript 编译器通过运行 tsc 命令转换为您的 javascript 版本,如下所示

tsc redis-store.ts

更多编译器选项,请访问下面 https://www.typescriptlang.org/docs/handbook/compiler-options.html

【讨论】:

    【解决方案2】:

    你基本上需要摆脱所有类型(会话和字符串)并将private切换到#,可能是这样的:

    /* redis-store.js */
    
    import redis from 'redis';
    import {promisify} from 'util';
    
    class RedisStore {
      #client;
      #getAsync;
      #setAsync;
      #delAsync;
    
      constructor() {
        // Create a new redis client
        this.client = redis.createClient();
    
        this.getAsync = promisify(this.client.get).bind(this.client);
        this.setAsync = promisify(this.client.set).bind(this.client);
        this.delAsync = promisify(this.client.del).bind(this.client);
      }
    
      storeCallback = async (session) => {
        try {
          // Inside our try, we use the `setAsync` method to save our session.
          // This method returns a boolean (true if successful, false if not)
          return await this.setAsync(session.id, JSON.stringify(session));
        } catch (err) {
          // throw errors, and handle them gracefully in your application
          throw new Error(err);
        }
      };
    
      /*
        The loadCallback takes in the id, and uses the getAsync method to access the session data
         If a stored session exists, it's parsed and returned
         Otherwise, return undefined
      */
      loadCallback = async (id) => {
        try {
          // Inside our try, we use `getAsync` to access the method by id
          // If we receive data back, we parse and return it
          // If not, we return `undefined`
          let reply = await this.getAsync(id);
          if (reply) {
            return JSON.parse(reply);
          } else {
            return undefined;
          }
        } catch (err) {
          throw new Error(err);
        }
      };
    
      /*
        The deleteCallback takes in the id, and uses the redis `del` method to delete it from the store
        If the session can be deleted, return true
        Otherwise, return false
      */
      deleteCallback = async (id) => {
        try {
          // Inside our try, we use the `delAsync` method to delete our session.
          // This method returns a boolean (true if successful, false if not)
          return await this.delAsync(id);
        } catch (err) {
          throw new Error(err);
        }
      };
    }
    
    // Export the class
    export default RedisStore;
    
    

    【讨论】:

    • 感谢您的回复!我实现了上面的代码,但它在#client 上抛出了一个错误。 Support for the experimental syntax 'classPrivateProperties' isn't currently enabled 现在深入挖掘
    • 我以前见过这个错误,我认为这取决于浏览器不确定,你可以删除#并且应该可以工作
    猜你喜欢
    • 2021-12-24
    • 2022-06-15
    • 2020-02-13
    • 2020-07-07
    • 2012-02-25
    • 2015-01-10
    • 1970-01-01
    • 2022-12-02
    • 2012-03-20
    相关资源
    最近更新 更多