TypeScript

TypeScript

Application and Data / Languages & Frameworks / Templating Languages & Extensions
Avatar of sa-adebayo
Engineering Manager at Andela·
Shared insights
on
BitBitReactReactMaterial-UIMaterial-UI
in

I picked up an idea to develop and it was no brainer I had to go with React for the frontend. I was faced with challenges when it came to what component framework to use. I had worked extensively with Material-UI but I needed something different that would offer me wider range of well customized components (I became pretty slow at styling). I brought in Evergreen after several sampling and reads online but again, after several prototype development against Evergreen—since I was using TypeScript and I had to import custom Type, it felt exhaustive. After I validated Evergreen with the designs of the idea I was developing, I also noticed I might have to do a lot of styling. I later stumbled on Material Kit, the one specifically made for React . It was promising with beautifully crafted components, most of which fits into the designs pages I had on ground.

A major problem of Material Kit for me is it isn't written in TypeScript and there isn't any plans to support its TypeScript version. I rolled up my sleeve and started converting their components to TypeScript and if you'll ask me, I am still on it.

In summary, I used the Create React App with TypeScript support and I am spending some time converting Material Kit to TypeScript before I start developing against it. All of these components are going to be hosted on Bit.

If you feel I am crazy or I have gotten something wrong, I'll be willing to listen to your opinion. Also, if you want to have a share of whatever TypeScript version of Material Kit I end up coming up with, let me know.

READ MORE
18 upvotes·1 comment·393.8K views
Murat Umutlu
Murat Umutlu
·
January 25th 2021 at 12:14PM

Hi Adebayo, If you look something different from MaterialUI, you may like Tailwind CSS or Semantic UI. You may want to try IBM Carbon Design System when you build a commercial dashboard. Typescript can be challenging for the first time. Also you don't need Bit for hosting your components. You can create a boilerplate for yourself, send it to npm and when you start a new project you may use it.

·
Reply
Needs advice
on
TypeScriptTypeScript
and
Flow (JS)Flow (JS)

From a StackShare community member: "We are looking to rewrite our outdated front-end with TypeScript. Right now we have a mix of CoffeeScript and vanilla JavaScript. I have read that adopting TypeScript can help enforce better code quality, and best practices. I also heard good things about Flow (JS). Which one would you recommend and why?"

READ MORE
6 upvotes·42.4K views
Replies (15)
Recommends
TypeScriptTypeScript

I use TypeScript because:

  • incredible developer tooling and community support
  • actively developed and supported by Microsoft (yes, I like Microsoft) ;)
  • easier to make sense of a TS codebase because the annotations provide so much more context than plain JS
  • refactors become easier (VSCode has superb support for TS)

I've switched back and forth between TS and Flow and decided a year ago to abandon Flow completely in favor of TS. I don't want to bash Flow, however, my main grievances are very poor tooling (editor integration leaves much to be desired), a slower release cycle, and subpar docs and community support.

READ MORE
17 upvotes·20.5K views
Recommends
TypeScriptTypeScript

I use TypeScript because it isn't just about validating the types I'm expecting to receive though that is a huge part of it too. Flow (JS) seems to be a type system only. TypeScript also allows you to use the latest features of JavaScript while also providing the type checking. To be fair to Flow (JS), I have not used it, but likely wouldn't have due to the additional features I get from TypeScript.

READ MORE
11 upvotes·43.6K views
View all (15)
Avatar of objmj-itminds
Senior Software Developer at IT Minds·
Shared insights
at
()

At IT Minds we create customized internal or #B2B web and mobile apps. I have a go to stack that I pitch to our customers consisting of 3 core areas. 1) A data core #backend . 2) A micro #serverless #backend. 3) A user client #frontend.

For the Data Core I create a backend using TypeScript Node.js and with TypeORM connecting to a PostgreSQL Exposing an action based api with Apollo GraphQL

For the micro serverless backend, which purpose is verification for authentication, autorization, logins and the likes. It is created with Next.js api pages. Using MongoDB to store essential information, caching etc.

