Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add TypeScript cheatsheet #355

Open
wants to merge 11 commits into
base: main
Choose a base branch
from

Conversation

andyfleming
Copy link

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.

Copy link

@samifouad samifouad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

awesome work! just a few comments i put inline

cheatsheets/gleam-for-typescript-users.md Show resolved Hide resolved
cheatsheets/gleam-for-typescript-users.md Outdated Show resolved Hide resolved
cheatsheets/gleam-for-typescript-users.md Show resolved Hide resolved
cheatsheets/gleam-for-typescript-users.md Show resolved Hide resolved
Copy link
Member

@lpil lpil left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for this!! I've left a bunch of comments inline

}
```

In order to simplify this construct, we can use the `try` keyword that will:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This feature hasn't existed in some time!

Comment on lines +45 to +66
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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need to teach TypeScript features here

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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() {}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's show a valid main function that has a body

Comment on lines +99 to +117
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
```
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something like this?

Gleam also has the let keyword before its variable names. However, variables cannot be reassigned. The names can be used again by binding with another let statement, but the values themselves are not changed or mutated in any way. The values they reference are immutable.

Comment on lines +118 to +147
## 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
```
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment on lines +455 to +469
// 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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need to teach all the ways to make a function in TS, the reader already knows

Comment on lines +586 to +588
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).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's not talk about future potential additions to TS


#### Gleam

Case statements in Gleam are robust and allow for pattern matching.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does robust mean?


#### 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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here, no proposals

cheatsheets/gleam-for-typescript-users.md Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants