profile
viewpoint
Carlos Rodrigues pikax @hypermob London Fullstack developer, interested in @vuejs, @dotnet and @nodejs. Typescript 🧙‍♂️ Consultant 🕵️‍♂️

avkonst/hookstate 330

The simple but very powerful and incredibly fast state management for React that is based on hooks

pikax/swgoh 18

Unofficial node library for swgoh.gg

pikax/gin-downloader 11

download manga from public websites

hypermob/hypermob-brochure-site 0

Hypermob brochure site

pikax/awesome-vue 0

🎉 A curated list of awesome things related to Vue.js

pikax/component-compiler-utils 0

Lower level utilities for compiling Vue single file components

pikax/composition-api-rfc 0

Vuepress render for the Composition API RFC

pikax/electron-builder 0

A complete solution to package and build a ready for distribution Electron app with “auto update” support out of the box

pikax/function-api-converter 0

Automatically migrate components to the Function API

issue commentvuejs/composition-api

Typescript error with `Symbol.matchAll`

@DarkLite1 it wasn't published.

If not fixed on 1.0.0-beta.9 please let us know.

IlCallo

comment created time in 13 hours

create barnchpikax/vue-function-api

branch : types/remove_Symbol.matchAll

created branch time in a day

delete branch pikax/vue-function-api

delete branch : types/shallowRef_type_inferrence

delete time in a day

push eventpikax/vue-function-api

Carlos Rodrigues

commit sha ccdd247a0e754b71807b87f79eb4b364e679c667

Update README.md Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

view details

push time in 2 days

issue commentvuejs/composition-api

reactive inside computed starts tracking root / top level objects

In your example you are adding a new property to the object data and expecting the render to update

vmihailenco

comment created time in 3 days

issue commentvuejs/composition-api

reactive inside computed starts tracking root / top level objects

The same problem applies to computed+ref as well - https://codepen.io/vmihailenco/pen/gOrbNmP

I fail to understand what are you trying to do there.

vmihailenco

comment created time in 3 days

push eventpikax/vue-composable

pikax

commit sha 6dc3650003f5873bf316c39e4d4f6a892f09c09d