Finally the frontend is built with React using Next.js , TypeScript and @Apollo. We create the frontend as a PWA and have a AMP landing page by default.

READ MORE
The Leading Web stack of an IT Minds Senior Developer. - DEV Community 👩‍💻👨‍💻 (dev.to)
12 upvotes·177.4K views
Avatar of Scrayos
CEO at Scrayos UG (haftungsbeschränkt)·

For our internal team and collaboration panel we use Nuxt.js (with TypeScript that is transpiled into ES6), Webpack and npm. We enjoy the opinionated nature of Nuxt.js over vanilla Vue.js, as we would end up using all of the components Nuxt.js incorporates anyways and we can adhere to the conventions setup by the Nuxt.js project, which allows us to get better support in case we run into any dead ends. Webpack allows us to create reproducable builds and also debug our application with hot reloads, which greately increased the pace at which we are able to perform and test changes. We also incorporated a lot of testing (ESLint, Chai, Jasmine, Nightwatchjs) into our pipelines and can trigger those jobs through GitLab CI. All packages are fetched through npm, so that we can keep our git repositories slim and are notified of new updates aswell as reported security flaws.

READ MORE
6 upvotes·50.2K views
Needs advice
on
Spring BootSpring Boot
and
NestJSNestJS
in

I am currently planning to build a project from scratch. I will be using Angular as front-end framework, but for the back-end I am not sure which framework to use between Spring Boot and NestJS. I have worked with Spring Boot before, but my new project contains a lot of I/O operations, in fact it will show a daily report. I thought about the new Spring Web Reactive Framework but given the idea that Node.js is the most popular on handling non blocking I/O I am planning to start learning NestJS since it is based on Angular philosophy and TypeScript which I am familiar with. Looking forward to hear from you dear Community.

READ MORE
7 upvotes·170.6K views
Replies (2)
Recommends
NestJSNestJS

NestJS is an excellent framework (they both are). I would say the fact that you're working with Angular makes NestJS a great match, unless you're splitting front and back end between developers. But even in that case I would still go with NestJS for a new project.

Regarding the single threading point, take a look at PM2 which helps to run Node in multiple processes (we use it with NestJS) https://pm2.keymetrics.io/docs/usage/cluster-mode/

Also regarding web server performance in general this is an interesting post showing how Node with outperform Java in a web situation (be careful though, best to check a few posts to make sure these aren't totally biased benchmarks!): https://www.tandemseven.com/blog/performance-java-vs-node/

READ MORE
8 upvotes·1 comment·115K views
Slimane Deb
Slimane Deb
·
July 16th 2020 at 12:59AM

Thank you for passing by. Those are some great resources. I will check them and setup my mind.

·
Reply
Recommends
KotlinKotlin

Node.js has only 1 real thread per process; Java JIT will mostly run faster than JS one; So if it happens to be not only I/O... Why do you need most popular, not simply popular? Does Node.js have tech advantages?

READ MORE
3 upvotes·2 comments·115.1K views
Slimane Deb
Slimane Deb
·
July 16th 2020 at 12:58AM

In fact, it will be mostly I/O operations, since I don't have a clear overview of what Spring 5 Reactive Framework, I think I would go for node. Did you happen to work with spring boot + mongodb ?

·
Reply
Sergei Kirjanov
Sergei Kirjanov
·
July 17th 2020 at 9:57PM

1) No, I have not used either spring boot or mongodb.

But I used JVM with dozens cpu cores busy cooperating tightly with each other, and Node will not give me such option.

Say me, if Node ecosystem can give anything, that JVM can not.

2) In MongoDB, a write operation is atomic on the level of a single document, so it's harder to deal with consistency without transactions.

So I'll need a very good reason to start using such system. What is Your reason?

·
Reply
Needs advice
on
TypeScriptTypeScript
and
JavaScriptJavaScript

Hi everybody, I'm newbies of TypeScript. I just started learning about TypeScript and I don't know where to start and how to start. I need someone to help with this, maybe share some documents, some experience about it. Thank you very much!

