[Tools] VS Code Tips

本文介绍 VSCode 中用于快速标记及跳转的快捷键,并演示如何基于 JSON 文件生成类型安全的 TypeScript 接口。通过简单的步骤,用户可以创建 Pokemon 类型的接口,并利用提供的工具进行 JSON 数据的转换。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Inside one file, you can freely mark the number 1-9:

shift + cmd + [1-9]

And jump to Number of bookmark:

cmd + [1-9]

 


 

It helps to generate type safe interface based the json file you provided.

For example you can create a json file called pokemon.json:

{
    "id": 1,
    "name": "Bulbasaur",
    "img": "http://www.serebii.net/pokemongo/pokemon/001.png",
    "type": [ "Grass", "Poison" ],
    "weaknesses": [ "Fire", "Ice", "Flying", "Psychic" ]
}

Then in the file you want to generate the code, open vs cammand panel, enter "Paste Json...", enter "Pokemon"...

It will genearte type safe code and lots of utitlties code.

export interface Pokemon {
  id:         number;
  name:       string;
  img:        string;
  type:       string[];
  weaknesses: string[];
}

// Converts JSON strings to/from your types
// and asserts the results of JSON.parse at runtime
export namespace Convert {
  export function toPokemon(json: string): Pokemon {
    return cast(JSON.parse(json), r("Pokemon"));
  }

  export function pokemonToJson(value: Pokemon): string {
    return JSON.stringify(value, null, 2);
  }

  function cast<T>(obj: any, typ: any): T {
    if (!isValid(typ, obj)) {
      throw Error(`Invalid value`);
    }
    return obj;
  }

  function isValid(typ: any, val: any): boolean {
    if (typ === "any") { return true; }
    if (typ === null) { return val === null; }
    if (typ === false) { return false; }
    while (typeof typ === "object" && typ.ref !== undefined) {
      typ = typeMap[typ.ref];
    }
    if (Array.isArray(typ)) { return isValidEnum(typ, val); }
    if (typeof typ === "object") {
      return typ.hasOwnProperty("unionMembers") ? isValidUnion(typ.unionMembers, val)
        : typ.hasOwnProperty("arrayItems")    ? isValidArray(typ.arrayItems, val)
        : typ.hasOwnProperty("props")         ? isValidObject(typ.props, typ.additional, val)
        : false;
    }
    return isValidPrimitive(typ, val);
  }

  function isValidPrimitive(typ: string, val: any) {
    return typeof typ === typeof val;
  }

  function isValidUnion(typs: any[], val: any): boolean {
    // val must validate against one typ in typs
    return typs.some((typ) => isValid(typ, val));
  }

  function isValidEnum(cases: string[], val: any): boolean {
    return cases.indexOf(val) !== -1;
  }

  function isValidArray(typ: any, val: any): boolean {
    // val must be an array with no invalid elements
    return Array.isArray(val) && val.every((element) => {
      return isValid(typ, element);
    });
  }

  function isValidObject(props: { [k: string]: any }, additional: any, val: any): boolean {
    if (val === null || typeof val !== "object" || Array.isArray(val)) {
      return false;
    }
    return Object.getOwnPropertyNames(val).every((key) => {
      const prop = val[key];
      if (Object.prototype.hasOwnProperty.call(props, key)) {
        return isValid(props[key], prop);
      }
      return isValid(additional, prop);
    });
  }

  function a(typ: any) {
    return { arrayItems: typ };
  }

  function u(...typs: any[]) {
    return { unionMembers: typs };
  }

  function o(props: { [k: string]: any }, additional: any) {
    return { props, additional };
  }

  function m(additional: any) {
    return { props: {}, additional };
  }

  function r(name: string) {
    return { ref: name };
  }

  const typeMap: any = {
    "Pokemon": o({
      id: 0,
      name: "",
      img: "",
      type: a(""),
      weaknesses: a(""),
    }, false),
  };
}

  

A easy way to dealing with Git.

 

Good for demoing the code in a team.

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值