Add TypeScript cheatsheet #355
Conversation
| } | ||
| ``` | ||
|
|
||
| In order to simplify this construct, we can use the `try` keyword that will: |
There was a problem hiding this comment.
This feature hasn't existed in some time!
| TypeScript also [supports JSDoc annotations](https://www.typescriptlang.org/docs/handbook/jsdoc-supported-types.html). | ||
|
|
||
| ```ts | ||
| /** | ||
| * @type {string} | ||
| */ | ||
| var s; | ||
|
|
||
| /** @type {Window} */ | ||
| var win; | ||
|
|
||
| /** @type {PromiseLike<string>} */ | ||
| var promisedString; | ||
|
|
||
| // You can specify an HTML Element with DOM properties | ||
| /** @type {HTMLElement} */ | ||
| var myElement = document.querySelector(selector); | ||
| element.dataset.myData = ""; | ||
| ``` | ||
|
|
||
| Documentation blocks (docblocks) are extracted into generated API | ||
| documentation. |
There was a problem hiding this comment.
We don't need to teach TypeScript features here
There was a problem hiding this comment.
I was just translating to the equivalent from this cheatsheet: https://github.com/gleam-lang/website/blob/main/cheatsheets/gleam-for-php-users.md?plain=1#L58-L82
I can drop that section though.
| const answer: Int = 42 | ||
|
|
||
| /// A main function | ||
| fn main() {} |
There was a problem hiding this comment.
Let's show a valid main function that has a body
| You can rebind variables in both languages. | ||
|
|
||
| ### TypeScript | ||
|
|
||
| ```ts | ||
| let a = 50; | ||
| a = a + 100; | ||
| a = 1; | ||
| ``` | ||
|
|
||
| ### Gleam | ||
|
|
||
| Gleam also has the `let` keyword before its variable names. However, it needs to be used explicitly each time when rebinding/reassinging a new value. | ||
|
|
||
| ```gleam | ||
| let size = 50 | ||
| let size = size + 100 | ||
| let size = 1 | ||
| ``` |
There was a problem hiding this comment.
This isn't quite right. In TypeScript you can mutate bindings, while in Gleam you can shadow them. This is a big difference so we should be sure to explain the difference here.
There was a problem hiding this comment.
Something like this?
Gleam also has the
letkeyword before its variable names. However, variables cannot be reassigned. The names can be used again by binding with anotherletstatement, but the values themselves are not changed or mutated in any way. The values they reference are immutable.
| ## Constants | ||
|
|
||
| ### TypeScript | ||
|
|
||
| In TypeScript, `const` is used for variables that may not be reassigned. | ||
|
|
||
| ```ts | ||
| const example = 50; | ||
| example = 100; // throws "TypeError: Assignment to constant variable." | ||
| ``` | ||
|
|
||
| ### Gleam | ||
|
|
||
| In Gleam constants can also be created using the `const` keyword. Constants must be literal values, defined at the top level of a module and functions cannot be used in their definitions. | ||
|
|
||
| ```gleam | ||
| // the_question.gleam module | ||
| const the_answer = 42 | ||
|
|
||
| pub fn main() { | ||
| the_answer | ||
| } | ||
| ``` | ||
|
|
||
| They can also be marked public via the `pub` keyword and will then be | ||
| automatically exported. | ||
|
|
||
| ```gleam | ||
| pub const the answer = 42 | ||
| ``` |
There was a problem hiding this comment.
Gleam constants are largely unrelated to TypeScript const. The comparison should be between in-function assignments in each language, and module level assignments in each language.
| // Traditional function declaration | ||
| function example4() { | ||
| return 'a'; | ||
| } | ||
|
|
||
| // Declaration as a variable with an anonymous function | ||
| const example2 = function() { | ||
| return 'b'; | ||
| } | ||
|
|
||
| // Anonymous arrow function expressions | ||
| const example3 = () => 'c'; // implicit return | ||
| const addOne = x => x + 1; // single arguments don't require parentheses | ||
|
|
||
| const example4 = example3; // functions can be passed as values |
There was a problem hiding this comment.
We don't need to teach all the ways to make a function in TS, the reader already knows
| TypeScript has simple switch statements that allow for some basic matching of a value. | ||
|
|
||
| There is a language proposal for [a pattern matching syntax](https://github.com/tc39/proposal-pattern-matching). |
There was a problem hiding this comment.
Let's not talk about future potential additions to TS
|
|
||
| #### Gleam | ||
|
|
||
| Case statements in Gleam are robust and allow for pattern matching. |
|
|
||
| #### TypeScript | ||
|
|
||
| TypeScript does not offer pipes (yet, although there's [a proposal for a pipeline operator](https://github.com/tc39/proposal-pipeline-operator)) but it can chain calls by making functions return |
Co-authored-by: Louis Pilfold <louis@lpil.uk>
Co-authored-by: Louis Pilfold <louis@lpil.uk>
Co-authored-by: Louis Pilfold <louis@lpil.uk>
Adds TypeScript cheatsheet (based primarily on the content of the PHP cheatsheet).
There's a ton of content that can be covered, but I think this is a good start. I've also included a list in an HTML comment at the end for some suggested topics for us to add next.