READ MORE
1 upvote·3.4K views
Replies (1)
Recommends
TypeScriptTypeScript

https://github.com/microsoft/TypeScript/wiki/TypeScript-Design-Goals

https://github.com/Microsoft/TypeScript/wiki/FAQ#what-is-type-erasure

https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

TypeScript is definitely awesome. Before TypeScript, I would make sure you have a good background in component based design. You are no longer writing a webpage directly. You are writing a program that writes a webpage through transpiling.

I didn't spend as much time on TypeScript as I did on functional programming principles:

https://mostly-adequate.gitbooks.io/mostly-adequate-guide

And went straight to fp-ts and io-ts where I focus my efforts.

https://www.tooploox.com/blog/bridging-static-and-runtime-types-with-io-ts

https://github.com/gcanti/fp-ts/tree/master/test

If you are interested in how TypeScript actually works without a background in writing compilers, prepare to enter the Thunderdome. You will be building a compiler, a series of functions that need to run quick and meet a ton of specific unit tests:

https://blog.andrewbran.ch/debugging-the-type-script-codebase/#brief-architecture-review

READ MORE
3 upvotes·106 views
Needs advice
on
TypeScriptTypeScript
and
ES6ES6

I consider myself now (after a few years of practice) to be a decent JavaScript/Node.js practitioner. So can someone convince me that I have to learn TypeScript and use it in my everyday life? In other words, why would TypeScript be necessary over some proper ES6 compliant code with strict mode enabled? Any thoughts/opinions are welcome.

EDIT 07/20/2020 : Thank you all for your feedback. I'm definitely going to invest some time in some TypeScript education in the long run. Apart from all the points you made in your responses (static typing, compilation, codebase consistency, etc ...), the fact that Deno may go big (which I hope, the improvements over Node.js could be life changing) and that Visual Studio Code (which I use) is built on top of Electron using TypeScript is what convinces me.

READ MORE
mulekick · GitHub (github.com)
17 upvotes·17.7K views
Replies (7)
Avatar of chriskevin
Software Engineer at Minna Technologies·
Recommends
TypeScriptTypeScript

I was asking myself this same question a few years ago. I felt that ES6 provided a terse, declarative syntax, that in combination with unit tests was reliable enough. Dynamic typing kept the code looking clean and left most functions generic and reusable for several data types. However, as your code base starts to grow and more and more "ad hoc" data types are introduced. It starts to become very hard to maintain and refactor code because you have to keep long call chains in your head and you sometimes don't know if you can remove a field from an object without introducing a runtime error. In essence, the less strict a programming language is the more you will have to test explicitly all the time. On top of that JavaScript is really good at coercing types in weird ways.

So the main benefit that TypeScript brings is static typing. You make your code more explicit, thereby limiting the number of unintentional behaviors that are possible. The compilers type checker can suddenly take care of testing these extra constraints for you and you start removing this burden from your unit tests. As a matter of fact TypeScript has a pretty advanced type system, a magnitude better than the current Java version (14) or Go-lang. One of these features are union types (aka. coproduct, sum type, etc). This lets you represent your types as "this thing" or "this other thing". Returning a disjoint union can make your code even more explicit and thus further limiting the number of unintentional behaviors. A simple example of this is the head function that returns the first element of a list. Either you get the value or you get undefined if the list is empty. A better approach is to return a Maybe type which is either an instance of Just(<value>) or Nothing. This tells you that the code calling head needs to handle exactly two possible cases. Languages with even stronger type systems like Elm and Haskell can even enforce that your code won't compile unless you handle all the possible cases for any union type. So again the compiler helps you avoid more runtime errors.

So to conclude the benefits of using a language with strong static typing:

  • Compiler helps you avoid runtime errors
  • Substantially reduce number of explicit unit tests
  • Better security and reliability by preventing unintentional behavior
  • Let's you refactor code with confidence
  • Code becomes more self-documenting
READ MORE
20 upvotes·2 comments·9.4K views
Ashwani Agarwal
Ashwani Agarwal
·
July 16th 2020 at 9:12AM

