Gatbsy typescript post #14

franleplant · 2020-04-11T21:20:56Z

This is mostly content complete, I just need to sit down and edit it down to a presentable thing.

igamigo · 2020-05-06T01:06:28Z

content/blog/gatbsy-typescript/index.md

+2- new code verification tool added to your pool (in javascript apps this is mostly made of different kinds of tests and lints)
+3- better development experience: better autocompletion and api discovery
+4- type checker guided hassle free refactoring
+5- improve the mind set of developers so that they think more about data structures and their semantic meaning inside the code (as oposed to just have a bunch of unamed and uncategorized objects which is something that tends to happen in bigger javascript apps).


Suggested change

5- improve the mind set of developers so that they think more about data structures and their semantic meaning inside the code (as oposed to just have a bunch of unamed and uncategorized objects which is something that tends to happen in bigger javascript apps).

5- improve the mindset of developers so that they think more about data structures and their semantic meaning inside the code (as opposed to just have a bunch of unnamed and uncategorized objects which is something that tends to happen in bigger javascript apps).

I think you start making a "review" when I first submit the PR and then finish it when I tell you it is ready to be reviewed (which might take couple of days). This makes your comments be on an outdated piece of code.

You might want to make these comments as "simple comments" instead of reviews or simply submit reviews early on so that your comments don't get outdated.

Or... we might not be using github's UI correctly jajaja

igamigo · 2020-05-06T01:06:46Z

content/blog/gatbsy-typescript/index.md

+4- type checker guided hassle free refactoring
+5- improve the mind set of developers so that they think more about data structures and their semantic meaning inside the code (as oposed to just have a bunch of unamed and uncategorized objects which is something that tends to happen in bigger javascript apps).
+
+I plan to talk a lot more about this in a follow up post so that is why I wont focus to much


won't*
too*

igamigo · 2020-05-06T01:07:24Z

content/blog/gatbsy-typescript/index.md

+
+I plan to talk a lot more about this in a follow up post so that is why I wont focus to much
+explaining these points, but please note that most of these come from real world experiences
+handling large production code bases in both Javascript and Typescript, and there is an abysm between the too.


to two too chu

igamigo · 2020-05-06T01:09:37Z

content/blog/gatbsy-typescript/index.md

+}
+```
+
+I wont cover all the options but I do want to cover `strictNullChecks`.


I also think it's a good idea to explain what strictNullChecks does before going on to explain how it was problematic.

igamigo · 2020-05-06T01:10:28Z

content/blog/gatbsy-typescript/index.md

+
+## How to use Typescript in your Gatbsy.js site.
+
+We are going to install two plugins:


first plugin appears to be included in Gatsby which might be worth mentioning

it is included in the gatsby-starter-blog, Im trying to make this more general to any gatsby application

igamigo · 2020-05-06T01:10:47Z

content/blog/gatbsy-typescript/index.md

+```
+
+I wont cover all the options but I do want to cover `strictNullChecks`.
+I found that enabling this option to be a big pain when convining it with the GraphQL codegen tool.


igamigo · 2020-05-06T01:13:30Z

content/blog/gatbsy-typescript/index.md

+### `declarations.d.ts`
+
+In most Typescript codebases we have some global types or some untyped modules to declare,
+that is why you most likely will need `src/declaration.d.ts`. Let's see a bair minimum one:


bare minimum*

igamigo · 2020-05-06T01:17:17Z

content/blog/gatbsy-typescript/index.md

+declare module "*.svg"
+```
+
+And then you should import this file from your `gatsby-browser.js` which


"import from" sounds a little confusing to me, imho it should be "import this file on/in gatsby-browser.js..."
mainly because import statements can be "import * from whatever" which is the other way around

igamigo · 2020-05-06T01:17:35Z

content/blog/gatbsy-typescript/index.md

+
+### Typechecking
+
+As the typescript plugin docs state, by default it wont run typechecks on your code, it


igamigo · 2020-05-06T01:17:47Z

content/blog/gatbsy-typescript/index.md

+### Typechecking
+
+As the typescript plugin docs state, by default it wont run typechecks on your code, it
+will only strip out any type information and typescript sintax and compile it down to Javascript.


igamigo · 2020-05-06T01:19:00Z

content/blog/gatbsy-typescript/index.md

+
+### gatsby-plugin-typescript
+
+I did not made any special configurations to this plugin.


igamigo · 2020-05-06T01:19:52Z

content/blog/gatbsy-typescript/index.md

+and some components will acess that data layer and that data will
+flow through props and context down the component tree.
+
+So it is reasonable to expect to somehow have thata data model


igamigo · 2020-05-06T01:22:15Z

content/blog/gatbsy-typescript/index.md

+  resolve: `gatsby-plugin-graphql-codegen`,
+  options: {
+    codegenConfig: {
+      // optional if you prefix, as I do,


explain why it could be convenient maybe?
I recall seeing that and being unsure regarding why it would be that way when it was first implemented (I still don't really know)

igamigo · 2020-05-06T01:22:51Z

content/blog/gatbsy-typescript/index.md

+This evaluates to something like `Type | null | undefined`, so you basically have three potential types instead
+of just the two you actually epect: `Type | null` which is what `Maybe<Type>` resolves to.
+
+So this will reduce some of the more awkard errors when passing props.


igamigo · 2020-05-06T01:23:30Z

content/blog/gatbsy-typescript/index.md

+```
+
+but the pages that make the query might generate different variantes of this type. Sometime shaving
+some fields off sometimes others and in particular the profilepicture filed whihc maps to an image


igamigo · 2020-05-06T01:23:31Z

content/blog/gatbsy-typescript/index.md

+some fields off sometimes others and in particular the profilepicture filed whihc maps to an image
+might be altered in several ways like asking for a sharp image fluid.
+
+IN that case this type wont be useful at all.


gatby typescript: content complete draft

4dc6a8d

franleplant force-pushed the gatbsy-typescript-post branch from 9058f12 to 4dc6a8d Compare May 5, 2020 00:03

tweaks

b227085

igamigo reviewed May 6, 2020

View reviewed changes

igamigo approved these changes May 6, 2020

View reviewed changes

PR feedback

0bb1dfc

	5- improve the mind set of developers so that they think more about data structures and their semantic meaning inside the code (as oposed to just have a bunch of unamed and uncategorized objects which is something that tends to happen in bigger javascript apps).
	5- improve the mindset of developers so that they think more about data structures and their semantic meaning inside the code (as opposed to just have a bunch of unnamed and uncategorized objects which is something that tends to happen in bigger javascript apps).


		## How to use Typescript in your Gatbsy.js site.

		We are going to install two plugins:


		### Typechecking

		As the typescript plugin docs state, by default it wont run typechecks on your code, it


		### gatsby-plugin-typescript

		I did not made any special configurations to this plugin.

Gatbsy typescript post #14

Are you sure you want to change the base?

Gatbsy typescript post #14

Uh oh!

Conversation

franleplant commented Apr 11, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

igamigo May 6, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

igamigo May 6, 2020 •

edited

Loading