We’re on the home-straight with this series. Today we’ll have a brief look over the help you get when refactoring TypeScript code, then we’ll finish off another week with using type aliases to build a rich domain for your application.
One of the big gains of using a strongly typed language comes when you want to refactor your code. Refactoring should be one of those things which developers do regularly as a codebase matures and grows. Working with TypeScript in the way in which I’ve been describing means that we have enough information for it to let you know all the places in your codebase will need to be updated as a result of a change. In fact if it is within the same codebase, it is often possible the tools can do it for you.
Hello again, I hope you’re finding this series helpful. We’re taking the time to look at different facets of working with React where TypeScript can make a real impact. At Seccl we love using TypeScript and I’ve been using it for several years now. Adopting it has been one of the best decisions I have made.
We’ve covered a fair amount so far so feel free to catch up with each post below.
Hello again, another monday another chance to explore the Power of TypeScript. We’re taking a journey through ways TypeScript can help create robust and scalable apps. At Seccl we love using TypeScript and I’ve been using it for several years now. Adopting it has been one of the best decisions I have made.
Actions
Let’s talk about actions, action creators and how reducers interact with them. Actions are a really helpful way to create separation between the different layers of an application, because they are not tightly coupled each layer can be built and tested in pieces. It does bring it’s challenges however, whilst the code is loosely coupled, all areas of the code which interact with the action need to have the same expectation of it’s structure.
Welcome back to our Power of TypeScript series. We’re taking a journey through ways TypeScript can help create robust and scalable apps. At Seccl we love using TypeScript and I’ve been using it for several years now. Adopting it has been one of the best decisions I have made.
Connected or Stateful Components
We looked at how adding some simple TypeScript interfaces can help you build and refactor Pure React Components. Today we’ll look at the common usage of Redux with React. We’ll see how we can help keep the code robust and I’ll highlight another nice side-effect of adding these types.
Here we go! One of the first things you often build with React are the components. Let’s take a look at how TypeScript can enable us to create components which describe their usage.
Component Props and State Interfaces
Pure or Presentational Components
Starting with pure components, we can declare what a component’s props and state should equal. By doing this we can also describe whether a prop is optional or not. TypeScript will help you when using these props to make sure you have catered for the undefined state.
Hey everyone, welcome to Power of TypeScript Series, thanks for being here and I hope you find it useful.
I’m working on keeping each article short enough to read in about 10 to 15 minutes but packed with enough
information to help working with these two fantastic technologies. If you notice any mistakes or ways in which
these articles can be improved please let me know by raising an issue.
At Seccl we love using TypeScript to build JavaScript applications. I’ve been using
it for several years now. Adopting it has been one of the best decisions I have made and it pains me when
I see negative sentiment to what is a very powerful tool. I thought I would put together some explorations,
using it in different situations.
Outside of reading over the concepts of functional programming I have never had the opportunity to really dig deep and get to know the theories, patterns and quirks. There has been a lot of talk in the JavaScript community about using functional programming ideas but I’ve decided to put JavaScript to the side for the moment because, whilst it can be used very easily to do functional programming, it isn’t a functional programming language. It’s also easy to fall back into habits when something is very familiar.
You will see the term “model” used a lot when looking at JavaScript applications that deal with data. But what is a model and how do they help us architect (or structure) code to be more predictable and scaleable.
A model is a set of properties that together hold the information we need to understand a single item. An example of one of these items might be a person or an address. We could model a person by holding details of the properties: name, age and date of birth. We could model an address by holding details of the properties: street, city, country, postal code. The properties we choose will be dependent on what information our application needs.
What is Reactive Programming and Why is it helpful
One of the hardest problems to solve in programming is handling changes over time. This is because changes can come from multiple places, are unknown and will not always come in the same sequence. Even so, we still need to base logic on what is currently known and so we often find that managing these changes result in a very complex system.
We have seen the huge benefits of pure functions for creating high quality and testable JavaScript. I’ve been applying the same understanding to UI components for a while now and am seeing these same benefits. It’s useful to take a look at what makes a “pure component” and how we can change the way we build websites to realise these benefits.
A “pure function” is a function that satisfies two conditions:
Dave Taylor - Software Engineer