The unintended behaviour of addition (or not knowing the gotchas) on web-browser have always got FE devs scratching their head. I never really got a chance to work on an actual TS project professionally, but having worked with Node.js quite a lot and later moving to Java (mostly for web services), I just didn't want to move back to Node.js. But TS is definitely a game-changer.

·
Reply
Chris Sundberg
Chris Sundberg
·
July 16th 2020 at 9:45AM

Unfortunately there is too much "quick and dirty" rather than "correct, secure and reliable" in our industry.

·
Reply
Avatar of 716green
President & Full Stack Enginee at Narro, LLC·
Recommends
TypeScriptTypeScript

I've been feeling the same way and it was almost too simple for me. First, strongly typed languages are objectively better for catching errors during development instead of during production so a small amount of work upfront pays huge dividends later. But the easy part is how actionable it is.

Find a codebase that you want to convert. For me, it was a server that I wanted to convert to Firebase cloud functions to go serverless. I took my server.js file and copied it as server.ts. I created a simple tsconfig.json file in the root with some standard settings online and then I let the VS Code IntelliSense guide the migration. It was so much easier than I expected and I learned TypeScript as I was converting my codebase.

It was almost too easy and now I have all of the benefits of feature-rich and built-in assistance in my code-editor. Documentation on hover, clear and clean errors. This was only about 2 weeks ago and I am not sure I'd ever go back to Vanilla JS now. It was love at first use with me.

READ MORE
8 upvotes·9.4K views
View all (7)
Avatar of Louai-H
Full Stack Web Developer ·
Needs advice
on
Node.jsNode.jsNestJSNestJS
and
ExpressJSExpressJS

I'm planning with a small team to create an application which is a platform for restaurants. I'm on the backend almost alone currently. I'm going to use Node.js for that, and I'm very fond of TypeScript, and I worked before mostly with ExpressJS. The team may get bigger as the application becomes bigger and more successful, so I have the Scalability concern in mind now, and I was considering these options: 1) Use Node+Express+Typescript 2) Use Node+NestJs (which utilizes Typescript by default)

Option 2 is enticing to me because recently I came to love NestJS and it provides more scalability for the project and uses Typescript in the best way and uses Express under the hood. Also I come from an Angular 2 background, which I think is the best frontend framework (my opinion, and I know React quite well), which makes Nest feel familiar to me because of the similarity between Nest and Angular. Option 1 on the other hand uses Express which is a minimalist framework, very popular one, but it doesn't provide the same scalability and brings decision fatigue about what to combine with it and may not utilize Typescript in the best way. Yet, on the other hand, it is flexible and it may be easier to manipulate things in different ways with it. Another very important thing is that it would be easier in my view to hire Node developers with skills in Express than NestJs. The majority of Node developers are much more familiar with JavaScript and Express.

What is your advice and why? I would love to hear especially from developers who worked on both Express and Nest

READ MORE
7 upvotes·116.8K views
Replies (6)
Avatar of wenderpmachado5128
Full Stack Engineer at RG Sistemas·
Recommends
NestJSNestJS

I highly recommend NestJS because:

  • It's a framework you already like;
  • Typescript is growing fast, being increasingly adopted in the community;
  • All layers are well defined, not needing to think much about the organization;
  • Great documentation;
  • Nest CLI increases the development speed and keep the pattern;

Only using express and knowing that project can grow, you'ill need to define the structure well so that it doesn't get out of control.

READ MORE
9 upvotes·81.3K views
Avatar of rhogeranacleto
Developer at Magrathea Labs·
Recommends
NestJSNestJS

Hi Louai,

I am quite sure that you know the answer to your problem. And I am here to help you to follow your arrow. I have worked with the most popular Nodejs frameworks and I can sure you that there's no stack better than NestJS (at all). Typescript is the best thing that happened with Javascript, this is a fact. Ans NestJS make a such wonderful job using all the best Typescript tools. NestJS is the most mature and organized API manager. Its modular dependence injection, the use of DDD, the solid idea of single responsibility, it's unit a and e2e testing support, its documentation is the most incredible work in the world of Nodejs. You won't regret choosing this framework, even if your application grows a lot. If you follow the documentation tips you will be able to create an amazing and organized application.

