SE Internship Log[1]

Hello there internet stranger, 👋🏽

This is the second article in Software Engineering(SE) Log.

The better part of the week was spent arguing with the TypeScript compiler and we both know who was right.

It was me.

JK, The compiler is always right!

Technical skills

Types! Types! Types!

This week, I learnt there's more to types than string, number, boolean, Array, and Object types.

TypeScript allows you to do some advanced type wizardry by manipulating types from existing types – besides extending from other types with interfaces. Sounds meta, right?

When a type/ interface is not specified, TypeScript interprets it as its widest form/type.

Case example, if you have an array of strings, the type will always be string[]. However, you can take it a step further and be specific with what the value of the string should be in your array or variable.

In the example below, no type is assigned to colors. Therefore, TypeScript will interpret it as string[].

const colors = ['blue', 'black', 'white', 'yellow', 'orange']

However, you can create a readonly type from the above example by appending the key words as const to the end of the statement. This means that the properties will be immutable – you cannot perform a write to the array.

const colors = ['blue', 'black', 'white', 'yellow', 'orange'] as const

The intellisense on hovering on colors would reveal readonly ["blue", "black", "white", "yellow", "orange"].

Union Types

You could take the previous example a step further and create a union type from colors array with a little TypeScript magic:

const colors = ['blue', 'black', 'white', 'yellow', 'orange'] as const

type color = (typeof colors)[number]

On hovering on type color, a union type is created: "blue" | "black" | "white" | "yellow" |"orange". The [number] annotation is an Indexed Access Type – this means that it looks up a property from another type.

Template Literal Types

TypeScript also supports Template Literal Types which builds on top of string literal type. It enables creating types from interpolated strings. For example:

type lang = "en" | "de"
type book = "TypeScript Handbook" | "Functional Programming"

type BookCategories = `${book}_${lang}`

In this example, we're creating "internationalized" – a German and English – versions of the book type. The generated types on hovering is a union type of each lang and book, i.e.: "TypeScript Handbook_en" | "TypeScript Handbook_de" | "Functional Programming_en" | "Functional Programming_de".

Template literal types can be taken to another level be manipulated by conversion to uppercase, lowercase, un-capitalization, and capitalization.

type book = "TypeScript Handbook"
type lowercaseBook = Lowercase<book>

The output of lowercaseBook is "typescript handbook"

This is all just a tip of the iceberg of what Type manipulation with TypeScript looks like.

You can explore the TypeScript documentation and learn more on types:

• Generics
• keyof Type Operator
• typeof Type Operator
• Indexed Access Types
• Conditional Types
• Mapped Types
• Template Literal Types

Should probably have spent more time reading the docs and not making gifs

Soft Skills

Pursuing projects

This is more of a technical skill but I feel like it still falls under the soft skills.

Advice from my manager was to work on other projects on the side. It is not compulsory and I don't mean that you should sacrifice your time.

Working on other projects besides work would potentially expose you to new technology and or features of the programming language you're using. Projects may require you to read someone else's code and gain a better understanding of how and why the thing was built the way it is.

An alternative to side projects is contributing to existing open-source projects.

This week has been mind blowing watching my manager tackle tasks in 20 minutes that took me a day. It all seemed like magic – especially the TypeScript stuff – but it's all practice and experience.

What comes next?

It's definitely getting more familiar with TypeScript and digging deeper into the TypeScript Handbook.

A TS cheat sheet maybe? A project?

🤞🏽 this week I win a fight with the TS compiler. I mean, what are the odds?

There's always a lot to learn. It's one step at a time and be patient with the process.

Till next week. ✌🏽