Your Choice JavaScript News

TypeScript News Monday, March 12 Typescript, Typescript compilation integrate, Lazy loading & more…

TypeScript News TLDR / Table of Contents

  • Using TypeScript With NodeJs
    • Lately I have started to combine Typescript more and more with nodejs coding. In this post I will show how to incorporate Typescript into a nodemon based workflow.
    • Typescript, Typescript compilation integrate, regular javascript, plain Typescript, Typescript compiler
  • Code Splitting using Lazy Loading with React, Redux, Typescript, and Webpack 4
    • Here at Innovid, a leading video marketing platform where we serve 1.3 million hours of video per day, we love Webpack and use it in many of our web-based projects.Recently we migrated one of our…
    • lazy loading, initially served bundle, app entry point, compelling features Webpack, video marketing platform
  • Why I moved to TypeScript and have no regrets –
    • It‘s worth being said that it wasn’t my intention to move to TypeScript instead of vanilla JS. It just happened that we decided to move our production-ready project to Angular 4, which, as all of you…
    • typescript, abstract classes, JavaScript, TypeScript code, ECMAScript aka JavaScript
  • In this post I will show how to incorporate Typescript into a nodemon based workflow.
  • I think its perfectly fine to develop your node application using regular Javascript if youre not a fan of Typescript.
  • How does Typescript compilation integrate with nodemon?
  • The base command I use is: – – This tells nodemon to rerun the exec command every time there is a file change.
  • To simplify the nodemon command, Ive moved the watch configurations to a separate nodemon.json file: – – This tells nodemon which folders and file extensions to watch.

Tags: Typescript, Typescript compilation integrate, regular javascript, plain Typescript, Typescript compiler

  • For example: redux-form (a library for managing forms in react redux apps), which is only used in a large component named GenerateTags, is a good candidate for lazy loading, as its quite large and used only in specific scenarios.
  • This was happening because redux-form is also being imported in another file, where we add the redux reducer into our combineReducers redux function like this: – adding redux form reducer to our app reducersThe static import statement at the top causes the redux-form library to be a part of our…
  • First we removed the import of the redux-form reducer at the top and added some code to allow injecting redux reducers dynamically: – Configuring the redux store and Injecting Async Redux ReducersLastly we call our injectAsyncReducer from the componentDidMount of GenerateTags component: – Injecting the redux form reducer on the…
  • tsconfig.json for dynamic importsThe final result looks like this: – Final split: vendors.js 314 KiB, app.js 96.6 KiB, generateTags.js 23.2 KiB, vendors~generateTags.js 90.2KiBFinally we achieved what we wanted, the GenerateTags along with its dependency redux-form are now separated from our vendors bundle and lazy loaded on demand.
  • By using dynamic imports in your app you can reduce the final bundle sizes served on first page load and provide faster load time by deferring the load of certain parts of your app.Typescript supports dynamic imports since version 2.4.

Tags: lazy loading, initially served bundle, app entry point, compelling features Webpack, video marketing platform

  • TypesFor those of you who didnt work or hear about TypeScript: – it is a typed superset of JavaScript that compiles to plain JavaScriptIt becomes obvious from the language name that the main difference lies in the fact that TS uses types.
  • If not mentioning that TS classes also provide us, developers, with public, private, static, readonly members of classes, it also introduces to us Abstract Classes and Interfaces, which we do not currently have in JavaScript.
  • The abstract keyword is used to define abstract classes as well as abstract methods within an abstractclass.The simpliest and the most vivid example of Abstract Class is: – abstract class Animal { – abstract makeSound(): void; – move(): void { – console.log(roaming the earth); – } – }Interfaces are another…
  • Public, Private, Protected, Static, Readonly ModifiersAs its been mentioned before, ES6 introduced classes to JavaScript developers, but it missed one important thingmodifiers.
  • Namespaces andModulesComparing to ES6, which has modules to help developers organize their code, TypeScript also gives them such a nice thing as namespaces that are heavily used in other OOP languages like C#.

Tags: typescript, abstract classes, JavaScript, TypeScript code, ECMAScript aka JavaScript