ps: I am not part of the NestJS team, I am just a guy tired of wasting time with dumb and bad Frameworks and its bad documentations. I find relief in NestJS with all the time it's saved to me, it helped me to improve my job and let me create great things with Nodejs.

READ MORE
5 upvotes·81.3K views
View all (6)
Avatar of zimoony
Senior Fullstack Developer at QUANTUSflow Software GmbH·

Here are our 3 main claims why TypeScript is the way to go.

  • TypeScript is simply JavaScript that scales
  • TypeScript is a superset of JavaScript
  • TypeScript is not a "new" language - It is JavaScript from the future

TypeScript has the following main advantages compared to JavaScript:

  • Typing & Scoping: With static typing, the type of a variable is known at coding time. In dynamic typing the types might be uncertain which could lead to runtime errors. Therefore Strong typing leads to fewer runtime errors. The declaration of variables when it comes to Function Scoping (var) vs. Block Scoping (let) introduced pitfalls lurking in JavaScript. The solution in ES6 - and thus TypeScript - is let. Because variables declared with let follow the rules of block scoping.

  • Collaboration: When large coding projects have many developers there is a chance of messier coding. The number of errors increases which makes the handling difficult. With strong typing the amount of errors decreases and debugging becomes much more easier.

  • Productivity: TypeScript uses the latest ECMA features. Auto-completion features as well as more clear, comprehensible and readable code will boost the productivity of the developer drastically.

READ MORE
15 upvotes·3 comments·34.5K views
Angelo Cicero
Angelo Cicero
·
April 23rd 2020 at 12:23PM

Are you using it with a frontend framework?

·
Reply
Simon Reymann
Simon Reymann
·
April 23rd 2020 at 2:19PM

Yes, we use Vue.js (using Nuxt).

·
Reply
Angelo Cicero
Angelo Cicero
·
April 23rd 2020 at 10:33PM

Cool - I use Vue as well and would love to try Vue 3 out with Typescript.

·
Reply
Avatar of zimoony
Senior Fullstack Developer at QUANTUSflow Software GmbH·

Our whole Vue.js frontend stack (incl. SSR) consists of the following tools:

  • Nuxt.js consisting of Vue CLI, Vue Router, vuex, Webpack and Sass (Bundler for HTML5, CSS 3), Babel (Transpiler for JavaScript),
  • Vue Styleguidist as our style guide and pool of developed Vue.js components
  • Vuetify as Material Component Framework (for fast app development)
  • TypeScript as programming language
  • Apollo / GraphQL (incl. GraphiQL) for data access layer (https://apollo.vuejs.org/)
  • ESLint, TSLint and Prettier for coding style and code analyzes
  • Jest as testing framework
  • Google Fonts and Font Awesome for typography and icon toolkit
  • NativeScript-Vue for mobile development

The main reason we have chosen Vue.js over React and AngularJS is related to the following artifacts:

  • Empowered HTML. Vue.js has many similar approaches with Angular. This helps to optimize HTML blocks handling with the use of different components.
  • Detailed documentation. Vue.js has very good documentation which can fasten learning curve for developers.
  • Adaptability. It provides a rapid switching period from other frameworks. It has similarities with Angular and React in terms of design and architecture.
  • Awesome integration. Vue.js can be used for both building single-page applications and more difficult web interfaces of apps. Smaller interactive parts can be easily integrated into the existing infrastructure with no negative effect on the entire system.
  • Large scaling. Vue.js can help to develop pretty large reusable templates.
  • Tiny size. Vue.js weights around 20KB keeping its speed and flexibility. It allows reaching much better performance in comparison to other frameworks.
READ MORE
19 upvotes·1 comment·479.1K views
rishabh2712
rishabh2712
·
April 25th 2020 at 6:24AM

Thanks a lot for sharing.

·
Reply