TypeScript and playground

[hatemhosny]

السلام عليكم ورحمة الله وبركاته

A great course. Thank you for making that available and for enriching Arabic content.

I have very little knowledge in Java, however I was perfectly comfortable following along. I am thinking of providing a TypeScript version (which I'm a lot more comfortable with) for the modules I learn. I think of these benefits:

• I find it a good chance for me to apply, rather than just keep watching.
• I can get better in Java if I know the TypeScript counterpart.
• A lot more people (who, like me, know JS/TS better) can follow the course better if they can find TypeScript code.
• We can easily run TypeScript code in online code playgrounds and get immediate feedback.
• This will also motivate me to continue the course till the end (PS. I'm lazy!)

This is the observer pattern translated to TypeScript: https://github.com/hatemhosny/ultimate-design-patterns/tree/typescript/typescript/observer

You can then run the code in LiveCodes, like that: Observer pattern: run in LiveCodes

(LiveCodes is an open-source client-side code playground that I maintain, which supports TypeScript and 80+ other languages/frameworks. See docs - starter templates)

You can also run the code locally using something like ts-node (if you have npm globally installed) using the command:

npx ts-node ./typescript/observer/index.ts

Notes

Instead of translating statement to statement, I used conventions common in TypeScript,. These are some examples:

• String literal unions instead of enums

// union type
type EventType = "NEW_PRODUCT" | "NEW_OFFER" | "JOB_OPENING";

// instead of enum
enum EventType {
  NEW_PRODUCT,
  NEW_OFFER,
  JOB_OPENING,
}

• parameter properties shorthand

class Offer {
  constructor(private message: string) {}

  getMessage() {
    return this.message;
  }
}

// instead of
class Offer {
  private message: string;

  constructor(message: string) {
    this.message = message;
  }

  getMessage() {
    return this.message;
  }
}

• kebab case for file names instead of Pascal case (Only file names. Class name are the same) (e.g. shipping-company.ts instead of ShippingCompany.ts)

• The entry point and usage example is found in index.ts (similar to the code in main)

• I have collected all code in one file (_observer.ts) for a general overview and for easy loading in LiveCodes.

I would appreciate if you can also provide the code in main (for each pattern) in the repo (I had to get it from the video).

You may also want to provide links to UML diagrams as code: e.g. this UML diagram uses mermaid (load in editor)

If you agree to the general idea, I'll open a PR to merge the code back in your repo. Please let me know what you think.

[mahyoussef]

اللهم بارك يا حاتم , ما شاء الله عليك شغل عالي وفاخر بجد 😍 This is a really awesome contribution from your side, I loved the way you wrote a clean code + the way that you provided a UML as a Code was very elegant.

Please feel free to open a PR so you can motivate others to start writing into other languages and motivate typescript users to get going with type script.

Thanks a lot for your nice words in the beginning and I really hope the rest of the course be more exciting to you !

[hatemhosny]

ربنا يكرمك، كورس حلو فعلا ❤️

I will open a PR with the current TypeScript implementation of the observer pattern and hopefully follow up with more PRs for other patterns as I advance through the course.

I hope this motivates others to provide implementations for other languages.

Please note that LiveCodes playground supports other languages like Python, Go, C++, PHP, Ruby and many others (unfortunately, Java is not "yet" supported). So other developers may want to use it to showcase the implementation in other languages.