Building a Github Repo Template Part 6: Material-UI with Next/TypeScript

By nature, JavaScript is a loosely typed language similar to vanilla Python, etc. Whereas TypeScript is a (mostly) strongly typed language more similar to Java. In loosely typed languages, there is nothing stopping a developer from re-assigning a variable that is a boolean to be a string, for example. However, this can lead to a lot of bugs from accidental type re-assigning as well as typos with properties, etc. More-robust systems written in these languages tend to need a lot more manual type checking which adds to runtime complexity, more unit testing, etc. Strongly typed code is more self-documenting as well as you know what type of data an argument should take. This works great for teams and code apis where different people may need to interact with others' code. All that said, TypeScript is merely syntactic sugar to mark up JavaScript code to have type definitions. Once TypeScript is transpiled down to native Javascript, the type information is mostly lost and runtime checks should still come into play when dealing with external data (apis, user input, databases etc).

As far as this post goes, the only significant TypeScript related bit is extending the Material-UI Theme and ThemeOptions type to declare the custom theme variables. Typescript understands the "shape" of these objects from the MUI provided types. However, when you add your own properties, the typing no longer matches and produces an error. By using the module declaration syntax, we can extend the definition of the type without having to explicitly define a new type (i.e. MyTheme/MyThemeOptions or similar).