Writing page objects for AngularJS's Protractor with Typescript

We are creating a new frontend and at the same time are moving towards typescript. We wanted to use the page objects pattern to have a better maintainable end-to-end test script. Protractor is an end to end test framework for AngularJS applications built on top of WebDriverJS.

As of any problem with typescript we should first understand the javascript variant. So lets begin at the beginning and create a integration test for a example login page:
As you can imagine, elements or their selectors can change at any time, so a page object is very useful. Lets look at a pure javascript example with a page object.

Now as you can see the page object pattern helps a lot here, the test only describes what we want to do, and no longer is concerned with page specifics.
Now lets see how that looks in typescript:

You might hit a problem that you hit an error like ">> error TS2095: Could not find symbol 'module'." in your pageObject.ts file. The way around that is to insert the following code before your class definition:
Now the same problem can occur on the "require('pageObject.js')" bit as that is also a statement that typescript uses to load modules. So we can use the same workaround:
I don't know why some of the files need this "workaround" but it is workable.