
Ask HN: Which TypeScript codebase should I study to get better? - nblavoie
I&#x27;ve been doing TypeScript professionally for the last 8 months or so and I would like to push further my knowledge of the language by reading well documented and high profile app or packages. Any suggestions ?
======
evmar
The TypeScript compiler is the canonical corpus of code written by TypeScript
experts, and I learned a lot of interesting style from the time I've spent
with it. (Fun fact: they don't use 'class' in the compiler at all, but instead
have a different pattern for passing around interfaces+state that is much more
TypeScript-y.)

~~~
Scarbutt
_Fun fact: they don 't use 'class' in the compiler at all_

Looks like a class to me:
[https://github.com/Microsoft/TypeScript/blob/master/src/comp...](https://github.com/Microsoft/TypeScript/blob/master/src/compiler/core.ts#L79)

~~~
wwwigham
We do use classes in the test harness, services layer, and to polyfill es6
Map. We just don't use them in the design of any compiler subsystems.

~~~
chamakits
This is very interesting to me.

Is the reasoning behind this documented anywhere?

I could only find instructions the coding guideline indicating as much (here:
[https://github.com/Microsoft/TypeScript/wiki/Coding-
guidelin...](https://github.com/Microsoft/TypeScript/wiki/Coding-
guidelines#classes)) but couldn't find why. I'd love to know why, may better
inform my usage of typescript.

------
disease
Visual Studio Code:
[https://github.com/microsoft/vscode](https://github.com/microsoft/vscode)

~~~
legohead

        if (!!process.send
    

Is there something I'm missing here? Why not just:

    
    
        if (process.send

~~~
nicolashahn
`!!x` is guaranteed to evaluate to a boolean value of `true` or `false`.

`if (x)` evaluates truthiness of `x` which in Javascript land might behave
differently. I don't know how off the top of my head, but I know it's
something to be cautious of in this language and its derivatives.

~~~
Stratoscope
An if statement works exactly the same whether you pass it a boolean true or
false, or any truthy or falsy expression.

In other words, these are 100% equivalent:

    
    
      if( anything ) { ... }
    
      if( !!( anything ) ) { ... }
    

The !! is redundant here, unless there's something relevant that isn't shown
in the if statement excerpt in legohead's comment.

~~~
always_good
It's just explicit coercion.

If there was a linter rule I could turn on to require booleans in if-
conditions, I'd enable it.

`!!` might seem silly, but it's a hint that you intended for coercion to
happen. A similar but better example would be preferring `if (x > 0)` over `if
(x)` even though non-zero is truthy.

There's an even better case for returning `!!x` from a function even though
you could return `x` and let the call-site coerce it. The problem with that is
that the call-site can build a dependency on the value of `x` beyond truthy vs
falsey.

In a weakly typed language like Javascript, I don't think you'll ever regret
being a little more explicit.

~~~
sciolistse
TSLint has this: [https://palantir.github.io/tslint/rules/strict-boolean-
expre...](https://palantir.github.io/tslint/rules/strict-boolean-expressions/)

It doesn't play well with the vscode tslint extension for some reason (doesn't
show up at all) so you need to run tslint manually to see the errors.. but
it's better than nothing.

~~~
recursive
But that also includes operands to !, so you wouldn't be able to use !! to
bool-ify something.

------
Flux159
If you want to learn more about 3d engines (game or rendering), I would
recommend BabylonJS:
[https://github.com/BabylonJS/Babylon.js](https://github.com/BabylonJS/Babylon.js)

It has fairly good docs:
[http://doc.babylonjs.com/](http://doc.babylonjs.com/) as well as an active
forum for developers and users:
[http://www.html5gamedevs.com/forum/16-babylonjs/](http://www.html5gamedevs.com/forum/16-babylonjs/)

Other options mentioned are also good - the Typescript compiler
([https://github.com/Microsoft/TypeScript](https://github.com/Microsoft/TypeScript))
is good to get started with especially if you read this Gitbook:
[https://basarat.gitbooks.io/typescript/content/docs/compiler...](https://basarat.gitbooks.io/typescript/content/docs/compiler/overview.html)

You could also search popular typescript github projects that are more closely
related to what you work on, but the Typescript compiler and Babylonjs 3d
engine are both well written projects with fairly good documentation in my
opinion.

------
nikcub
Three i've read through recently:

1\. InversifyJS - DI in Typescript / JS

[https://github.com/inversify/InversifyJS](https://github.com/inversify/InversifyJS)

2\. TypeORM - as it says, might be the best ORM for nodejs projects:

[https://github.com/typeorm/typeorm](https://github.com/typeorm/typeorm)

3\. Searchkit - ES web frontend - react + typescript

[https://github.com/searchkit/searchkit](https://github.com/searchkit/searchkit)

~~~
greenscale
+1 for InversifyJS - I learned a lot of TypeScript by just reading through the
actual Inversify codebase, and then used what I learned to write what would
become [https://github.com/inversify/inversify-express-
utils](https://github.com/inversify/inversify-express-utils).

Also, thanks to the Inversify contributors for continuing to maintain and
improve express-utils!

~~~
dvlsg
+1 for InversifyJS from me too. I've also been looking at the inversify
express utils lately -- loving it so far!

Do you know if there are any plans for allowing the http context (req, namely)
to be injected into services? Similar to the IHttpContextAccessor in dotnet
core?

I have some use cases for using pieces of the http context (headers) to
instantiate some transient services. I started putting together my own pieces
to see what I could get away with. Looks like it works okay, but I had to
create a new container per request, using the `Container.parent` to link them.

~~~
remojansen
This should be possible now. You can implement by yourself as described at
[https://twitter.com/RemoHJansen/status/927542673682116611](https://twitter.com/RemoHJansen/status/927542673682116611).
I have already started to think about a way to add this into the inversify-
express-utils but I have to think it well so it can support all kinds of auth.

------
klodolph
The TypeScript compiler itself is written in TypeScript:
[https://github.com/Microsoft/TypeScript](https://github.com/Microsoft/TypeScript)

~~~
bringtheaction
That's cool but surely any implementation of a language in itself is going to
deal with some pretty fringe situations, so it might not be the best thing to
read in order to learn how you should write other things in that language?

~~~
klodolph
There's no reason why implementing a language in itself would be special, it's
not dealing with fringe situations in any sense of the word. It is traditional
to write compilers in the very language they compile, except for slow
interpreted languages, and a compiler is a very well-studied type of program
that includes a variety of different types of code such as straight text
processing, error reporting, and recursive data structures. Compilers are
often used as test beds for new language features, famously, Niklaus Wirth
would measure language improvements based on how much they would improve the
language's compiler.

Think about it this way: a TypeScript compiler takes a bunch of text as input,
and produces a bunch of text as output. That's not really special or weird, is
it?

(The only hard part is the “bootstrapping problem” which is what happens when
you want to write a compiler for language X using language X, but you can’t
compile it because you don’t have a compiler yet.)

~~~
mhermher
Interested in that bootstrapping process. Is it just that the first version
has to be compiled with some other language. From then on, you just use the
previous version that you have compiled already?

~~~
dcuthbertson
From what I recall, start by writing a minimal compiler for language X in some
other language, Y, and compile it. Now you have an X-compiler written in Y.

Rewrite the minimal compiler in X, and compile it using the one that was
written in Y. That gives you an X-compiler written in X compiled from one
written in Y.

To be sure _that one_ works, recompile your X source code with that last
compiler. Now you have a compiler written in X and built with one also written
in X.

Continue to add more features written in minimal-X to get X-compilers with
more X features.

~~~
pjmlp
Just as small improvement, for the first step an interpreter is a better
approach, just to ease the bootstraping process by not having to write a
compiler backend twice.

------
rightisleft
I really love this ORM project for typescript:

[http://typeorm.io/](http://typeorm.io/)

It's also one of the larger enterprise grade projects that i've seen done
natively in TS. It pretty much uses all the bells and whistles that the
language provides. Some decent patterns, and an active developer community.

~~~
disease
A little off topic, but is anyone using this in a large production
environment? I'm currently using sequelize for a side project and haven't been
terribly happy with it. TypeORM looks better but it feels like it has just
sprung out of nowhere and is maybe too new to use in the real world.

~~~
nikcub
Project I know just replaced sequelize with TypeORM and is about to go into
production - the beta has been great

There is this issue talking about production readiness with more feedback:

[https://github.com/typeorm/typeorm/issues/591](https://github.com/typeorm/typeorm/issues/591)

You should know about quirks like this one:

[http://typeorm.io/#/relations-faq/avoid-relation-property-
in...](http://typeorm.io/#/relations-faq/avoid-relation-property-initializers)

I've been spending more and more time reading the code and tracking the open
issues - getting comfortable with phasing it into a production system

------
yesimahuman
We use TypeScript heavily at Ionic.

Ionic Framework 2+ is TS: [https://github.com/ionic-
team/ionic](https://github.com/ionic-team/ionic)

Our new web component compiler Stencil is also TS: [https://github.com/ionic-
team/stencil](https://github.com/ionic-team/stencil)

~~~
nblavoie
Nice. Simple question. How do you educate your developers on TypeScript or
Angular? What is the training path they follow to become top notch?

~~~
yesimahuman
No specific education, just jump in and follow existing patterns. Most devs we
hire pick it up quickly and we have people here that can help with more
complicated questions. We have a few people who really grok the type system
and can help with nasty type issues when they come up.

------
bradyholt
GitHub Desktop is 92% TypeScript:
[https://github.com/desktop/desktop](https://github.com/desktop/desktop)

------
nblavoie
And what about the "TypeScript Design Patterns" book, you guys have read it ?
Is it good ? Is it worth the investment ?
[http://amzn.to/2ym40AW](http://amzn.to/2ym40AW) And what about Online Courses
on Udemy?

------
coding123
I recently wrote and submitted a pull-request to DefinitelyTyped. Find non-
Typescript packages and add the typings :).

~~~
ben_jones
Or, if you're a hero, find the packages with bad typings and fix them <3333

~~~
WorldMaker
My favorite is finding the libraries that _now_ have typings (they migrated to
TS themselves or got a good definition PR they accepted, maybe even a PR you
sent the library directly), and sending the removal PR to DT. DT is _huge_ so
every file that can be removed is a little bit less of a papercut in checkout
time and testing time for the next branch/developer.

------
DonHopkins
This is a great discussion! Reading good code is the best way to learn.

Reading the NativeScript code gave me a really good impression of TypeScript,
although I'm just learning it and haven't written much yet myself.

[https://www.nativescript.org/using-typescript-with-
nativescr...](https://www.nativescript.org/using-typescript-with-nativescript-
when-developing-mobile-apps)

I have a huge blob of old JavaScript cellular automata code I want to rewrite
in TypeScript, but first I want to read some good TypeScript code before
starting so I don't mess it up.

It has a bunch of old "frameworky" meta-programming code and data structures
that I've painted myself into a corner with (see the "type definitions"
comments), which I'd like to throw away and re-implement from scratch, because
TypeScript is much better suited for that kind of stuff. And then there's a
bunch of brute force bit bashing and number crunching code that I hope will
just run without any modification and only a little repackaging, which is
another nice benefit of TypeScript.

[https://github.com/SimHacker/CAM6/blob/master/javascript/CAM...](https://github.com/SimHacker/CAM6/blob/master/javascript/CAM6.js)

------
dresr_throwaway
If you're going to be doing React - the Blueprint source (Palantir's react ui
kit) seems to be really well written. I don't work there... I just use it.

[https://github.com/palantir/blueprint/tree/master/packages/c...](https://github.com/palantir/blueprint/tree/master/packages/core/src/components)

~~~
devj
Few questions:

1\. How has been your experience with Blueprint JS?

2\. Is it possible to take a look at your work?

3\. Would you recommend using it? If yes, what types of apps?

~~~
PhrosTT
I use it for internal admin type apps. Can't really show to it you though
sorry.

It is pretty damn thorough tho and the css is relatively minimal if you need
to custom skin the components.

Yes I would recommend it highly. Just look through the components they have
mostly everything covered.

------
zengid
The firebase web SDK is written in TypeScript:
[https://github.com/firebase/firebase-js-
sdk](https://github.com/firebase/firebase-js-sdk)

------
lloyd-christmas
Rxjs is another good one.

[https://github.com/ReactiveX/rxjs](https://github.com/ReactiveX/rxjs)

------
kevinSuttle
I would take an existing vanilla JS project if you have one, and convert it. I
learned a lot there. You can also learn a lot of the conventions by
using/studying TSLint.
[https://github.com/palantir/tslint](https://github.com/palantir/tslint)

------
palimpsests
GlimmerJS

[https://github.com/glimmerjs/glimmer.js](https://github.com/glimmerjs/glimmer.js)

------
basarat
TypeStyle [https://typestyle.github.io/](https://typestyle.github.io/)

------
kjaer
lit-html is relatively short and well documented.

[https://github.com/PolymerLabs/lit-html](https://github.com/PolymerLabs/lit-
html)

------
abritinthebay
Depends. How good are you at JS? Because I think learning what great JS looks
like will give you a better grounding in what TS is actually adding to JS and
what is “good TS” vs “good general practice”.

That might sound dismissive of TS but it’s not, I’m just trying to get a sense
on what you’re trying to learn from TS.

------
ihsw2
Not to toot my own horn but I quite like my personal project, an HTTP client
for the Toxiproxy server (a programmable TCP proxy).

[https://github.com/ihsw/toxiproxy-node-
client](https://github.com/ihsw/toxiproxy-node-client)

