{"id":7763,"date":"2019-12-11T20:37:27","date_gmt":"2019-12-11T20:37:27","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7763"},"modified":"2019-12-11T20:37:27","modified_gmt":"2019-12-11T20:37:27","slug":"adding-typescript-to-electron","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/adding-typescript-to-electron\/","title":{"rendered":"Adding TypeScript to Electron"},"content":{"rendered":"

So we’ve seen that Electron is basically a browser window with integrations which allows us to use JavaScript to interact with it, but as somebody who prefers the type safety features that come with TypeScript, obviously I’d want to integrate TypeScript as well.<\/p>\n

If you’ve not got TypeScript installed globally then run <\/p>\n

\r\nnpm install --save-dev typescript\r\n<\/pre>\n
If we take our application from the Getting Started<\/a> post, lets simply started by adding a tsconfig, just run the following from your project’s root folder<\/p>\n
\r\ntsc --init\r\n<\/pre>\n
Now change our main.js to main.ts. We’ll obviously need a build step to transpile the TypeScript to JavaScript which can then be uses via Electron, so add the following to the scripts section in package.json<\/p>\n
\r\n"build": "tsc"\r\n<\/pre>\n
you might also like to either rename the start script or add another script to both build\/transpile and run the application, i.e.<\/p>\n
\r\n"go": "tsc && electron ."\r\n<\/pre>\n
Obviously this will litter your code base with generated .js files, so it’s best to transpile our code to a folder of it’s own, in this case we’ll call it src. Just add the following to the tsconfig.json<\/p>\n
\r\n"outDir": ".\/src",\r\n<\/pre>\n
Then change package.json “main” to the following<\/p>\n
\r\n"main": ".\/src\/main.js",\r\n<\/pre>\n
That’s all there is to it, now we can add some type checking to our code and write TypeScript.<\/p>\n","protected":false},"excerpt":{"rendered":"
So we’ve seen that Electron is basically a browser window with integrations which allows us to use JavaScript to interact with it, but as somebody who prefers the type safety features that come with TypeScript, obviously I’d want to integrate TypeScript as well. If you’ve not got TypeScript installed globally then run npm install –save-dev […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[276,46],"tags":[],"class_list":["post-7763","post","type-post","status-publish","format-standard","hentry","category-electron","category-typescript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7763"}],"version-history":[{"count":3,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7763\/revisions"}],"predecessor-version":[{"id":7788,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7763\/revisions\/7788"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}