<p>Hello there, and welcome to 2022!</p>
<p>It's the first month of the new year, which means that the term <strong>new year, new me</strong> is still in full swing. So, I've joined the swing by taking on a new challenge at work: working on an existing codebase that uses TypeScript + Vue. My knowledge of TypeScript is minimal - almost nonexistent - and going back to the basics has been fun so far.</p>
<p>Going back to the basics involves trying to understand the conceptual aspects of TypeScript and type systems in general. What is a type system? What are typings? Why is it useful? What do people mean when they say a language is static, duck, or strongly typed?</p>
<h3>Typing</h3>
<p>Assigning a data type to a value or variable.</p>
<h3>Type checking</h3>
<p>Type checking ensures that functions and variables operate within the limit of their constraints. It helps us answer questions like "Does this align with the defined constraints of this value I am trying to use?". It also acts as a way to help us write better programs by stating our intentions with every line of code.</p>
<h3>Type systems</h3>
<p>Type systems are categorized as static, dynamic, structural, nominal, strongly, or weakly typed.</p>
<h3>Static vs Dynamic types</h3>
<p>Static or dynamic typing is based on whether type checking is done at runtime or compile time. What this means is when I write a code in a language that is statically typed, I need to define the types in my code because type checking is done at run time. Examples of statically typed languages are TypeScript, Java, C#, C++;</p>
<p>For dynamic type systems, type checking is carried out at compile time. Not defining types on the go does not prevent the code from running because type checking is done when the language is being compiled (at compile time). Examples of dynamically typed languages are JavaScript, PHP, Python. Although, some languages present the option of taking a static typing route by providing us with optional annotations.</p>
<p>The simple function <em>addTwoNums</em> below is an example of a typed function that takes two parameters - both numbers - and returns the sum of the parameters, also a number. Type checking ensures that only the defined type for each parameter is allowed to be passed in as an argument and nothing else. If I pass in a string instead of a number, TypeScript flags it instantly. Type checking also ensures that the return value of my function is also a number. Not a string, not an object, or an array but a number.</p>
<pre><code>
    function addTwoNums(a: number, b: number) {
        return a + b // this is also going to be a number
    }

</code></pre>
<h3>Structural vs Nominal</h3>
<p>As the name implies, a nominal typing system is typing based on naming. In this category of type systems, the equivalence of types are decided by the name of the types. In a structural typed system, typing is decided based on the structure of the types.</p>
<h3>Strongly vs weak typed</h3>
<p>These particular categories have very loose definitions. This means there is no general or universally accepted definition of a strongly or weakly typed language. Although, I found an excerpt below from Wikipedia on strongly typed systems:</p>
<blockquote>
<p>The more type restrictions that are imposed by the compiler, the more strongly typed a programming language is. Strongly-typed languages often require the programmer to make explicit conversions in contexts where an implicit conversion would cause no harm. Pascal's type system has been described as "too strong" because, for example, the size of an array or string is part of its type, making some programming tasks difficult. Haskell is also strongly typed but its types are automatically inferred so that explicit conversions are often unnecessary.</p>
</blockquote>
<h3>Notes</h3>
<p>Here are some resources I found helpful when starting out with TypeScript:</p>
<ul>
<li><a href="https://en.wikipedia.org/wiki/Type_system">Wikipedia</a>, <a href="https://en.cppreference.com/w/cpp/language/implicit_conversion">CPPreference</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar">Mozilla Docs</a>,</li>
<li><a href="https://css-tricks.com/custom-scrollbars-in-webkit/">CSS Tricks</a>, <a href="https://www.cs.princeton.edu/courses/archive/spring12/cos320/typing.pdf">Princeton - typing</a>,</li>
<li><a href="https://en.wikipedia.org/wiki/Nominal_type_system">Wikipedia - Nominal Type System</a></li>
<li><a href="https://en.wikipedia.org/wiki/Structural_type_system">Wikipedia - Structural Type System</a></li>
</ul>


Getting Started with Typescript