revert: build(deps-dev): bump @vue/* This reverts commit 56ae97c5087895d7b48a48367ccfc06075739ad2.

view details

push time in 4 days

push eventpikax/vue-function-api

pikax

commit sha 719bf23855ceb6dbc224c7654313a6c74941e8df

chore: add docs

view details

push time in 4 days

pull request commentvuejs/composition-api

fix(watch): watch will trigger when added new keys using `set`

set is only to circumvent the limitation on adding a new key limitation on vue2. In vue3 there's no such limitation when using proxys.

We should add it to the readme.

pikax

comment created time in 4 days

create barnchpikax/vue-function-api

branch : fix/watch_allow_watch_new_keys

created branch time in 4 days

issue commentvuejs/composition-api

watch() with reactive() doesn't re-run when new properties are added to the reactive object

watch doesn't keep track on new properties added to the object.

export function addToUndoBuffer(undoActionBuffer, actionId) {
  watch(
    () => undoActionBuffer, // tried undoActionBuffer too (as just a reactive object & not a function)
    () => {
      console.log("undoActionBuffer changed");
    },
    { deep: true }
  );
  set(undoActionBuffer, actionId, 1);
}

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },

  setup() {
    const undoActionBuffer = reactive({});
    addToUndoBuffer(undoActionBuffer, "aa");

    const inc = () => {
      undoActionBuffer.aa++;
    };
    return {
      undoActionBuffer,
      inc
    };
  }
};
leonzalion

comment created time in 4 days

issue commentvuejs/composition-api

update 1.0.0-beta.7 ssr renderComponent computed error

Most likely caused by https://github.com/vuejs/composition-api/pull/452

Can you provide a reproducible repo?

Is this only when SSR?

panhezeng

comment created time in 5 days

push eventvuejs/composition-api

pikax

commit sha 6b9b33cf23fc4e39e5001f48e1b3e88a1c289c86

chore: typo on unpkg fixes #463

view details

push time in 5 days

issue closedvuejs/composition-api

"unpkg": "dist/vue-composition-ap.prod.js"

packages.json

"unpkg": "dist/vue-composition-ap.prod.js"

closed time in 5 days

CaiPeng1989

push eventvuejs/composition-api

pikax

commit sha bd243df924f8ffc8b4af485b5e8e9d892ce5dcc8

chore: remove `isVNode` from missing API's VNode is not part of the composition-api

view details

push time in 5 days

pull request commentvuejs/composition-api

feat: add isVNode api

Thank you for this, but isVNode is not part of the composition-api.

https://github.com/vuejs/composition-api/pull/438#issuecomment-658263664

shaonialife

comment created time in 5 days

delete branch vuejs/composition-api

delete branch : rc

delete time in 5 days

pull request commentvuejs/composition-api

feat: add isVNode api

looks like npm and yarn are having issues

shaonialife

comment created time in 5 days

delete branch pikax/vue-function-api

delete branch : feat/setup-unwrap

delete time in 6 days

push eventvuejs/composition-api

Carlos Rodrigues

commit sha 149821a1b74c96795a14838274a77c0895483b56

feat: `proxyRefs` method and `ShallowUnwrapRefs` type (#456) * feat: `proxyRefs` method and `ShallowUnwrapRefs` type BREAKING CHANGE: template auto ref unwrapping are now applied shallowly, i.e. only at the root level. See https://github.com/vuejs/vue-next/pull/1682 for more details.

view details

push time in 6 days

push eventpikax/vue-function-api

pikax

commit sha 058e5598bcbbca2c9397f69eeb9f696b5b969cbd

few changes

view details

push time in 6 days

push eventpikax/vue-function-api

Carlos Rodrigues

commit sha 4cf7dd575a42b2094a1d07debad97d3a68052d35

Update README.md Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

view details

push time in 6 days

push eventpikax/vue-function-api

Carlos Rodrigues

commit sha c450817372c2bacef7207d88fa19b2f8f50b374e

Update src/mixin.ts Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

view details

push time in 6 days

issue commentvuejs/composition-api

Argument of type 'unknown' is not assignable to parameter of type 'Data'.

There's no typings for bootstrap-vue/esm/components/button/button

Even with bootstrap-vue/esm/components/button it won't work.

The issue is caused by the nonexistent type on btnProps, because of that the props types cannot be inferred, making them invalid props.

sadjow

comment created time in 6 days

Pull request review commentvuejs/composition-api

feat: `proxyRefs` method and `ShallowUnwrapRefs` type

 describe('setup', () => {     )   }) -  it('not warn doing toRef on props', async () => {-    const Foo = {-      props: {-        obj: {-          type: Object,-          required: true,-        },-      },-      setup(props) {-        return () =>-          h('div', null, [-            h('span', toRefs(props.obj).bar.value),-            h('span', toRefs(props.obj.nested).baz.value),-          ])-      },-    }--    let bar-    let baz--    const vm = new Vue({-      template: `<div id="app"><Foo :obj="obj" /></div>`,-      components: { Foo },-      setup() {-        bar = ref(3)-        baz = ref(1)-        return {-          obj: {-            bar,-            nested: {-              baz,-            },-          },-        }-      },-    })-    vm.$mount()--    expect(warn).not.toHaveBeenCalled()-    expect(vm.$el.textContent).toBe('31')--    bar.value = 4-    baz.value = 2--    await vm.$nextTick()-    expect(warn).not.toHaveBeenCalled()-    expect(vm.$el.textContent).toBe('42')-  })+  // it('not warn doing toRef on props', async () => {

Props are already reactive, only the nested ref are not https://github.com/vuejs/composition-api/blob/030d02ca0f67782629dc602f2f441a8712f78bb7/test/setup.spec.js#L336-L371

pikax

comment created time in 6 days

issue closedvuejs/composition-api

Vue 3 `readonly` API doesn't exist

I wanted to try implementing this new Context technique:

https://markus.oberlehner.net/blog/context-and-provider-pattern-with-the-vue-3-composition-api/

But the readonly API doesn't seem to exist.

readonly api error when importing

closed time in 6 days

Dan503

issue commentvuejs/composition-api

Vue 3 `readonly` API doesn't exist

Is not possible to reproduce the readonly using Vue.observe

image

Dan503

comment created time in 6 days

PR opened vuejs/composition-api

Reviewers
types: improve typings for `shallowRef`

https://github.com/vuejs/composition-api/issues/453

const STATUS_INITIAL = 'initial'
const STATUS_READY = 'ready'
const STATUS_INVALIDATING = 'invalidating'

type Status = 'initial' | 'ready' | 'invalidating'

const status = shallowRef<Status>(STATUS_INITIAL)

if (status.value === STATUS_READY) {
    status.value = STATUS_INVALIDATING
}

Explanation shallowRef<Status> is returning Ref<'initial'> | Ref<'ready'> | Ref<'invalidating'> so when you do


if (status.value === STATUS_READY) {
  // status === Ref<'ready'> 
}

Same as https://github.com/vuejs/vue-next/pull/1780

+28 -2

0 comment

2 changed files

pr created time in 7 days

create barnchpikax/vue-function-api

branch : types/shallowRef_type_inferrence

created branch time in 7 days

PR opened vuejs/vue-next

types(reactivity): improve typings for `shallowRef`

https://github.com/vuejs/composition-api/issues/453

const STATUS_INITIAL = 'initial'
const STATUS_READY = 'ready'
const STATUS_INVALIDATING = 'invalidating'

type Status = 'initial' | 'ready' | 'invalidating'

const status = shallowRef<Status>(STATUS_INITIAL)

if (status.value === STATUS_READY) {
    status.value = STATUS_INVALIDATING
}

Explanation shallowRef<Status> is returning Ref<'initial'> | Ref<'ready'> | Ref<'invalidating'> so when you do


if (status.value === STATUS_READY) {
  // status === Ref<'ready'> 
}
+28 -2

0 comment

2 changed files

pr created time in 7 days

create barnchpikax/vue-next

branch : types/shallowRef_type_inferrence

created branch time in 7 days

issue closedvuejs/composition-api

reactive inside computed starts tracking root / top level objects

For example see https://codepen.io/vmihailenco/pen/RwrXLGN

Because data is not reactive bar computed should never be updated. But it looks like call to reactive starts tracking changes in data (not the whole data - only the top level keys) and because of that bar is re-computed every time data changes.

Same code works fine in Vue 3 - message is properly toggled on click. bar is computed once.

closed time in 7 days

vmihailenco

issue commentvuejs/composition-api

reactive inside computed starts tracking root / top level objects

This probably is caused because the reactive mutates the original object.

After you call reactive(data) it will convert data into a reactive object.

This is one of the limitations of using Vue.observe

image

vmihailenco

comment created time in 7 days

Pull request review commentvuejs/composition-api

feat: `proxyRefs` method and `ShallowUnwrapRefs` type

 describe('setup', () => {     )   }) -  it('not warn doing toRef on props', async () => {-    const Foo = {-      props: {-        obj: {-          type: Object,-          required: true,-        },-      },-      setup(props) {-        return () =>-          h('div', null, [-            h('span', toRefs(props.obj).bar.value),-            h('span', toRefs(props.obj.nested).baz.value),-          ])-      },-    }--    let bar-    let baz--    const vm = new Vue({-      template: `<div id="app"><Foo :obj="obj" /></div>`,-      components: { Foo },-      setup() {-        bar = ref(3)-        baz = ref(1)-        return {-          obj: {-            bar,-            nested: {-              baz,-            },-          },-        }-      },-    })-    vm.$mount()--    expect(warn).not.toHaveBeenCalled()-    expect(vm.$el.textContent).toBe('31')--    bar.value = 4-    baz.value = 2--    await vm.$nextTick()-    expect(warn).not.toHaveBeenCalled()-    expect(vm.$el.textContent).toBe('42')-  })+  // it('not warn doing toRef on props', async () => {

this is caused because the props are marked as raw

Open for suggestions

pikax

comment created time in 7 days

PR opened vuejs/composition-api

Reviewers
feat: `proxyRefs` method and `ShallowUnwrapRefs` type

https://github.com/vuejs/vue-next/pull/1682

+135 -139

0 comment

9 changed files

pr created time in 7 days

create barnchpikax/vue-function-api

branch : feat/setup-unwrap

created branch time in 7 days

PR opened vuejs/vue-next

feat(runtime-core): check if the key is string

On the rc.5 I started getting errors because a symbol was used during render, because indexOf is not available on symbol.

This test is not representative on you will get this problem, but rather a way to trigger it.

The "errors" can be found here but exception is not being bubble up

after manually disabling the recursive vue-next log error:

    TypeError: key.indexOf is not a function

      at Object.get (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5422:17)
      at Proxy.render (eval at compileToFunction (packages/vue-composable/__tests__/utils.ts:85:18), <anonymous>:12:13)
      at renderComponentRoot (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:481:44)
      at componentEffect (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4040:53)
      at reactiveEffect (node_modules/@vue/reactivity/dist/reactivity.cjs.js:46:24)
      at Object.effect (node_modules/@vue/reactivity/dist/reactivity.cjs.js:21:9)
      at setupRenderEffect (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4032:38)
      at mountComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3990:9)
      at processComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3947:17)
      at patch (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3607:21)
      at render (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:4675:13)
      at mount (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3106:25)
      at Object.app.mount (node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:1197:23)
      at Object.mount (packages/vue-composable/__tests__/utils.ts:115:16)
      at Object.<anonymous> (packages/vue-composable/__tests__/misc/vmodel.spec.ts:87:8)

Code causing the issue


// composable
export function useVModel<TProps, PropName extends keyof TProps>(
  props: TProps,
  name: PropName
): Ref<TProps[PropName]>;
export function useVModel(props: Record<string, any>, name: string): Ref<any> {
  const instance = getCurrentInstance();
  if (!instance) {
    return ref() as any;
  }
  return computed({
    get() {
      return props[name];
    },
    set(v) {
      instance.emit(`update:${name}`, v);
    }
  });
}


// test using the composable , just checking if parent does get the actual update when using `test.value ='mounted'`

it("should replace prop", async () => {
    const comp1 = {
      props: {
        test: String
      },
      setup(props: { test: string }) {
        const test = useVModel(props, "test");

        onMounted(() => {
          test.value = "mounted";
        });

        return {
          test
        };
      },
      template: `<p>{{test}}</p>`
    };

    const test = ref("propTest");

    const vm = createVue({
      components: {
        comp1
      },
      template: `<comp1 v-model:test="test" />`,
      setup() {
        return {
          test
        };
      }
    });

    expect(test.value).toBe("propTest");
    vm.mount();
    await nextTick();

    expect(test.value).toBe("mounted");
  });

+26 -4

0 comment

2 changed files

pr created time in 14 days

create barnchpikax/vue-next

branch : feat/prevent_error_on_render

created branch time in 14 days

push eventpikax/vue-composable

pikax

commit sha 56ae97c5087895d7b48a48367ccfc06075739ad2

build(deps-dev): bump @vue/*

view details

push time in 14 days

startedvuejs/docs-next

started time in 15 days

push eventpikax/vue-composable

pikax

commit sha c62ca9491de318cf61aba02d4d9938dac09807d4

Automated deployment: Mon Jul 27 15:49:33 UTC 2020 b418d969e6d87bc955cfb92dbf3f1c24c0bf04f0

view details

push time in 15 days

push eventpikax/vue-composable

pikax

commit sha b418d969e6d87bc955cfb92dbf3f1c24c0bf04f0

release: v1.0.0-beta.3

view details

push time in 15 days

created tagpikax/vue-composable

tagv1.0.0-beta.3

Vue composition-api composable components. i18n, validation, pagination, fetch, etc. +30 variable composable functions

created time in 15 days

push eventpikax/vue-composable

pikax

commit sha c11261c8e2114bd361398ce1e72fe8a7fd51b84a

Automated deployment: Mon Jul 27 15:25:09 UTC 2020 b8fa41f2ffaecd6133562aab77285d559830e032

view details

push time in 15 days

push eventpikax/vue-composable

Carlos Rodrigues

commit sha b8fa41f2ffaecd6133562aab77285d559830e032

feat(useOnOutsidePress): add `useOnOutsidePress` composable (#383) * feat(useOnOutsidePress): add useOnOutsidePress composable * chore: add tests * chore: add docs * chore: fix ssr

view details

push time in 15 days

delete branch pikax/vue-composable

delete branch : feat/useOnOutsidePress

delete time in 15 days

push eventpikax/vue-composable

pikax

commit sha 3930514717db0d000b8b3b801d2921ee7bad8903

Automated deployment: Mon Jul 27 15:17:14 UTC 2020 04f4bbf5ea211419ed729a9cd506ed5ea553956d

view details

push time in 15 days

push eventpikax/vue-composable

Carlos Rodrigues

commit sha 0da2f44adaaecedcc6336d08264d4984b5d23333

feat(useScrollLock): add useScrollLock composable (#330) * feat: scrollLock composable * chore: improved scroll lock * chore: fix watch types * chore: added tests * chore: fix build * chore: add docs * chore: fix docs

view details

Carlos Rodrigues

commit sha 618842be6aeb3d195dd57b31e1586f550655104b

feat(useTimeline): add `useTimeline` composable (#342) * feat(useTimeline): add `useTimeline` composable * chore: set timeline list to readonly * chore: add todo tests * chore: fix build * chore: fix readonly when ref * chore: add docs * chore: fix tests * chore: add docs title

view details

Carlos Rodrigues

commit sha 499908eb053c78c1eabfc9856a977f43ae312c83

feat(useInterval): add `useInterval` composable (#343) * feat(useInterval): add `useInterval` composable * chore: improve useInterval * chore: improve typings * chore: add tests * chore: add docs * chore: fix docs

view details

Carlos Rodrigues

commit sha 04f4bbf5ea211419ed729a9cd506ed5ea553956d

feat(useValueSync): add `useValueSync` composable (#348) * feat(useSync): add `useSync` composable * chore: add tests * chore: remove sync on the list watch * chore: fix types and issues * chore: more coverage * chore: rename useSync to useValueSync * chore: add docs

view details

Carlos Rodrigues

commit sha 1cd10e7f3aa5c7bb06065d30037b009fa5b3b207

Merge branch 'master' into feat/useOnOutsidePress

view details

push time in 15 days

delete branch pikax/vue-composable

delete branch : feat/useSync

delete time in 15 days

push eventpikax/vue-composable

Carlos Rodrigues

commit sha 04f4bbf5ea211419ed729a9cd506ed5ea553956d

feat(useValueSync): add `useValueSync` composable (#348) * feat(useSync): add `useSync` composable * chore: add tests * chore: remove sync on the list watch * chore: fix types and issues * chore: more coverage * chore: rename useSync to useValueSync * chore: add docs

view details

push time in 15 days

PR merged pikax/vue-composable

feat(useValueSync): add `useValueSync` composable composable

Sync multiple refs values

+263 -1

0 comment

10 changed files

pikax

pr closed time in 15 days

push eventpikax/vue-composable

pikax

commit sha 0775e848a3da59e8cd02a5255b8be4916d090f32

Automated deployment: Mon Jul 27 15:09:47 UTC 2020 499908eb053c78c1eabfc9856a977f43ae312c83

view details

push time in 15 days

push eventpikax/vue-composable

dependabot-preview[bot]

commit sha 8f3217ff17fb24a6892772443e18591d25d34dd7

build(deps-dev): bump webpack from 4.43.0 to 4.44.0 (#476)

view details

dependabot-preview[bot]

commit sha a0aa73171076703636d2ebfaef0a4fc0801c27c1

build(deps-dev): bump css-loader from 3.6.0 to 4.0.0 (#478)

view details

dependabot-preview[bot]

commit sha f725718d4dd1c46d373521dc3748311cda22ba20

build(deps-dev): bump jest-junit from 11.0.1 to 11.1.0 (#479)

view details

dependabot-preview[bot]

commit sha 435867fe96691fcab294533571990c2e85b8e5cb

build(deps-dev): bump @types/node from 14.0.25 to 14.0.26 (#477)

view details

Carlos Rodrigues

commit sha 0da2f44adaaecedcc6336d08264d4984b5d23333

feat(useScrollLock): add useScrollLock composable (#330) * feat: scrollLock composable * chore: improved scroll lock * chore: fix watch types * chore: added tests * chore: fix build * chore: add docs * chore: fix docs

view details

Carlos Rodrigues

commit sha 618842be6aeb3d195dd57b31e1586f550655104b

feat(useTimeline): add `useTimeline` composable (#342) * feat(useTimeline): add `useTimeline` composable * chore: set timeline list to readonly * chore: add todo tests * chore: fix build * chore: fix readonly when ref * chore: add docs * chore: fix tests * chore: add docs title

view details

Carlos Rodrigues

commit sha 499908eb053c78c1eabfc9856a977f43ae312c83

feat(useInterval): add `useInterval` composable (#343) * feat(useInterval): add `useInterval` composable * chore: improve useInterval * chore: improve typings * chore: add tests * chore: add docs * chore: fix docs

view details

Carlos Rodrigues

commit sha 5c98316fcfa849ced8c3c93230eb6472cd096126

Merge branch 'master' into feat/useSync

view details

push time in 15 days

push eventpikax/vue-composable

Carlos Rodrigues

commit sha 499908eb053c78c1eabfc9856a977f43ae312c83

feat(useInterval): add `useInterval` composable (#343) * feat(useInterval): add `useInterval` composable * chore: improve useInterval * chore: improve typings * chore: add tests * chore: add docs * chore: fix docs

view details

push time in 15 days

delete branch pikax/vue-composable

delete branch : feat/useInterval

delete time in 15 days

PR merged pikax/vue-composable

feat(useInterval): add `useInterval` composable composable

simple helper that removes interval on component onUnmounted

+282 -0

0 comment

7 changed files

pikax

pr closed time in 15 days

push eventpikax/vue-composable

pikax

commit sha 9250553fa40945d2539d2369f7e1eb28ec0a159c

Automated deployment: Mon Jul 27 15:01:38 UTC 2020 618842be6aeb3d195dd57b31e1586f550655104b

view details

push time in 15 days

PR merged pikax/vue-composable

feat(useTimeline): add `useTimeline` composable composable

Allow to access previous values for a ref

+297 -36

0 comment

17 changed files

pikax

pr closed time in 15 days

push eventpikax/vue-composable

dependabot-preview[bot]

commit sha 8f3217ff17fb24a6892772443e18591d25d34dd7

build(deps-dev): bump webpack from 4.43.0 to 4.44.0 (#476)

view details

dependabot-preview[bot]

commit sha a0aa73171076703636d2ebfaef0a4fc0801c27c1

build(deps-dev): bump css-loader from 3.6.0 to 4.0.0 (#478)

view details

dependabot-preview[bot]

commit sha f725718d4dd1c46d373521dc3748311cda22ba20

build(deps-dev): bump jest-junit from 11.0.1 to 11.1.0 (#479)

view details

dependabot-preview[bot]

commit sha 435867fe96691fcab294533571990c2e85b8e5cb

build(deps-dev): bump @types/node from 14.0.25 to 14.0.26 (#477)

view details

Carlos Rodrigues

commit sha 0da2f44adaaecedcc6336d08264d4984b5d23333

feat(useScrollLock): add useScrollLock composable (#330) * feat: scrollLock composable * chore: improved scroll lock * chore: fix watch types * chore: added tests * chore: fix build * chore: add docs * chore: fix docs

view details

Carlos Rodrigues

commit sha 618842be6aeb3d195dd57b31e1586f550655104b

feat(useTimeline): add `useTimeline` composable (#342) * feat(useTimeline): add `useTimeline` composable * chore: set timeline list to readonly * chore: add todo tests * chore: fix build * chore: fix readonly when ref * chore: add docs * chore: fix tests * chore: add docs title

view details

Carlos Rodrigues

commit sha 2d42277ac6cdd3d0629748617ce92954d44ce641

Merge branch 'master' into feat/useInterval

view details

push time in 15 days

push eventpikax/vue-composable

Carlos Rodrigues

commit sha 618842be6aeb3d195dd57b31e1586f550655104b

feat(useTimeline): add `useTimeline` composable (#342) * feat(useTimeline): add `useTimeline` composable * chore: set timeline list to readonly * chore: add todo tests * chore: fix build * chore: fix readonly when ref * chore: add docs * chore: fix tests * chore: add docs title

view details

push time in 15 days

delete branch pikax/vue-composable

delete branch : feat/useTimeline

delete time in 15 days

push eventpikax/vue-composable

dependabot-preview[bot]

commit sha 8f3217ff17fb24a6892772443e18591d25d34dd7

build(deps-dev): bump webpack from 4.43.0 to 4.44.0 (#476)

view details

dependabot-preview[bot]

commit sha a0aa73171076703636d2ebfaef0a4fc0801c27c1

build(deps-dev): bump css-loader from 3.6.0 to 4.0.0 (#478)

view details

dependabot-preview[bot]

commit sha f725718d4dd1c46d373521dc3748311cda22ba20

build(deps-dev): bump jest-junit from 11.0.1 to 11.1.0 (#479)

view details

dependabot-preview[bot]

commit sha 435867fe96691fcab294533571990c2e85b8e5cb

build(deps-dev): bump @types/node from 14.0.25 to 14.0.26 (#477)

view details

Carlos Rodrigues

commit sha 0da2f44adaaecedcc6336d08264d4984b5d23333

feat(useScrollLock): add useScrollLock composable (#330) * feat: scrollLock composable * chore: improved scroll lock * chore: fix watch types * chore: added tests * chore: fix build * chore: add docs * chore: fix docs

view details

pikax

commit sha aa573b7cf85cc94e1c2f990ff47d442e7cb55ce9

Merge branch 'master' into feat/useTimeline # Conflicts: # packages/axios/package.json # packages/vue-composable/package.json

view details

push time in 15 days

push eventpikax/vue-composable

pikax

commit sha d4e93586e9ebe3a1e0aca34a8a2e4f265f2be8ef

Automated deployment: Mon Jul 27 14:54:27 UTC 2020 0da2f44adaaecedcc6336d08264d4984b5d23333

view details

push time in 15 days

delete branch pikax/vue-composable

delete branch : feat/scrollLock

delete time in 15 days

push eventpikax/vue-composable

Carlos Rodrigues

commit sha 0da2f44adaaecedcc6336d08264d4984b5d23333

feat(useScrollLock): add useScrollLock composable (#330) * feat: scrollLock composable * chore: improved scroll lock * chore: fix watch types * chore: added tests * chore: fix build * chore: add docs * chore: fix docs

view details

push time in 15 days

PR merged pikax/vue-composable

feat(useScrollLock): add useScrollLock composable composable

allow to scroll lock components

<template>
  <div>
    <label>scrollLock</label>
    <input type="checkbox" v-model="locked" />
  </div>
  <div ref="scrollable" class="scroll-lock-example">
    <p v-for="i in 100">
      NOBODY READS THESE ANYMORE
    </p>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { useLockScroll } from "vue-composable";

export default defineComponent({
  setup() {
    const scrollable = ref();
    const { locked } = useLockScroll(scrollable);

    return {
      scrollable,
      locked
    };
  }
});
</script>

<style>
.scroll-lock-example {
  height: 300px;
  width: 300px;
  overflow: scroll;
}

.no-scroll {
  overflow: hidden;
}
</style>

+1257 -1178

0 comment

21 changed files

pikax

pr closed time in 15 days

push eventpikax/vue-composable

pikax

commit sha 2e9733562e933a9b1e6872ac396ba88ab0f93fa9

chore: fix ssr

view details

push time in 15 days

push eventpikax/vue-composable

pikax

commit sha 28139897a9bfe1f613eb4d489e0fec06b472d59b

chore: add docs title

view details

push time in 15 days

push eventpikax/vue-composable

pikax

commit sha d63f49105fe7c8bf37ce923ed96c92afae0e54ba

chore: fix tests

view details

push time in 15 days

push eventpikax/vue-composable

pikax

commit sha 662a4c60ea77b83b4a3dd327ac23d3c3d65dd649

chore: fix docs

view details

push time in 15 days

push eventpikax/vue-composable

pikax

commit sha 46f1b0315671b55014dd6c230d40e410a305b08d

chore: fix docs

view details

push time in 15 days

push eventpikax/vue-composable

pikax

commit sha 714ea29697764da7754a75f7f1c510956f50149c

chore: add docs

view details

push time in 15 days

push eventpikax/vue-composable

pikax

commit sha 769b7c56d5749e90e23270c1b822548133eb9906

chore: add docs

view details

push time in 15 days

push eventpikax/vue-composable

pikax

commit sha c548c8caa4a87c49300f19e9cb4934928c6a84c3

chore: rename useSync to useValueSync

view details

push time in 15 days

push eventpikax/vue-composable

pikax

commit sha 3adb33d942f0d77da25d9f164a8ba87e7abeceac

chore: add docs

view details

push time in 15 days

push eventpikax/vue-composable

pikax

commit sha 24eabe1093ad244d6a5c206f9f4fc7c5fd4e1ae0

chore: add docs

view details

push time in 15 days

Pull request review commentvuejs/docs-next

TypeScript section

+# TypeScript Support++> [Vue CLI](https://cli.vuejs.org) provides built-in TypeScript tooling support.++## Official Declaration in NPM Packages++A static type system can help prevent many potential runtime errors as applications grow, which is why Vue 3 is written in TypeScript. This means you don't need any additional tooling to use TypeScript with Vue - it has a first-class citizen support.++## Recommended Configuration++```js+// tsconfig.json+{+  "compilerOptions": {+    "target": "esnext",+    "module": "esnext",+    // this enables stricter inference for data properties on `this`+    "strict": true,+    "moduleResolution": "node"+  }+}+```++Note that you have to include `strict: true` (or at least `noImplicitThis: true` which is a part of `strict` flag) to leverage type checking of `this` in component methods otherwise it is always treated as `any` type.++See [TypeScript compiler options docs](https://www.typescriptlang.org/docs/handbook/compiler-options.html) for more details.++## Development Tooling++### Project Creation++[Vue CLI](https://github.com/vuejs/vue-cli) can generate new projects that use TypeScript. To get started:++```bash+# 1. Install Vue CLI, if it's not already installed+npm install --global @vue/cli@next++# 2. Create a new project, then choose the "Manually select features" option+vue create my-project-name++# If you already have a Vue CLI project without TypeScript, please add a proper Vue CLI plugin:+vue add typescript+```++Make sure that `script` part of the component has TypeScript set as a language:++```html+<script lang="ts">+  ...+</script>+```++### Editor Support++For developing Vue applications with TypeScript, we strongly recommend using [Visual Studio Code](https://code.visualstudio.com/), which provides great out-of-the-box support for TypeScript. If you are using [single-file components](./single-file-components.html) (SFCs), get the awesome [Vetur extension](https://github.com/vuejs/vetur), which provides TypeScript inference inside SFCs and many other great features.++[WebStorm](https://www.jetbrains.com/webstorm/) also provides out-of-the-box support for both TypeScript and Vue.++## Defining Vue components++To let TypeScript properly infer types inside Vue component options, you need to define components with `defineComponent` global method:++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  // type inference enabled+})+```++## Using with Options API++TypeScript should be able to infer most of the types without defining types explicitly. For example, if you have a component with a number `count` property, you will have an error if you try to call a string-specific method on it:++```ts+const Component = defineComponent({+  data() {+    return {+      count: 0+    }+  },+  mounted() {+    const result = this.count.split('') // => Property 'split' does not exist on type 'number'+  }+})+```++If you have a complex type or interface, you can cast it using [type assertion](https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions):++```ts+interface Book {+  title: string+  author: string+  year: number+}++const Component = defineComponent({+  data() {+    return {+      book: {+        title: 'Vue 3 Guide',+        author: 'Vue Team',+        year: 2020+      } as Book+    }+  }+})+```++### Annotating Return Types++Because of the circular nature of Vue’s declaration files, TypeScript may have difficulties inferring the types of computed. For this reason, you may need to annotate the return type computed properties.++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  data() {+    return {+      message: 'Hello!'+    }+  },+  computed: {+    // needs an annotation+    greeting(): string {+      return this.message + '!'+    }++    // in a computed with a setter, getter needs to be annotated+    greetingUppercased: {+      get(): string {+        return this.greeting.toUpperCase();+      },+      set(newValue: string) {+        this.message = newValue.toUpperCase();+      },+    },+  }+})+```++### Annotating Props++Vue does a runtime validation on props with a `type` defined. To provide these types to TypeScript, we need to cast the constructor with `PropType`:++```ts+import { defineComponent, PropType } from 'vue'++interface ComplexMessage {+  title: string+  okMessage: string+  cancelMessage: string+}+const Component = defineComponent({+  props: {+    name: String,+    success: { type: String },+    callback: {+      type: Function as PropType<() => void>+    },+    message: {+      type: Object as PropType<ComplexMessage>,+      required: true,+      validator(message: ComplexMessage) {+        return !!message.title+      }+    }+  }+})+```++If you find validator not getting type inference or member completion isn’t working, annotating the argument with the expected type may help address these problems.++## Using with Composition API++On `setup()` function, you don't need to pass a typing to `props` parameter as it will infer types from `props` component option.++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  props: {+    message: {+      type: String,+      required: true+    }+  },++  setup(props) {+    const result = props.message.split('') // correct, 'message' is typed as a string+    const filtered = props.message.filter(p => p.value) // an error will be thrown: Property 'filter' does not exist on type 'string'+  }+})+```++### Typing `ref`s++Refs infer the type from the initial value:++```ts+import { defineComponent, ref } from 'vue'++const Component = defineComponent({+  setup() {+    const year = ref(2020)++    const result = year.value.split('') // => Property 'filter' does not exist on type 'number'+  }+})+```++Sometimes we may need to specify complex types for a ref's inner value. We can do that simply passing a generic argument when calling ref to override the default inference:++```ts+const year = ref<string | number>('2020') // year's type: Ref<string | number>++year.value = 2020 // ok!+```++::: tip Note+If the type of the generic is unknown, it's recommended to cast `ref` to `Ref<T>`.+:::++### Typing `reactive`++When typing a `reactive` property, we can use use interfaces:++```ts+import { defineComponent, reactive } from 'vue'++interface Book {+  title: string+  year?: number+}++export default defineComponent({+  name: 'HelloWorld',+  setup() {+    const book: Book = reactive({ title: 'Vue 3 Guide' })
    const book = reactive<Book>({ title: 'Vue 3 Guide' })
    // or
    const book: Book = reactive({ title: 'Vue 3 Guide' })

Just adding the other possible example

NataliaTepluhina

comment created time in 15 days

Pull request review commentvuejs/docs-next

TypeScript section

+# TypeScript Support++> [Vue CLI](https://cli.vuejs.org) provides built-in TypeScript tooling support.++## Official Declaration in NPM Packages++A static type system can help prevent many potential runtime errors as applications grow, which is why Vue 3 is written in TypeScript. This means you don't need any additional tooling to use TypeScript with Vue - it has a first-class citizen support.++## Recommended Configuration++```js+// tsconfig.json+{+  "compilerOptions": {+    "target": "esnext",+    "module": "esnext",+    // this enables stricter inference for data properties on `this`+    "strict": true,+    "moduleResolution": "node"+  }+}+```++Note that you have to include `strict: true` (or at least `noImplicitThis: true` which is a part of `strict` flag) to leverage type checking of `this` in component methods otherwise it is always treated as `any` type.++See [TypeScript compiler options docs](https://www.typescriptlang.org/docs/handbook/compiler-options.html) for more details.++## Development Tooling++### Project Creation++[Vue CLI](https://github.com/vuejs/vue-cli) can generate new projects that use TypeScript. To get started:++```bash+# 1. Install Vue CLI, if it's not already installed+npm install --global @vue/cli@next++# 2. Create a new project, then choose the "Manually select features" option+vue create my-project-name++# If you already have a Vue CLI project without TypeScript, please add a proper Vue CLI plugin:+vue add typescript+```++Make sure that `script` part of the component has TypeScript set as a language:++```html+<script lang="ts">+  ...+</script>+```++### Editor Support++For developing Vue applications with TypeScript, we strongly recommend using [Visual Studio Code](https://code.visualstudio.com/), which provides great out-of-the-box support for TypeScript. If you are using [single-file components](./single-file-components.html) (SFCs), get the awesome [Vetur extension](https://github.com/vuejs/vetur), which provides TypeScript inference inside SFCs and many other great features.++[WebStorm](https://www.jetbrains.com/webstorm/) also provides out-of-the-box support for both TypeScript and Vue.++## Defining Vue components++To let TypeScript properly infer types inside Vue component options, you need to define components with `defineComponent` global method:++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  // type inference enabled+})+```++## Using with Options API++TypeScript should be able to infer most of the types without defining types explicitly. For example, if you have a component with a number `count` property, you will have an error if you try to call a string-specific method on it:++```ts+const Component = defineComponent({+  data() {+    return {+      count: 0+    }+  },+  mounted() {+    const result = this.count.split('') // => Property 'split' does not exist on type 'number'+  }+})+```++If you have a complex type or interface, you can cast it using [type assertion](https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions):++```ts+interface Book {+  title: string+  author: string+  year: number+}++const Component = defineComponent({+  data() {+    return {+      book: {+        title: 'Vue 3 Guide',+        author: 'Vue Team',+        year: 2020+      } as Book+    }+  }+})+```++### Annotating Return Types++Because of the circular nature of Vue’s declaration files, TypeScript may have difficulties inferring the types of computed. For this reason, you may need to annotate the return type computed properties.++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  data() {+    return {+      message: 'Hello!'+    }+  },+  computed: {+    // needs an annotation+    greeting(): string {+      return this.message + '!'+    }++    // in a computed with a setter, getter needs to be annotated+    greetingUppercased: {+      get(): string {+        return this.greeting.toUpperCase();+      },+      set(newValue: string) {+        this.message = newValue.toUpperCase();+      },+    },+  }+})+```++### Annotating Props++Vue does a runtime validation on props with a `type` defined. To provide these types to TypeScript, we need to cast the constructor with `PropType`:++```ts+import { defineComponent, PropType } from 'vue'++interface ComplexMessage {+  title: string+  okMessage: string+  cancelMessage: string+}+const Component = defineComponent({+  props: {+    name: String,+    success: { type: String },+    callback: {+      type: Function as PropType<() => void>+    },+    message: {+      type: Object as PropType<ComplexMessage>,+      required: true,+      validator(message: ComplexMessage) {+        return !!message.title+      }+    }+  }+})+```++If you find validator not getting type inference or member completion isn’t working, annotating the argument with the expected type may help address these problems.++## Using with Composition API++On `setup()` function, you don't need to pass a typing to `props` parameter as it will infer types from `props` component option.++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  props: {+    message: {+      type: String,+      required: true+    }+  },++  setup(props) {+    const result = props.message.split('') // correct, 'message' is typed as a string+    const filtered = props.message.filter(p => p.value) // an error will be thrown: Property 'filter' does not exist on type 'string'+  }+})+```++### Typing `ref`s++Refs infer the type from the initial value:++```ts+import { defineComponent, ref } from 'vue'++const Component = defineComponent({+  setup() {+    const year = ref(2020)++    const result = year.value.split('') // => Property 'filter' does not exist on type 'number'+  }+})+```++Sometimes we may need to specify complex types for a ref's inner value. We can do that simply passing a generic argument when calling ref to override the default inference:++```ts+const year = ref<string | number>('2020') // year's type: Ref<string | number>++year.value = 2020 // ok!+```++::: tip Note+If the type of the generic is unknown, it's recommended to cast `ref` to `Ref<T>`.+:::++### Typing `reactive`++When typing a `reactive` property, we can use use interfaces:++```ts+import { defineComponent, reactive } from 'vue'++interface Book {+  title: string+  year?: number+}++export default defineComponent({+  name: 'HelloWorld',+  setup() {+    const book: Book = reactive({ title: 'Vue 3 Guide' })+    // or+    const book = reactive({ title: 'Vue 3 Guide' }) as Book+  }+})+```++Reactive should have the same type as the argument passed to `reactive` method. If there's an unwrapped `ref`, within `reactive` object, the types will differ:++```ts+export default defineComponent({+  name: 'HelloWorld',+  setup() {+    const book: Book = reactive({ title: 'Vue 3 Guide' })++    book.year = ref(2020) // 'Ref<number>' is not assignable to type 'number'+  }+})+```++### Typing `computed`++For computed, we could specify a type with getter only, or with getter and setter:++```ts+import { defineComponent, ref, computed } from "vue";++export default defineComponent({+  name: "HelloWorld",+  setup() {+    let count = ref(0);+

can we have an example with computed automatically infer the return type?

The read-only bellow can become override computed type

NataliaTepluhina

comment created time in 15 days

Pull request review commentvuejs/docs-next

TypeScript section

+# TypeScript Support++> [Vue CLI](https://cli.vuejs.org) provides built-in TypeScript tooling support.++## Official Declaration in NPM Packages++A static type system can help prevent many potential runtime errors, especially as applications grow. That's why Vue is written in TypeScript. This means you don't need any additional tooling to use TypeScript with Vue - it has a first-class citizen support++## Recommended Configuration++```js+// tsconfig.json+{+  "compilerOptions": {+    "target": "esnext",+    "module": "esnext",+    // this enables stricter inference for data properties on `this`+    "strict": true,+    "moduleResolution": "node"+  }+}+```++Note that you have to include `strict: true` (or at least `noImplicitThis: true` which is a part of `strict` flag) to leverage type checking of `this` in component methods otherwise it is always treated as `any` type.++See [TypeScript compiler options docs](https://www.typescriptlang.org/docs/handbook/compiler-options.html) for more details.++## Development Tooling++### Project Creation++[Vue CLI](https://github.com/vuejs/vue-cli) can generate new projects that use TypeScript. To get started:++```bash+# 1. Install Vue CLI, if it's not already installed+npm install --global @vue/cli@next++# 2. Create a new project, then choose the "Manually select features" option+vue create my-project-name++# If you already have a Vue CLI project without TypeScript, please add a proper Vue CLI plugin:+vue add typescript+```++Make sure that `script` part of the component has TypeScript set as a language:++```html+<script lang="ts">+  ...+</script>+```++### Editor Support++For developing Vue applications with TypeScript, we strongly recommend using [Visual Studio Code](https://code.visualstudio.com/), which provides great out-of-the-box support for TypeScript. If you are using [single-file components](./single-file-components.html) (SFCs), get the awesome [Vetur extension](https://github.com/vuejs/vetur), which provides TypeScript inference inside SFCs and many other great features.++[WebStorm](https://www.jetbrains.com/webstorm/) also provides out-of-the-box support for both TypeScript and Vue.++## Defining Vue components++To let TypeScript properly infer types inside Vue component options, you need to define components with `defineComponent` global method:++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  // type inference enabled+})+```++## Using with Options API++TypeScript should be able to infer most of the types without defining types explicitly. For example, if you have a component with a number `count` property, you will have an error if you try to call a string-specific method on it:++```ts+const Component = defineComponent({+  data() {+    return {+      count: 0+    }+  },+  mounted() {+    const result = this.count.split('') // => Property 'split' does not exist on type 'number'+  }+})+```++If you have a complex type or interface, you can cast it using [type assertion](https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions):++```ts+interface Book {+  title: string+  author: string+  year: number+}++const Component = defineComponent({+  data() {+    return {+      book: {+        title: 'Vue 3 Guide',+        author: 'Vue Team',+        year: 2020+      } as Book+    }+  }+})+```++### Annotating Return Types++Because of the circular nature of Vue’s declaration files, TypeScript may have difficulties inferring the types of computed. For this reason, you may need to annotate the return type computed properties.++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  data() {+    return {+      message: 'Hello!'+    }+  },+  computed: {+    // needs an annotation+    greeting(): string {+      return this.message + '!'+    }++    // in a computed with a setter, getter needs to be annotated+    greetingUppercased: {+      get(): string {+        return this.greeting.toUpperCase();+      },+      set(newValue: string) {+        this.message = newValue.toUpperCase();+      },+    },+  }+})+```++### Annotating Props++Vue does a runtime validation on props with a `type` defined. To provide these types to TypeScript, we need to cast the constructor with `PropType`:++```ts+import { defineComponent, PropType } from 'vue'++interface ComplexMessage {+  title: string+  okMessage: string+  cancelMessage: string+}+const Component = defineComponent({+  props: {+    name: String,+    success: { type: String },+    callback: {+      type: Function as PropType<() => void>+    },+    message: {+      type: Object as PropType<ComplexMessage>,+      required: true,+      validator(message: ComplexMessage) {+        return !!message.title+      }+    }+  }+})+```++If you find validator not getting type inference or member completion isn’t working, annotating the argument with the expected type may help address these problems.++## Using with Composition API++On `setup()` function, you don't need to pass a typing to `props` parameter as it will infer types from `props` component option.++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  props: {+    message: {+      type: String,+      required: true+    }+  },++  setup(props) {+    const result = props.message.split('') // correct, 'message' is typed as a string+    const filtered = props.message.filter(p => p.value) // an error will be thrown: Property 'filter' does not exist on type 'string'+  }+})+```++### Typing `ref`s++To type a ref, we need to specify a type when calling `ref()` method:++```ts+import { defineComponent, ref } from 'vue'++const Component = defineComponent({+  setup() {+    const year = ref<number>(2020)+  }+})+```++Sometimes we may need to specify complex types for a ref's inner value. We can do that succinctly by passing a generics argument when calling ref to override the default inference:++```ts+const year = ref<string | number>('2020') // year's type: Ref<string | number>++year.value = 2020 // ok!+```++If the type of the generic is unknown, it's recommended to cast `ref` to `Ref<T>`:++```ts+function useState<State extends string>(initial: State) {+  const state = ref(initial) as Ref<State> // state.value -> State extends string+  return state+}+```++### Typing `reactive`++Similarly to `ref`, we can define a `reactive` type on method call:

Do you want to throw error?

NataliaTepluhina

comment created time in 15 days

push eventpikax/vue-composable

dependabot-preview[bot]

commit sha 8f3217ff17fb24a6892772443e18591d25d34dd7

build(deps-dev): bump webpack from 4.43.0 to 4.44.0 (#476)

view details

dependabot-preview[bot]

commit sha a0aa73171076703636d2ebfaef0a4fc0801c27c1

build(deps-dev): bump css-loader from 3.6.0 to 4.0.0 (#478)

view details

dependabot-preview[bot]

commit sha f725718d4dd1c46d373521dc3748311cda22ba20

build(deps-dev): bump jest-junit from 11.0.1 to 11.1.0 (#479)

view details

dependabot-preview[bot]

commit sha 435867fe96691fcab294533571990c2e85b8e5cb

build(deps-dev): bump @types/node from 14.0.25 to 14.0.26 (#477)

view details

pikax

commit sha 78cf87e5590c51fd3b37d32475d2aa61c3f5281b

Merge branch 'master' into feat/scrollLock # Conflicts: # yarn.lock

view details

push time in 15 days

push eventpikax/vue-composable

pikax

commit sha 30f7a2c1964ebfaacdf22e3925b9adf679abf4ed

chore: add docs

view details

push time in 15 days

push eventpikax/vue-composable

dependabot-preview[bot]

commit sha d449d4782b33f1b0ad29c5732840a568a24266aa

build(deps-dev): bump rollup from 2.17.1 to 2.18.0 (#384)

view details

dependabot-preview[bot]

commit sha 7e788d6b1526da8f8fcf2551edaf8c68bd733351

build(deps-dev): bump @vue/composition-api from 0.6.4 to 0.6.6 (#385)

view details

dependabot-preview[bot]

commit sha ef276614351f2ca2be8a719c7e0fc932be2ad28d

build(deps-dev): bump jest-junit from 10.0.0 to 11.0.0 (#386)

view details

dependabot-preview[bot]

commit sha 68eadf315712d1c04f3160db0281b2d60b32e52f

build(deps-dev): bump jest-junit from 11.0.0 to 11.0.1 (#387)

view details

dependabot-preview[bot]

commit sha d817202fed7540e364cbd5fec595b1877c593d5b

build(deps-dev): bump @rollup/plugin-node-resolve from 8.0.1 to 8.1.0 (#389)

view details

dependabot-preview[bot]

commit sha 715e77216798f87cbc91e995242a4d08d9ddd64f

build(deps-dev): bump @vue/cli-service from 4.4.4 to 4.4.5 (#388)

view details

dependabot-preview[bot]

commit sha fba1a9b034a3363e44ac6f20676b097f3bb4bdc9

build(deps-dev): bump ts-jest from 26.1.0 to 26.1.1 (#390)

view details

dependabot-preview[bot]

commit sha 672204f0aa3d6315558e9a53a90be51ac033fb7a

build(deps-dev): bump @vue/cli-plugin-babel from 4.4.4 to 4.4.5 (#391)

view details

dependabot-preview[bot]

commit sha 5f9f7de24496137bebe374d7592487a2bd2b5c16

build(deps-dev): bump @vue/cli-plugin-babel from 4.4.5 to 4.4.6 (#392)

view details

dependabot-preview[bot]

commit sha 61face4c9fb25b8ada2a321332247ba5e558c00c

build(deps-dev): bump vue-loader from 16.0.0-beta.3 to 16.0.0-beta.4 (#395)

view details

dependabot-preview[bot]

commit sha ff53fd88fc72f8dea5d5baf86396e16b4d7b0918

build(deps-dev): bump @vue/cli-service from 4.4.5 to 4.4.6 (#394)

view details

dependabot-preview[bot]

commit sha 48cbb35fb117785bbe701d6f76bc7d4bccc685e5

build(deps-dev): bump jest from 26.0.1 to 26.1.0 (#393)

view details

dependabot-preview[bot]

commit sha 98c031b463c4baeb8909e7804335b177aadee86f

build(deps-dev): bump @types/jest from 26.0.0 to 26.0.3 (#396)

view details

dependabot-preview[bot]

commit sha 49c0b69947949c56bc8f996c6f9b1e411bd48e7c

build(deps-dev): bump @types/node from 14.0.13 to 14.0.14 (#399)

view details

dependabot-preview[bot]

commit sha ae16ce441361bc2d482dfbeb98dbbf7bf4b738a8

build(deps-dev): bump @microsoft/api-extractor from 7.8.12 to 7.8.15 (#398)

view details

dependabot-preview[bot]

commit sha 39646af48d77876d0e89f0ff69c280e04772ec47

build(deps-dev): bump @vue/composition-api from 0.6.6 to 0.6.7 (#397)

view details

dependabot-preview[bot]

commit sha ec5e5c0ec281614cb49d34f608dffe72fe8a5323

build(deps-dev): bump rollup from 2.18.0 to 2.18.1 (#400)

view details

dependabot-preview[bot]

commit sha 17f06542959ca3f128695922e2e68c21bd2c3e35

build(deps-dev): bump tsd from 0.11.0 to 0.12.0 (#401)

view details

dependabot-preview[bot]

commit sha 88a41c52b972d69aa2cc2a7b2543746c82fa0627

build(deps-dev): bump rollup from 2.18.1 to 2.18.2 (#406)

view details

dependabot-preview[bot]

commit sha e46d7add5524bc1d038dea6dddb34c22c55f47ba

build(deps-dev): bump typescript from 3.9.5 to 3.9.6 (#407)

view details

push time in 15 days

Pull request review commentvuejs/docs-next

TypeScript section

+# TypeScript Support++> [Vue CLI](https://cli.vuejs.org) provides built-in TypeScript tooling support.++## Official Declaration in NPM Packages++A static type system can help prevent many potential runtime errors, especially as applications grow. That's why Vue is written in TypeScript. This means you don't need any additional tooling to use TypeScript with Vue - it has a first-class citizen support++## Recommended Configuration++```js+// tsconfig.json+{+  "compilerOptions": {+    "target": "esnext",+    "module": "esnext",+    // this enables stricter inference for data properties on `this`+    "strict": true,+    "moduleResolution": "node"+  }+}+```++Note that you have to include `strict: true` (or at least `noImplicitThis: true` which is a part of `strict` flag) to leverage type checking of `this` in component methods otherwise it is always treated as `any` type.++See [TypeScript compiler options docs](https://www.typescriptlang.org/docs/handbook/compiler-options.html) for more details.++## Development Tooling++### Project Creation++[Vue CLI](https://github.com/vuejs/vue-cli) can generate new projects that use TypeScript. To get started:++```bash+# 1. Install Vue CLI, if it's not already installed+npm install --global @vue/cli@next++# 2. Create a new project, then choose the "Manually select features" option+vue create my-project-name++# If you already have a Vue CLI project without TypeScript, please add a proper Vue CLI plugin:+vue add typescript+```++Make sure that `script` part of the component has TypeScript set as a language:++```html+<script lang="ts">+  ...+</script>+```++### Editor Support++For developing Vue applications with TypeScript, we strongly recommend using [Visual Studio Code](https://code.visualstudio.com/), which provides great out-of-the-box support for TypeScript. If you are using [single-file components](./single-file-components.html) (SFCs), get the awesome [Vetur extension](https://github.com/vuejs/vetur), which provides TypeScript inference inside SFCs and many other great features.++[WebStorm](https://www.jetbrains.com/webstorm/) also provides out-of-the-box support for both TypeScript and Vue.++## Defining Vue components++To let TypeScript properly infer types inside Vue component options, you need to define components with `defineComponent` global method:++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  // type inference enabled+})+```++## Using with Options API++TypeScript should be able to infer most of the types without defining types explicitly. For example, if you have a component with a number `count` property, you will have an error if you try to call a string-specific method on it:++```ts+const Component = defineComponent({+  data() {+    return {+      count: 0+    }+  },+  mounted() {+    const result = this.count.split('') // => Property 'split' does not exist on type 'number'+  }+})+```++If you have a complex type or interface, you can cast it using [type assertion](https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions):++```ts+interface Book {+  title: string+  author: string+  year: number+}++const Component = defineComponent({+  data() {+    return {+      book: {+        title: 'Vue 3 Guide',+        author: 'Vue Team',+        year: 2020+      } as Book+    }+  }+})+```++### Annotating Return Types++Because of the circular nature of Vue’s declaration files, TypeScript may have difficulties inferring the types of computed. For this reason, you may need to annotate the return type computed properties.++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  data() {+    return {+      message: 'Hello!'+    }+  },+  computed: {+    // needs an annotation+    greeting(): string {+      return this.message + '!'+    }++    // in a computed with a setter, getter needs to be annotated+    greetingUppercased: {+      get(): string {+        return this.greeting.toUpperCase();+      },+      set(newValue: string) {+        this.message = newValue.toUpperCase();+      },+    },+  }+})+```++### Annotating Props++Vue does a runtime validation on props with a `type` defined. To provide these types to TypeScript, we need to cast the constructor with `PropType`:++```ts+import { defineComponent, PropType } from 'vue'++interface ComplexMessage {+  title: string+  okMessage: string+  cancelMessage: string+}+const Component = defineComponent({+  props: {+    name: String,+    success: { type: String },+    callback: {+      type: Function as PropType<() => void>+    },+    message: {+      type: Object as PropType<ComplexMessage>,+      required: true,+      validator(message: ComplexMessage) {+        return !!message.title+      }+    }+  }+})+```++If you find validator not getting type inference or member completion isn’t working, annotating the argument with the expected type may help address these problems.++## Using with Composition API++On `setup()` function, you don't need to pass a typing to `props` parameter as it will infer types from `props` component option.++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  props: {+    message: {+      type: String,+      required: true+    }+  },++  setup(props) {+    const result = props.message.split('') // correct, 'message' is typed as a string+    const filtered = props.message.filter(p => p.value) // an error will be thrown: Property 'filter' does not exist on type 'string'+  }+})+```++### Typing `ref`s++To type a ref, we need to specify a type when calling `ref()` method:++```ts+import { defineComponent, ref } from 'vue'++const Component = defineComponent({+  setup() {+    const year = ref<number>(2020)+  }+})+```++Sometimes we may need to specify complex types for a ref's inner value. We can do that succinctly by passing a generics argument when calling ref to override the default inference:++```ts+const year = ref<string | number>('2020') // year's type: Ref<string | number>++year.value = 2020 // ok!+```++If the type of the generic is unknown, it's recommended to cast `ref` to `Ref<T>`:++```ts+function useState<State extends string>(initial: State) {+  const state = ref(initial) as Ref<State> // state.value -> State extends string+  return state+}+```++### Typing `reactive`++Similarly to `ref`, we can define a `reactive` type on method call:

I would change the example to:

const book: Book = reactive({ title: "Vue 3 Guide", year: ref(20)});
NataliaTepluhina

comment created time in 16 days

Pull request review commentvuejs/docs-next

TypeScript section

+# TypeScript Support++> [Vue CLI](https://cli.vuejs.org) provides built-in TypeScript tooling support.++## Official Declaration in NPM Packages++A static type system can help prevent many potential runtime errors, especially as applications grow. That's why Vue is written in TypeScript. This means you don't need any additional tooling to use TypeScript with Vue - it has a first-class citizen support++## Recommended Configuration++```js+// tsconfig.json+{+  "compilerOptions": {+    "target": "esnext",+    "module": "esnext",+    // this enables stricter inference for data properties on `this`+    "strict": true,+    "moduleResolution": "node"+  }+}+```++Note that you have to include `strict: true` (or at least `noImplicitThis: true` which is a part of `strict` flag) to leverage type checking of `this` in component methods otherwise it is always treated as `any` type.++See [TypeScript compiler options docs](https://www.typescriptlang.org/docs/handbook/compiler-options.html) for more details.++## Development Tooling++### Project Creation++[Vue CLI](https://github.com/vuejs/vue-cli) can generate new projects that use TypeScript. To get started:++```bash+# 1. Install Vue CLI, if it's not already installed+npm install --global @vue/cli@next++# 2. Create a new project, then choose the "Manually select features" option+vue create my-project-name++# If you already have a Vue CLI project without TypeScript, please add a proper Vue CLI plugin:+vue add typescript+```++Make sure that `script` part of the component has TypeScript set as a language:++```html+<script lang="ts">+  ...+</script>+```++### Editor Support++For developing Vue applications with TypeScript, we strongly recommend using [Visual Studio Code](https://code.visualstudio.com/), which provides great out-of-the-box support for TypeScript. If you are using [single-file components](./single-file-components.html) (SFCs), get the awesome [Vetur extension](https://github.com/vuejs/vetur), which provides TypeScript inference inside SFCs and many other great features.++[WebStorm](https://www.jetbrains.com/webstorm/) also provides out-of-the-box support for both TypeScript and Vue.++## Defining Vue components++To let TypeScript properly infer types inside Vue component options, you need to define components with `defineComponent` global method:++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  // type inference enabled+})+```++## Using with Options API++TypeScript should be able to infer most of the types without defining types explicitly. For example, if you have a component with a number `count` property, you will have an error if you try to call a string-specific method on it:++```ts+const Component = defineComponent({+  data() {+    return {+      count: 0+    }+  },+  mounted() {+    const result = this.count.split('') // => Property 'split' does not exist on type 'number'+  }+})+```++If you have a complex type or interface, you can cast it using [type assertion](https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions):++```ts+interface Book {+  title: string+  author: string+  year: number+}++const Component = defineComponent({+  data() {+    return {+      book: {+        title: 'Vue 3 Guide',+        author: 'Vue Team',+        year: 2020+      } as Book+    }+  }+})+```++### Annotating Return Types++Because of the circular nature of Vue’s declaration files, TypeScript may have difficulties inferring the types of computed. For this reason, you may need to annotate the return type computed properties.++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  data() {+    return {+      message: 'Hello!'+    }+  },+  computed: {+    // needs an annotation+    greeting(): string {+      return this.message + '!'+    }++    // in a computed with a setter, getter needs to be annotated+    greetingUppercased: {+      get(): string {+        return this.greeting.toUpperCase();+      },+      set(newValue: string) {+        this.message = newValue.toUpperCase();+      },+    },+  }+})+```++### Annotating Props++Vue does a runtime validation on props with a `type` defined. To provide these types to TypeScript, we need to cast the constructor with `PropType`:++```ts+import { defineComponent, PropType } from 'vue'++interface ComplexMessage {+  title: string+  okMessage: string+  cancelMessage: string+}+const Component = defineComponent({+  props: {+    name: String,+    success: { type: String },+    callback: {+      type: Function as PropType<() => void>+    },+    message: {+      type: Object as PropType<ComplexMessage>,+      required: true,+      validator(message: ComplexMessage) {+        return !!message.title+      }+    }+  }+})+```++If you find validator not getting type inference or member completion isn’t working, annotating the argument with the expected type may help address these problems.++## Using with Composition API++On `setup()` function, you don't need to pass a typing to `props` parameter as it will infer types from `props` component option.++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  props: {+    message: {+      type: String,+      required: true+    }+  },++  setup(props) {+    const result = props.message.split('') // correct, 'message' is typed as a string+    const filtered = props.message.filter(p => p.value) // an error will be thrown: Property 'filter' does not exist on type 'string'+  }+})+```++### Typing `ref`s++To type a ref, we need to specify a type when calling `ref()` method:++```ts+import { defineComponent, ref } from 'vue'++const Component = defineComponent({+  setup() {+    const year = ref<number>(2020)+  }+})+```++Sometimes we may need to specify complex types for a ref's inner value. We can do that succinctly by passing a generics argument when calling ref to override the default inference:++```ts+const year = ref<string | number>('2020') // year's type: Ref<string | number>++year.value = 2020 // ok!+```++If the type of the generic is unknown, it's recommended to cast `ref` to `Ref<T>`:++```ts+function useState<State extends string>(initial: State) {+  const state = ref(initial) as Ref<State> // state.value -> State extends string+  return state+}+```++### Typing `reactive`++Similarly to `ref`, we can define a `reactive` type on method call:

Yes, there's unwrapping when you use reactive.

Also when you assign a ref to a value in reactive it will unwrap, but unfortunate we can't do it in typescript because it doesn't allow us to define a setter with a different type from getter https://github.com/microsoft/TypeScript/issues/2521

NataliaTepluhina

comment created time in 16 days

push eventpikax/vue-composable

Carlos Rodrigues

commit sha b3e4e19666f70cea971da31ef782aaf730177ea4

release: v1.0.0-dev.35

view details

Carlos Rodrigues

commit sha 2873c1e1d66a600a8d857050f982f872d4279507

types(useStorage): fix overload of useStorage/useLocalStorage/useSessionStorage fix #365

view details

Carlos Rodrigues

commit sha e52dadbb28293b1ae4e9c2e93c528afaa923535a

fix(useOnResize): allow to retrieve the size on mount if ref is passed fix #364

view details

Carlos Rodrigues

commit sha 2337ef2e992a7a78837b25126bdabf36fc1f444b

types(useMouseMove): improve typings when using ref

view details

Carlos Rodrigues

commit sha 0ef6333d59b587980f627e26be2159a85fa78e2f

types(useOnScroll): improve typings when using ref

view details

Carlos Rodrigues

commit sha 9fbb9d33deb7327d08aef7c982af23b532d09ac8

chore: fix build

view details

Carlos Rodrigues

commit sha 6f1a6ecfaf9eeed34ad724c284d96f4486a97b94

release: v1.0.0-dev.36

view details

Carlos Rodrigues

commit sha 8474d98b8f2011a3501a4a3f79e9cea4ea9edcbb

chore: remove logo message from readme

view details

dependabot-preview[bot]

commit sha f7b6dfd19a1af13f8e5e57350e00c155e4eccc2b

build(deps-dev): bump @vue/cli-service from 4.4.1 to 4.4.4 (#366)

view details

dependabot-preview[bot]

commit sha ea62d5efcb529feb77dce42c9e01bec37baf6ac6

build(deps-dev): bump @vue/composition-api from 0.6.2 to 0.6.3 (#369)

view details

dependabot-preview[bot]

commit sha f0aa480fca513cc115be541c2009fa35c8a939a8

build(deps-dev): bump lint-staged from 10.2.9 to 10.2.10 (#376)

view details

dependabot-preview[bot]

commit sha 78045da74d92752a0fbee89cb17893c856ffdf09

build(deps-dev): bump @vuepress/plugin-back-to-top from 1.5.1 to 1.5.2 (#371)

view details

dependabot-preview[bot]

commit sha 366b3741e7eadf9e54a3b371a1d3b349104e1235

build(deps-dev): bump vuepress from 1.5.1 to 1.5.2 (#374)

view details

dependabot-preview[bot]

commit sha 11aa9007279d0602a155d298fa605be9d9f75883

build(deps-dev): bump rollup from 2.15.0 to 2.16.1 (#373)

view details

dependabot-preview[bot]

commit sha 27c677645d25d0fbca11fc0cde86716bd64e6327

build(deps-dev): bump @vuepress/plugin-pwa from 1.5.1 to 1.5.2 (#370)

view details

dependabot-preview[bot]

commit sha 4b019dfcbb85e688569dc20f9ed09a1a9056bf41

build(deps-dev): bump @vue/compiler-sfc (#375)

view details

dependabot-preview[bot]

commit sha 167c4106762227db3c5486034a6d2369be134202

build(deps-dev): bump css-loader from 3.5.3 to 3.6.0 (#367)

view details

dependabot-preview[bot]

commit sha e3b20dc103dd32b0c3eca37df994d7cc3156e7d0

build(deps-dev): bump @vue/cli-plugin-babel from 4.4.1 to 4.4.4 (#372)

view details

dependabot-preview[bot]

commit sha 9c83164aca95c6dd61e20d180d3014d5b8c1fec9

build(deps-dev): bump @vue/runtime-core from 3.0.0-beta.14 to 3.0.0-beta.15 (#368)

view details

dependabot-preview[bot]

commit sha c437beebbe84389d38e64fa3d80b3a785abdabfc

build(deps-dev): bump @vue/composition-api from 0.6.3 to 0.6.4 (#377)

view details

push time in 16 days

push eventpikax/vue-composable

pikax

commit sha d4b2fa106432bcaccffc7839b7bfe93af3e33c8a

chore: add tests

view details

push time in 16 days

push eventpikax/vue-composable

pikax

commit sha 7734778326d852d77ec060614dcf78bf0c010a4b

chore: improve useInterval

view details

pikax

commit sha 0cf6cee4f2ce264443e810f2d51d95e55520921b

chore: improve typings

view details

push time in 17 days

push eventpikax/vue-composable

Carlos Rodrigues

commit sha 90200c3a2a0a41c67668fb844b05f9432b7a582f

chore: add github funding [ci skip]

view details

dependabot-preview[bot]

commit sha 1f35defbe2526f1bb398930daa39d699da087a88

build(deps-dev): bump @types/node from 14.0.10 to 14.0.11 (#344)

view details

dependabot-preview[bot]

commit sha 859ff1275b950eb6ebeef7d57436944fc4f42f9b

build(deps-dev): bump lint-staged from 10.2.8 to 10.2.9 (#345)

view details

dependabot-preview[bot]

commit sha 1540688013a1edb72a7741de607208e87293b56a

build(deps-dev): bump typescript from 3.9.3 to 3.9.5 (#346)

view details

dependabot-preview[bot]

commit sha 289905673b437558657ab64081ebe7374f191710

build(deps-dev): bump rollup from 2.13.1 to 2.15.0 (#351)

view details

dependabot-preview[bot]

commit sha 4a9efa9d5aa6dfb8e3772d940e610393ed4d73be

build(deps-dev): bump @rollup/plugin-json from 4.0.3 to 4.1.0 (#352)

view details

dependabot-preview[bot]

commit sha 8b34ea7722f74f0f4c96e037cdda007f7a536c8e

build(deps-dev): bump @rollup/plugin-replace from 2.3.2 to 2.3.3 (#354)

view details

dependabot-preview[bot]

commit sha 39dad54ad001e1e4ff2f325ee35e123f5114ead7

build(deps-dev): bump @rollup/plugin-node-resolve from 8.0.0 to 8.0.1 (#353)

view details

Carlos Rodrigues

commit sha c554c55942a8730a9ff1b764c610e7589c419db9

feat(@vue/composition-api): updated to 0.6.0

view details

Carlos Rodrigues

commit sha 401e11811de4e66e9dc540c0f5bb22e40346f9a1

chore: fix docs build

view details

Carlos Rodrigues

commit sha f8ca08a1912684c5896aec6d2769e684e773e6db

chore: bump composition-api to 0.6.1

view details

dependabot-preview[bot]

commit sha 3d3ea49771fc888c12396288b667c759b279d535

build(deps-dev): bump @types/node from 14.0.11 to 14.0.12 (#355)

view details

dependabot-preview[bot]

commit sha 07b2ca1e06dfc16cf9339e9206931c6b0de9aca9

build(deps-dev): bump vuepress from 1.5.0 to 1.5.1 (#357)

view details

dependabot-preview[bot]

commit sha 953b3968155b1a82e7d42025a6252468507487c6

build(deps-dev): bump chalk from 4.0.0 to 4.1.0 (#359)

view details

dependabot-preview[bot]

commit sha 449d54fd574b8942a3db7e8f457f159a9ae354db

build(deps-dev): bump @vuepress/plugin-back-to-top from 1.5.0 to 1.5.1 (#358)

view details

dependabot-preview[bot]

commit sha a565eca493e2cf9e90fda4f62e104216408d5e4d

build(deps-dev): bump @vuepress/plugin-pwa from 1.5.0 to 1.5.1 (#356)

view details

dependabot-preview[bot]

commit sha c8ccb6280d4d9e5c73bd991b74b5ecbcbfa80ff7

build(deps-dev): bump @types/node from 14.0.12 to 14.0.13 (#360)

view details

dependabot-preview[bot]

commit sha 2a1a39ff2a8de15434844f62863db1950df9b770

build(deps-dev): bump @types/jest from 25.2.3 to 26.0.0 (#361)

view details

dependabot[bot]

commit sha 4a1ed2c72f690e578f4bada41aca6736ff1f56a5

build(deps): bump websocket-extensions (#350)

view details

dependabot[bot]

commit sha a01a598a7c29057d6908986ca29b6f6826bc381f

build(deps): bump websocket-extensions (#349)

view details

push time in 17 days

Pull request review commentvuejs/docs-next

TypeScript section

+# TypeScript Support++> [Vue CLI](https://cli.vuejs.org) provides built-in TypeScript tooling support.++## Official Declaration in NPM Packages++A static type system can help prevent many potential runtime errors, especially as applications grow. That's why Vue is written in TypeScript. This means you don't need any additional tooling to use TypeScript with Vue - it has a first-class citizen support++## Recommended Configuration++```js+// tsconfig.json+{+  "compilerOptions": {+    "target": "esnext",+    "module": "esnext",+    // this enables stricter inference for data properties on `this`+    "strict": true,+    "moduleResolution": "node"+  }+}+```++Note that you have to include `strict: true` (or at least `noImplicitThis: true` which is a part of `strict` flag) to leverage type checking of `this` in component methods otherwise it is always treated as `any` type.++See [TypeScript compiler options docs](https://www.typescriptlang.org/docs/handbook/compiler-options.html) for more details.++## Development Tooling++### Project Creation++[Vue CLI](https://github.com/vuejs/vue-cli) can generate new projects that use TypeScript. To get started:++```bash+# 1. Install Vue CLI, if it's not already installed+npm install --global @vue/cli@next++# 2. Create a new project, then choose the "Manually select features" option+vue create my-project-name++# If you already have a Vue CLI project without TypeScript, please add a proper Vue CLI plugin:+vue add typescript+```++Make sure that `script` part of the component has TypeScript set as a language:++```html+<script lang="ts">+  ...+</script>+```++### Editor Support++For developing Vue applications with TypeScript, we strongly recommend using [Visual Studio Code](https://code.visualstudio.com/), which provides great out-of-the-box support for TypeScript. If you are using [single-file components](./single-file-components.html) (SFCs), get the awesome [Vetur extension](https://github.com/vuejs/vetur), which provides TypeScript inference inside SFCs and many other great features.++[WebStorm](https://www.jetbrains.com/webstorm/) also provides out-of-the-box support for both TypeScript and Vue.++## Defining Vue components++To let TypeScript properly infer types inside Vue component options, you need to define components with `defineComponent` global method:++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  // type inference enabled+})+```++## Using with Options API++TypeScript should be able to infer most of the types without defining types explicitly. For example, if you have a component with a number `count` property, you will have an error if you try to call a string-specific method on it:++```ts+const Component = defineComponent({+  data() {+    return {+      count: 0+    }+  },+  mounted() {+    const result = this.count.split('') // => Property 'split' does not exist on type 'number'+  }+})+```++If you have a complex type or interface, you can cast it using [type assertion](https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions):++```ts+interface Book {+  title: string+  author: string+  year: number+}++const Component = defineComponent({+  data() {+    return {+      book: {+        title: 'Vue 3 Guide',+        author: 'Vue Team',+        year: 2020+      } as Book+    }+  }+})+```++### Annotating Return Types++Because of the circular nature of Vue’s declaration files, TypeScript may have difficulties inferring the types of computed. For this reason, you may need to annotate the return type computed properties.++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  data() {+    return {+      message: 'Hello!'+    }+  },+  computed: {+    // needs an annotation+    greeting(): string {+      return this.message + '!'+    }++    // in a computed with a setter, getter needs to be annotated+    greetingUppercased: {+      get(): string {+        return this.greeting.toUpperCase();+      },+      set(newValue: string) {+        this.message = newValue.toUpperCase();+      },+    },+  }+})+```++### Annotating Props++Vue does a runtime validation on props with a `type` defined. To provide these types to TypeScript, we need to cast the constructor with `PropType`:++```ts+import { defineComponent, PropType } from 'vue'++interface ComplexMessage {+  title: string+  okMessage: string+  cancelMessage: string+}+const Component = defineComponent({+  props: {+    name: String,+    success: { type: String },+    callback: {+      type: Function as PropType<() => void>+    },+    message: {+      type: Object as PropType<ComplexMessage>,+      required: true,+      validator(message: ComplexMessage) {+        return !!message.title+      }+    }+  }+})+```++If you find validator not getting type inference or member completion isn’t working, annotating the argument with the expected type may help address these problems.++## Using with Composition API++On `setup()` function, you don't need to pass a typing to `props` parameter as it will infer types from `props` component option.++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  props: {+    message: {+      type: String,+      required: true+    }+  },++  setup(props) {+    const result = props.message.split('') // correct, 'message' is typed as a string+    const filtered = props.message.filter(p => p.value) // an error will be thrown: Property 'filter' does not exist on type 'string'+  }+})+```++### Typing `ref`s++To type a ref, we need to specify a type when calling `ref()` method:++```ts+import { defineComponent, ref } from 'vue'++const Component = defineComponent({+  setup() {+    const year = ref<number>(2020)
    const year = ref(2020) // equivalent to ref<number>(2020)

In this cases ref should infer the type

NataliaTepluhina

comment created time in 17 days

Pull request review commentvuejs/docs-next

TypeScript section

+# TypeScript Support++> [Vue CLI](https://cli.vuejs.org) provides built-in TypeScript tooling support.++## Official Declaration in NPM Packages++A static type system can help prevent many potential runtime errors, especially as applications grow. That's why Vue is written in TypeScript. This means you don't need any additional tooling to use TypeScript with Vue - it has a first-class citizen support++## Recommended Configuration++```js+// tsconfig.json+{+  "compilerOptions": {+    "target": "esnext",+    "module": "esnext",+    // this enables stricter inference for data properties on `this`+    "strict": true,+    "moduleResolution": "node"+  }+}+```++Note that you have to include `strict: true` (or at least `noImplicitThis: true` which is a part of `strict` flag) to leverage type checking of `this` in component methods otherwise it is always treated as `any` type.++See [TypeScript compiler options docs](https://www.typescriptlang.org/docs/handbook/compiler-options.html) for more details.++## Development Tooling++### Project Creation++[Vue CLI](https://github.com/vuejs/vue-cli) can generate new projects that use TypeScript. To get started:++```bash+# 1. Install Vue CLI, if it's not already installed+npm install --global @vue/cli@next++# 2. Create a new project, then choose the "Manually select features" option+vue create my-project-name++# If you already have a Vue CLI project without TypeScript, please add a proper Vue CLI plugin:+vue add typescript+```++Make sure that `script` part of the component has TypeScript set as a language:++```html+<script lang="ts">+  ...+</script>+```++### Editor Support++For developing Vue applications with TypeScript, we strongly recommend using [Visual Studio Code](https://code.visualstudio.com/), which provides great out-of-the-box support for TypeScript. If you are using [single-file components](./single-file-components.html) (SFCs), get the awesome [Vetur extension](https://github.com/vuejs/vetur), which provides TypeScript inference inside SFCs and many other great features.++[WebStorm](https://www.jetbrains.com/webstorm/) also provides out-of-the-box support for both TypeScript and Vue.++## Defining Vue components++To let TypeScript properly infer types inside Vue component options, you need to define components with `defineComponent` global method:++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  // type inference enabled+})+```++## Using with Options API++TypeScript should be able to infer most of the types without defining types explicitly. For example, if you have a component with a number `count` property, you will have an error if you try to call a string-specific method on it:++```ts+const Component = defineComponent({+  data() {+    return {+      count: 0+    }+  },+  mounted() {+    const result = this.count.split('') // => Property 'split' does not exist on type 'number'+  }+})+```++If you have a complex type or interface, you can cast it using [type assertion](https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions):++```ts+interface Book {+  title: string+  author: string+  year: number+}++const Component = defineComponent({+  data() {+    return {+      book: {+        title: 'Vue 3 Guide',+        author: 'Vue Team',+        year: 2020+      } as Book+    }+  }+})+```++### Annotating Return Types++Because of the circular nature of Vue’s declaration files, TypeScript may have difficulties inferring the types of computed. For this reason, you may need to annotate the return type computed properties.++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  data() {+    return {+      message: 'Hello!'+    }+  },+  computed: {+    // needs an annotation+    greeting(): string {+      return this.message + '!'+    }++    // in a computed with a setter, getter needs to be annotated+    greetingUppercased: {+      get(): string {+        return this.greeting.toUpperCase();+      },+      set(newValue: string) {+        this.message = newValue.toUpperCase();+      },+    },+  }+})+```++### Annotating Props++Vue does a runtime validation on props with a `type` defined. To provide these types to TypeScript, we need to cast the constructor with `PropType`:++```ts+import { defineComponent, PropType } from 'vue'++interface ComplexMessage {+  title: string+  okMessage: string+  cancelMessage: string+}+const Component = defineComponent({+  props: {+    name: String,+    success: { type: String },+    callback: {+      type: Function as PropType<() => void>+    },+    message: {+      type: Object as PropType<ComplexMessage>,+      required: true,+      validator(message: ComplexMessage) {+        return !!message.title+      }+    }+  }+})+```++If you find validator not getting type inference or member completion isn’t working, annotating the argument with the expected type may help address these problems.++## Using with Composition API++On `setup()` function, you don't need to pass a typing to `props` parameter as it will infer types from `props` component option.++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  props: {+    message: {+      type: String,+      required: true+    }+  },++  setup(props) {+    const result = props.message.split('') // correct, 'message' is typed as a string+    const filtered = props.message.filter(p => p.value) // an error will be thrown: Property 'filter' does not exist on type 'string'+  }+})+```++### Typing `ref`s++To type a ref, we need to specify a type when calling `ref()` method:++```ts+import { defineComponent, ref } from 'vue'++const Component = defineComponent({+  setup() {+    const year = ref<number>(2020)+  }+})+```++Sometimes we may need to specify complex types for a ref's inner value. We can do that succinctly by passing a generics argument when calling ref to override the default inference:++```ts+const year = ref<string | number>('2020') // year's type: Ref<string | number>++year.value = 2020 // ok!+```++If the type of the generic is unknown, it's recommended to cast `ref` to `Ref<T>`:++```ts+function useState<State extends string>(initial: State) {+  const state = ref(initial) as Ref<State> // state.value -> State extends string+  return state+}+```++### Typing `reactive`++Similarly to `ref`, we can define a `reactive` type on method call:

Probably we can mention that reactive should have the same type as the argument, only if there's unwrapped ref, that's when the types will be different

NataliaTepluhina

comment created time in 17 days

Pull request review commentvuejs/docs-next

TypeScript section

+# TypeScript Support++> [Vue CLI](https://cli.vuejs.org) provides built-in TypeScript tooling support.++## Official Declaration in NPM Packages++A static type system can help prevent many potential runtime errors, especially as applications grow. That's why Vue is written in TypeScript. This means you don't need any additional tooling to use TypeScript with Vue - it has a first-class citizen support++## Recommended Configuration++```js+// tsconfig.json+{+  "compilerOptions": {+    "target": "esnext",+    "module": "esnext",+    // this enables stricter inference for data properties on `this`+    "strict": true,+    "moduleResolution": "node"+  }+}+```++Note that you have to include `strict: true` (or at least `noImplicitThis: true` which is a part of `strict` flag) to leverage type checking of `this` in component methods otherwise it is always treated as `any` type.++See [TypeScript compiler options docs](https://www.typescriptlang.org/docs/handbook/compiler-options.html) for more details.++## Development Tooling++### Project Creation++[Vue CLI](https://github.com/vuejs/vue-cli) can generate new projects that use TypeScript. To get started:++```bash+# 1. Install Vue CLI, if it's not already installed+npm install --global @vue/cli@next++# 2. Create a new project, then choose the "Manually select features" option+vue create my-project-name++# If you already have a Vue CLI project without TypeScript, please add a proper Vue CLI plugin:+vue add typescript+```++Make sure that `script` part of the component has TypeScript set as a language:++```html+<script lang="ts">+  ...+</script>+```++### Editor Support++For developing Vue applications with TypeScript, we strongly recommend using [Visual Studio Code](https://code.visualstudio.com/), which provides great out-of-the-box support for TypeScript. If you are using [single-file components](./single-file-components.html) (SFCs), get the awesome [Vetur extension](https://github.com/vuejs/vetur), which provides TypeScript inference inside SFCs and many other great features.++[WebStorm](https://www.jetbrains.com/webstorm/) also provides out-of-the-box support for both TypeScript and Vue.++## Defining Vue components++To let TypeScript properly infer types inside Vue component options, you need to define components with `defineComponent` global method:++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  // type inference enabled+})+```++## Using with Options API++TypeScript should be able to infer most of the types without defining types explicitly. For example, if you have a component with a number `count` property, you will have an error if you try to call a string-specific method on it:++```ts+const Component = defineComponent({+  data() {+    return {+      count: 0+    }+  },+  mounted() {+    const result = this.count.split('') // => Property 'split' does not exist on type 'number'+  }+})+```++If you have a complex type or interface, you can cast it using [type assertion](https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions):++```ts+interface Book {+  title: string+  author: string+  year: number+}++const Component = defineComponent({+  data() {+    return {+      book: {+        title: 'Vue 3 Guide',+        author: 'Vue Team',+        year: 2020+      } as Book+    }+  }+})+```++### Annotating Return Types++Because of the circular nature of Vue’s declaration files, TypeScript may have difficulties inferring the types of computed. For this reason, you may need to annotate the return type computed properties.++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  data() {+    return {+      message: 'Hello!'+    }+  },+  computed: {+    // needs an annotation+    greeting(): string {+      return this.message + '!'+    }++    // in a computed with a setter, getter needs to be annotated+    greetingUppercased: {+      get(): string {+        return this.greeting.toUpperCase();+      },+      set(newValue: string) {+        this.message = newValue.toUpperCase();+      },+    },+  }+})+```++### Annotating Props++Vue does a runtime validation on props with a `type` defined. To provide these types to TypeScript, we need to cast the constructor with `PropType`:++```ts+import { defineComponent, PropType } from 'vue'++interface ComplexMessage {+  title: string+  okMessage: string+  cancelMessage: string+}+const Component = defineComponent({+  props: {+    name: String,+    success: { type: String },+    callback: {+      type: Function as PropType<() => void>+    },+    message: {+      type: Object as PropType<ComplexMessage>,+      required: true,+      validator(message: ComplexMessage) {+        return !!message.title+      }+    }+  }+})+```++If you find validator not getting type inference or member completion isn’t working, annotating the argument with the expected type may help address these problems.++## Using with Composition API++On `setup()` function, you don't need to pass a typing to `props` parameter as it will infer types from `props` component option.++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  props: {+    message: {+      type: String,+      required: true+    }+  },++  setup(props) {+    const result = props.message.split('') // correct, 'message' is typed as a string+    const filtered = props.message.filter(p => p.value) // an error will be thrown: Property 'filter' does not exist on type 'string'+  }+})+```++### Typing `ref`s++To type a ref, we need to specify a type when calling `ref()` method:++```ts+import { defineComponent, ref } from 'vue'++const Component = defineComponent({+  setup() {+    const year = ref<number>(2020)+  }+})+```++Sometimes we may need to specify complex types for a ref's inner value. We can do that succinctly by passing a generics argument when calling ref to override the default inference:++```ts+const year = ref<string | number>('2020') // year's type: Ref<string | number>++year.value = 2020 // ok!+```++If the type of the generic is unknown, it's recommended to cast `ref` to `Ref<T>`:++```ts+function useState<State extends string>(initial: State) {+  const state = ref(initial) as Ref<State> // state.value -> State extends string+  return state+}+```++### Typing `reactive`++Similarly to `ref`, we can define a `reactive` type on method call:++```ts+import { defineComponent, reactive } from 'vue'++interface Book {+  title: string+  year?: number+}++export default defineComponent({+  name: 'HelloWorld',+  setup() {+    const book = reactive<Book>({+      title: 'Vue 3 Guide'+    })+  }+})+```++### Typing `computed`++For computed, we could specify a type with getter only, or with getter and setter:++```ts+import { defineComponent, ref, computed } from "vue";++export default defineComponent({+  name: "HelloWorld",+  setup() {+    let count = ref<number>(0);

should we remove the <number> from this examples? because typescript will be able to infer the correct types in this setup.

NataliaTepluhina

comment created time in 17 days

Pull request review commentvuejs/docs-next

TypeScript section

+# TypeScript Support++> [Vue CLI](https://cli.vuejs.org) provides built-in TypeScript tooling support.++## Official Declaration in NPM Packages++A static type system can help prevent many potential runtime errors, especially as applications grow. That's why Vue is written in TypeScript. This means you don't need any additional tooling to use TypeScript with Vue - it has a first-class citizen support++## Recommended Configuration++```js+// tsconfig.json+{+  "compilerOptions": {+    "target": "esnext",+    "module": "esnext",+    // this enables stricter inference for data properties on `this`+    "strict": true,+    "moduleResolution": "node"+  }+}+```++Note that you have to include `strict: true` (or at least `noImplicitThis: true` which is a part of `strict` flag) to leverage type checking of `this` in component methods otherwise it is always treated as `any` type.++See [TypeScript compiler options docs](https://www.typescriptlang.org/docs/handbook/compiler-options.html) for more details.++## Development Tooling++### Project Creation++[Vue CLI](https://github.com/vuejs/vue-cli) can generate new projects that use TypeScript. To get started:++```bash+# 1. Install Vue CLI, if it's not already installed+npm install --global @vue/cli@next++# 2. Create a new project, then choose the "Manually select features" option+vue create my-project-name++# If you already have a Vue CLI project without TypeScript, please add a proper Vue CLI plugin:+vue add typescript+```++Make sure that `script` part of the component has TypeScript set as a language:++```html+<script lang="ts">+  ...+</script>+```++### Editor Support++For developing Vue applications with TypeScript, we strongly recommend using [Visual Studio Code](https://code.visualstudio.com/), which provides great out-of-the-box support for TypeScript. If you are using [single-file components](./single-file-components.html) (SFCs), get the awesome [Vetur extension](https://github.com/vuejs/vetur), which provides TypeScript inference inside SFCs and many other great features.++[WebStorm](https://www.jetbrains.com/webstorm/) also provides out-of-the-box support for both TypeScript and Vue.++## Defining Vue components++To let TypeScript properly infer types inside Vue component options, you need to define components with `defineComponent` global method:++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  // type inference enabled+})+```++## Using with Options API++TypeScript should be able to infer most of the types without defining types explicitly. For example, if you have a component with a number `count` property, you will have an error if you try to call a string-specific method on it:++```ts+const Component = defineComponent({+  data() {+    return {+      count: 0+    }+  },+  mounted() {+    const result = this.count.split('') // => Property 'split' does not exist on type 'number'+  }+})+```++If you have a complex type or interface, you can cast it using [type assertion](https://www.typescriptlang.org/docs/handbook/basic-types.html#type-assertions):++```ts+interface Book {+  title: string+  author: string+  year: number+}++const Component = defineComponent({+  data() {+    return {+      book: {+        title: 'Vue 3 Guide',+        author: 'Vue Team',+        year: 2020+      } as Book+    }+  }+})+```++### Annotating Return Types++Because of the circular nature of Vue’s declaration files, TypeScript may have difficulties inferring the types of computed. For this reason, you may need to annotate the return type computed properties.++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  data() {+    return {+      message: 'Hello!'+    }+  },+  computed: {+    // needs an annotation+    greeting(): string {+      return this.message + '!'+    }++    // in a computed with a setter, getter needs to be annotated+    greetingUppercased: {+      get(): string {+        return this.greeting.toUpperCase();+      },+      set(newValue: string) {+        this.message = newValue.toUpperCase();+      },+    },+  }+})+```++### Annotating Props++Vue does a runtime validation on props with a `type` defined. To provide these types to TypeScript, we need to cast the constructor with `PropType`:++```ts+import { defineComponent, PropType } from 'vue'++interface ComplexMessage {+  title: string+  okMessage: string+  cancelMessage: string+}+const Component = defineComponent({+  props: {+    name: String,+    success: { type: String },+    callback: {+      type: Function as PropType<() => void>+    },+    message: {+      type: Object as PropType<ComplexMessage>,+      required: true,+      validator(message: ComplexMessage) {+        return !!message.title+      }+    }+  }+})+```++If you find validator not getting type inference or member completion isn’t working, annotating the argument with the expected type may help address these problems.++## Using with Composition API++On `setup()` function, you don't need to pass a typing to `props` parameter as it will infer types from `props` component option.++```ts+import { defineComponent } from 'vue'++const Component = defineComponent({+  props: {+    message: {+      type: String,+      required: true+    }+  },++  setup(props) {+    const result = props.message.split('') // correct, 'message' is typed as a string+    const filtered = props.message.filter(p => p.value) // an error will be thrown: Property 'filter' does not exist on type 'string'+  }+})+```++### Typing `ref`s++To type a ref, we need to specify a type when calling `ref()` method:++```ts+import { defineComponent, ref } from 'vue'++const Component = defineComponent({+  setup() {+    const year = ref<number>(2020)+  }+})+```++Sometimes we may need to specify complex types for a ref's inner value. We can do that succinctly by passing a generics argument when calling ref to override the default inference:++```ts+const year = ref<string | number>('2020') // year's type: Ref<string | number>++year.value = 2020 // ok!+```++If the type of the generic is unknown, it's recommended to cast `ref` to `Ref<T>`:++```ts+function useState<State extends string>(initial: State) {+  const state = ref(initial) as Ref<State> // state.value -> State extends string+  return state+}+```++### Typing `reactive`++Similarly to `ref`, we can define a `reactive` type on method call:++```ts+import { defineComponent, reactive } from 'vue'++interface Book {+  title: string+  year?: number+}++export default defineComponent({+  name: 'HelloWorld',+  setup() {+    const book = reactive<Book>({

Here we can actually show that the reactive can be casted to the Book because if the Book doesn't have any nested ref, it will be pretty much the same as Book.

In this case, this would be equivalent:

const book: Book = reactive({ title: 'Vue 3 Guide' });
// or 
const book = reactive({ title: 'Vue 3 Guide' }) as Book;
NataliaTepluhina

comment created time in 17 days

more