# vue-typed-properties

> TypeScript utility type for setting Vue.js component properties

Latest version **1.0.0** (published 2022-11-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-typed-properties
pnpm add vue-typed-properties
yarn add vue-typed-properties
bun add vue-typed-properties
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-11-09 |
| First published | 2022-11-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Andrew Vasylchuk |
| Maintainers | 3vil_arthas |
| Keywords | types, typescript, vue |

## Links

- npm: https://www.npmjs.com/package/vue-typed-properties
- Repository: https://github.com/andrewvasilchuk/vue-typed-properties
- Homepage: https://github.com/andrewvasilchuk/vue-typed-properties#readme
- Issues: https://github.com/andrewvasilchuk/vue-typed-properties/issues
- npm.io page: https://npm.io/package/vue-typed-properties

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2022-11-09

## README

# vue-typed-properties

> TypeScript utility type for setting Vue.js component properties

> ❗ This library is intended to be used with Vue 2.

## Installation

### Via NPM

```bash
$ npm i vue-typed-properties -D
```

### Via Yarn

```bash
$ yarn add vue-typed-properties --dev
```

### Usage

```ts
import Vue from 'vue'
// import type { WithProperties } from 'vue-typed-properties' TypeScript 3.8+
import { WithProperties } from 'vue-typed-properties'

export default (
  Vue as WithProperties<{ foo: 'foo'; bar: string; baz: boolean }>
).extend({
  name: 'Component',
  methods: {
    method() {
      this.foo = 'foo'
      this.bar = 'bar'
      this.baz = true
    },
  },
})
```

<details>
<summary>Extending extended components</summary>

```ts
// YourAwesomeExtendedComponent.vue
// ...

export default Vue.extend({
  // ...
  methods: {
    baz() {},
  },
  // ...
})
```

```ts
// ...
import YourAwesomeExtendedComponent from 'path/to/your/awewsome/extended/component'

export default (
  YourAwesomeExtendedComponent as WithProperties<
    { foo: 'foo' },
    typeof YourAwesomeExtendedComponent
  >
).extend({})
```

</details>

## Motivation

This library was introduces to prevent TypeScript from complaining when arbitrary values are assigned to `this` in `created` lifecycle hook.

**Before**

```ts
import Vue from 'vue'

export default Vue.extend({
  name: 'Component',
  created() {
    // Property 'foo' does not exist on type ...
    this.foo = 'foo'
  },
})
```

**After**

```ts
import Vue from 'vue'
import type { WithProperties } from 'vue-typed-properties'

export default (
  Vue as WithProperties<{
    foo: 'foo'
  }>
).extend({
  name: 'Component',
  created() {
    this.foo = 'foo'
  },
})
```

## Tests

```bash
npm test
```

## Build

```bash
npm run build
```

## License

[MIT](http://opensource.org/licenses/MIT)

---
_Source: https://npm.io/package/vue-typed-properties · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._