[PR #484] [MERGED] Porting (most of) code to typescript #2647

New issue

Closed

opened 2026-03-17 00:20:02 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 00:20:02 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/484
Author: @AndrewBastin
Created: 1/11/2020
Status: ✅ Merged
Merged: 1/12/2020
Merged by: @AndrewBastin

Base: typescript ← Head: refactor/typescript

📝 Commits (10+)

d24b917 added oauth token ui
5377c69 add oauth handler
b98d907 fix token placement
2e7e40c display error & disable input based on user input
83a20bd implement oidc discovery
2a818dc comment correction
df48e85 added token managements
f847cbe Added token management
161c0b7 added token request management
fdedb1f ⚡ Set credentials to true. Fix #443

📊 Changes

53 files changed (+1689 additions, -555 deletions)

View changed files

📝 README.md (+5 -4)
📝 assets/js/curlparser.js (+1 -1)
➕ assets/js/oauth.js (+185 -0)
📝 components/ace-editor.vue (+17 -14)
📝 components/autocomplete.vue (+14 -11)
📝 components/collections/addCollection.vue (+6 -4)
📝 components/collections/addFolder.vue (+6 -4)
📝 components/collections/collection.vue (+8 -6)
📝 components/collections/editCollection.vue (+6 -4)
📝 components/collections/editFolder.vue (+6 -4)
📝 components/collections/editRequest.vue (+17 -9)
📝 components/collections/folder.vue (+7 -5)
📝 components/collections/importExportCollections.vue (+25 -15)
📝 components/collections/index.vue (+29 -27)
📝 components/collections/request.vue (+5 -3)
📝 components/collections/saveRequestAs.vue (+13 -11)
📝 components/graphql/field.vue (+40 -8)
📝 components/graphql/type.vue (+10 -6)
➕ components/graphql/typelink.vue (+36 -0)
📝 components/history.vue (+49 -30)

...and 33 more files

📄 Description

This PR intends to complete the Typescript work which began in the typescript branch.

It ports every code file (except tests and pages/index.vue) to TypeScript with as much types provided.

There are certain things to note about the TypeScript addition to the project though.

Some Important Changes

There is a change in the way components are imported.

Components before could be imported with this snippet

import Section from "../components/section";

But from this PR on, it will be:

import Section from "../components/section.vue";

For Vue components, you have to include the file extension.

Default Vue component code is modified a bit

Vue component scripts are used to be written as

<script>
export default {
...[[ Component Code ]]...
};
</script>

From this PR onwards it will be

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
...[[ Component Code ]]...
});
</script>

NOTE : It is also best to include an empty component script even if the component has no code logic, sometimes the compiler doesn't pick up the Vue component otherwise

Directives and Middlewares have a new code format

The way directives and middlewares are written have been revamped to work with TypeScript, please check the code in the corresponding folders, to see how it is written in the new format

Some notes on the TypeScript and Vue interaction

I noticed while porting that TypeScript compiler will freak out if it can't resolve/infer types from the component code, so if you find TypeScript giving you weird errors like (foo is not a property of this), try explicitly specifying types, that will usually resolve that sorta issues.
While adding plugins, make sure to import them into vue-plugins.d.ts file and add it to the import declaration, sometimes, it will be automatically be picked up (its a bit finicky), if you still can't access the plugin, just add the plugin reference to the Vue interface present in the same file.

Now, this PR doesn't bring full TypeScript port, pages/index.vue is due a huge refactor and it will be rewritten in TypeScript during that process. Also, tests will still be written in JavaScript.

Also, another thing to note is that, I haven't fully brought types as much as possible, some places could use more typings (and less any), particularly the types regarding the store are implemented with any as a placeholder. This needs to be refactored into more meaningful type definitions in the future.

Soooo, that's about it,

Happy hacking 😄

