README.zh.md

TS Type Hidden

将那些熟悉的类型代码隐藏起来吧！让代码片段回到最简洁的模样！

English | 简体中文

---

特性

• 一键隐藏/显示类型代码
• 自定义需要隐藏的类型种类（interface, type-alias, ...）
• 光标移入隐藏的类型代码处时会取消隐藏，以便对相关类型进行操作
• 隐藏的类型代码行旁会有一个小蓝点，以便于区分
• 多行形式的类型代码在隐藏模式下会被折叠成一行
• 状态栏处显示当前隐藏模式的状态，点击可切换

命令

• ts-type-hidden.toggle: 切换当前隐藏模式

  • 默认绑定的快捷键：
    • mac: cmd + shift + t
    • windows: ctrl + shift + t

• ts-type-hidden.open: 打开隐藏模式

• ts-type-hidden.close: 关闭隐藏模式

设置

• ts-type-hidden.enable: 是否启用插件

• ts-type-hidden.typeIconPath: 类型代码行旁的图标文件路径（支持 svg/png/jpg/jpeg/... 文件格式）

• ts-type-hidden.ignoreTypeKinds: 不需要隐藏的类型种类👇

  查看示例

  
  

  6469_1692709788_raw.mp4
  查看配置项

  • type-alias:

    type A  = ({ ... } & { ... }) | string[]

    ⏭️ type A = ({ ... } & { ... }) | string[]

  • interface:

    interface A { ... }

    ⏭️ interface A { ... }

  • function-overload:

    function fn(a: number): number[];
    function fn(a: number[], opts: { ... }): number[];

    ⏭️ function fn(a: number): number[];

    ⏭️ function fn(a: number[], opts: { ... }): number[];

  • function-return:

    function fn(): number {}

    ⏭️ : number

  • function-type-predicate:

    function fn(a: any): a is number {}

    ⏭️ : a is number

  • function-parameter:

    function fn<A extends string>(a: A, b: number) {}

    ⏭️ : A

    ⏭️ : number

  • function-generic-definition:

    function fn<A extends string, B = [A, '']>() {}

    ⏭️ <A extends string, B = [A, '']>

  • function-call-generic:

    const name = get<UserModule>(userModule, 'info.name');
    const userModel = new UserModel<UserEntity>({ ... });

    ⏭️ <UserModule>

    ⏭️ <UserEntity>

  • tsx-component-generic:

    const EditUserForm = <ProForm<UserModel> id={userId} />;

    ⏭️ <UserModel>

  • variable-type-definition:

    const a: number = 1;

    ⏭️ : number

  • class-property-type-definition:

    class A {
      public size?: number;
      private setSize!: Function = () => {}
    }

    ⏭️ ?: number

    ⏭️ !: Function

  • angle-brackets-assertion:

    const num: any = 77;
    const num1 = (<number>num).toFixed(2);

    ⏭️ <number>

  • as-assertion:

    fn() as any;

    ⏭️ as any

  • satisfies-operator:

    const user = { ... } satisfies UserModel;

    ⏭️ satisfies UserModel

  • declare-statement:

    declare const a: number;
    declare function b(): number;
    declare class c {}
    declare module d {}
    declare namespace e {}
    declare enum f {}
    declare global {}
    declare module 'g' {}

    ⏭️ 👆所有以 declare 开头的语句

CHANGELOG

CHANGELOG.md

License

MIT License © 2023-PRESENT xlboy