How to detect wrong function call to a typescript function, from a js file [TypeScript, Vue, js]

user_18461669 0
Viewed 42

I have a vue2 app, and I want to start using TypeScript for some services files (without changing existing js/vue files).

In order to add TypeScript support I've used vue-cli, and it seems to work: I've added a myService.ts file with a TypeScript function - myFunction, and inside this file vue detects properly types issues. I can also import this service to a vue component file - myComponent.vue (a component that contains js code), and use it properly.

myFunction looks like this:

function myFunction (x: number, y: number) : number {
  const a: number = 3
  const b: number = 2
  return a + b + x + y
}

However, when I call myFunction from myComponent.vue with wrong parameters, for example - myFunction("str1", "str2"), vue doesn't detect any issue, even though string parameters should not be allowed. I can run - npm run serve, and it works without raising any warning/error.

How can I make vue to detect it? is it even possible to detect TS issues from inside js code?

vuejs2 vue.js typescript javascript
1 Answers

Yes, it is possible to type check js files but first you need to set up your tsconfig correctly.
All available options for tsconfig

What you need:
allowJs
checkJs

You can also add // @ts-check at the top of every js file you want to type check, instead of enabling this option for the whole project.

EDIT:
I've read your latests comment, with that in mind, there's a nice guide on TS docs about slowly migrating from JS.

I'm also adding here two codesandboxes, one is built with a TS function that's being used in JS with @ts-check and @ts-ignores.
The second is built with JsDoc, you can see it is not being checked without @ts-check enabled also, but I've read that it is possible to enable JsDoc typechecking if you add "javascript.implicitProjectConfig.checkJs": true to your vscode settings, I can not confirm though as I have never used JsDoc.

I'm afraid there are not many options other than migrating the files you need to TS and setting correct types (or at least setting everything to type any just to calm TS down), or enabling @ts-check and adding @ts-ignore before every line that you don't want to be checked.

user_167581370
Related