# Can't access p5.Vector methods in typescript, like random2D() and sub()

**URL:** <https://discourse.processing.org/t/cant-access-p5-vector-methods-in-typescript-like-random2d-and-sub/38315>\
**Category:** Coding Questions\
**Created:** [August 11, 2022, 2:10pm UTC](https://discourse.processing.org/t/cant-access-p5-vector-methods-in-typescript-like-random2d-and-sub/38315 "2022-08-11T14:10:38Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 12, 2022, 6:43am UTC](https://discourse.processing.org/t/cant-access-p5-vector-methods-in-typescript-like-random2d-and-sub/38315/2 "2022-08-12T06:43:49Z")

</div>

> [@pedrocoelho](#):
>
> … but when I try to use any Vector methods I get that Vector is not found:

The statement `import * as p5 from "p5";` makes p5 available as a datatype, but not as the actual p5 constructor.

That is, you can only use p5 to describe things like this after a colon:

- `constructor(p5: p5, x: number, y: number) {`
- `behaviors(p5: p5) {`
- `pos: p5.Vector;`

And if you attempt to access it like this:

- `p5.Vector.random2D();`
- `p5.Vector.sub(target, this.pos);`
- `new p5(sketch);`

It implies that p5 comes straight from the `import` statement.

However that’s not true, b/c p5 is already available in the global context right after it’s fully loaded within an HTML file:  
`<script defer src=https://cdn.JsDelivr.net/npm/p5></script>`

Unfortunately, for unknown reasons, the package “@types/p5” fails to tell that to the TypeScript compiler.

So from TypeScript’s PoV, library “p5.js” is a module that must be imported rather than a JS regular library which makes itself globally available as property p5.

Luck for you I used to have those same errors and I’ve been forced to code a solution for it already.

It’s a “.d.ts” file which we don’t have to `import` it, but merely use the triple-slash directive syntax instead:  
`/// <reference path="../typings/p5-global.d.ts" />`

> **[Documentation - Triple-Slash Directives](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-path-)**
>
> How to use triple slash directives in TypeScript

“p5-global.d.ts” describes another p5 constructor that’s exclusively accessed via the _window_ object:

- `window.p5.Vector.random2D();`
- `window.p5.Vector.sub(target, this.pos);`
- `new window.p5(sketch);`

Therefore we can normally continue using p5 as a datatype.

And then switch to `window.p5` only when we need to access the real p5 namespace.

I’ve converted & refactored the original [“059\_Steering\_Text\_Paths”](https://GitHub.com/CodingTrain/Coding-Challenges/tree/main/059_Steering_Text_Paths/P5) to TS as an ES6 module instance mode sketch:

> **[GitHub - GoSubRoutine/Steering-Text-Paths](https://github.com/GoSubRoutine/Steering-Text-Paths)**
>
> Contribute to GoSubRoutine/Steering-Text-Paths development by creating an account on GitHub.

You can watch it running online by clicking on this [link](https://gosubroutine.github.io/Steering-Text-Paths/).

And also download the whole project from here:

> **[Releases · GoSubRoutine/Steering-Text-Paths](https://github.com/GoSubRoutine/Steering-Text-Paths/releases)**
>
> Contribute to GoSubRoutine/Steering-Text-Paths development by creating an account on GitHub.

---

_[View the full topic](https://discourse.processing.org/t/cant-access-p5-vector-methods-in-typescript-like-random2d-and-sub/38315)._