TS Type Hidden

Hide those familiar type codes! Get the snippet back to its simplest form!

English | 简体中文

Features

• One-click hide/show type code
• Customize the type kinds that need to be hidden (interface, type-alias, ...)
• Type code will be displayed when cursor active the line
• There are small blue dots that means relative line exist hidden type code
• Under hidden mode, Multi-line type code will be folded into one line
• Status bar shows the current hidden mode status, click to toggle

Commands

• ts-type-hidden.toggle: Toggle the current hidden mode

  • Default keyboard shortcuts：
    • mac: cmd + shift + t
    • windows: ctrl + shift + t

• ts-type-hidden.open: Open the hidden mode

• ts-type-hidden.close: Close the hidden mode

Settings

• ts-type-hidden.enable: Enable the plugin or not

• ts-type-hidden.typeIconPath: The path to the Icon file next to a line of type code(support svg/png/jpg/jpeg/... file format)

• ts-type-hidden.ignoreTypeKinds: Type kinds that do not need to be hidden👇

  View example

  
  

  6469_1692709788_raw.mp4
  View configuration options

  • 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' {}

    ⏭️ 👆All statements that begin with declare

  • type-only-import-declaration:

    import type * as a from 'a';
    import type { b1 } from 'b';

    ⏭️ import type * as a from 'a';

    ⏭️ import type { b1 } from 'b';

  • import-type-specifier:

    import {type a1, a2} from 'a';

    ⏭️ type a1

  • type-only-export-declaration:

    export type * as a from 'a';
    export type { b1 } from 'b';

    ⏭️ export type * from 'a';

    ⏭️ export type { b1 } from 'b';

  • export-type-specifier:

    export {a1, type a2} from 'a';

    ⏭️ type a2

CHANGELOG

CHANGELOG.md

License

MIT License © 2023-PRESENT xlboy