This PR may fix #467

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/484 **Author:** [@AndrewBastin](https://github.com/AndrewBastin) **Created:** 1/11/2020 **Status:** ✅ Merged **Merged:** 1/12/2020 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `typescript` ← **Head:** `refactor/typescript` --- ### 📝 Commits (10+) - [`d24b917`](https://github.com/hoppscotch/hoppscotch/commit/d24b917c173a7077ea96e4225b9c63b4285c54ca) added oauth token ui - [`5377c69`](https://github.com/hoppscotch/hoppscotch/commit/5377c69b407c65fb8c1d522ccc31be73ee5a450d) add oauth handler - [`b98d907`](https://github.com/hoppscotch/hoppscotch/commit/b98d9074bbefc760988cda8f4a4ea979cc991d02) fix token placement - [`2e7e40c`](https://github.com/hoppscotch/hoppscotch/commit/2e7e40c4cc30de890b898c19b3975b55c27d027a) display error & disable input based on user input - [`83a20bd`](https://github.com/hoppscotch/hoppscotch/commit/83a20bd7de1b0696985b1a69dce1563571400b13) implement oidc discovery - [`2a818dc`](https://github.com/hoppscotch/hoppscotch/commit/2a818dc81d4cdf7833770a4de8c5f8b6641c2f29) comment correction - [`df48e85`](https://github.com/hoppscotch/hoppscotch/commit/df48e85de52d94b1c4fa7914572c87e802d37afa) added token managements - [`f847cbe`](https://github.com/hoppscotch/hoppscotch/commit/f847cbe122aef342c7f22f8d7211ffb9f47b78c4) Added token management - [`161c0b7`](https://github.com/hoppscotch/hoppscotch/commit/161c0b7b88da2347fea0f5a70db4977b8ecc34e9) added token request management - [`fdedb1f`](https://github.com/hoppscotch/hoppscotch/commit/fdedb1f2319445e5fe6a772e78488deeff0cdaf7) :zap: Set credentials to true. Fix #443 ### 📊 Changes **53 files changed** (+1689 additions, -555 deletions) <details> <summary>View changed files</summary> 📝 `README.md` (+5 -4) 📝 `assets/js/curlparser.js` (+1 -1) ➕ `assets/js/oauth.js` (+185 -0) 📝 `components/ace-editor.vue` (+17 -14) 📝 `components/autocomplete.vue` (+14 -11) 📝 `components/collections/addCollection.vue` (+6 -4) 📝 `components/collections/addFolder.vue` (+6 -4) 📝 `components/collections/collection.vue` (+8 -6) 📝 `components/collections/editCollection.vue` (+6 -4) 📝 `components/collections/editFolder.vue` (+6 -4) 📝 `components/collections/editRequest.vue` (+17 -9) 📝 `components/collections/folder.vue` (+7 -5) 📝 `components/collections/importExportCollections.vue` (+25 -15) 📝 `components/collections/index.vue` (+29 -27) 📝 `components/collections/request.vue` (+5 -3) 📝 `components/collections/saveRequestAs.vue` (+13 -11) 📝 `components/graphql/field.vue` (+40 -8) 📝 `components/graphql/type.vue` (+10 -6) ➕ `components/graphql/typelink.vue` (+36 -0) 📝 `components/history.vue` (+49 -30) _...and 33 more files_ </details> ### 📄 Description **This PR intends to complete the Typescript work which began in the `typescript` branch.** It ports every code file (except tests and pages/index.vue) to TypeScript with as much types provided. There are certain things to note about the TypeScript addition to the project though. ## Some Important Changes ### There is a change in the way components are imported. Components before could be imported with this snippet ```js import Section from "../components/section"; ``` But from this PR on, it will be: ```js import Section from "../components/section.vue"; ``` For Vue components, you have to include the file extension. ### Default Vue component code is modified a bit Vue component scripts are used to be written as ```js <script> export default { ...[[ Component Code ]]... }; </script> ``` From this PR onwards it will be ```js <script lang="ts"> import Vue from "vue"; export default Vue.extend({ ...[[ Component Code ]]... }); </script> ``` **NOTE : It is also best to include an empty component script even if the component has no code logic, sometimes the compiler doesn't pick up the Vue component otherwise** ### Directives and Middlewares have a new code format The way directives and middlewares are written have been revamped to work with TypeScript, please check the code in the corresponding folders, to see how it is written in the new format ## Some notes on the TypeScript and Vue interaction - I noticed while porting that TypeScript compiler will freak out if it can't resolve/infer types from the component code, so if you find TypeScript giving you weird errors like (`foo is not a property of this`), try explicitly specifying types, that will usually resolve that sorta issues. - While adding plugins, make sure to import them into vue-plugins.d.ts file and add it to the import declaration, sometimes, it will be automatically be picked up (its a bit finicky), if you still can't access the plugin, just add the plugin reference to the Vue interface present in the same file. Now, this PR doesn't bring full TypeScript port, pages/index.vue is due a huge refactor and it will be rewritten in TypeScript during that process. Also, tests will still be written in JavaScript. Also, another thing to note is that, I haven't fully brought types as much as possible, some places could use more typings (and less `any`), particularly the types regarding the store are implemented with `any` as a placeholder. This needs to be refactored into more meaningful type definitions in the future. Soooo, that's about it, Happy hacking :smile: This PR may fix #467 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>