SE Internship Log[1]
Published: 2021-08-02 07:03:44

---
title: SE Internship Log[1]
published: true
description: Types based on other Types in TypeScript and a little advice on pursuing projects.
series: Software Engineering Internship Log
canonical_url: https://ruheni.dev/writing/se-internship-log-1/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5s0qk6vewwke0zey3ja.jpg
---

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[]`. 

```ts
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.

```ts
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:

```ts
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:

```ts
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.

```ts
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](https://www.typescriptlang.org/docs/handbook/2/generics.html)
- [`keyof` Type Operator](https://www.typescriptlang.org/docs/handbook/2/keyof-types.html)
- [`typeof` Type Operator](https://www.typescriptlang.org/docs/handbook/2/typeof-types.html)
- [Indexed Access Types](https://www.typescriptlang.org/docs/handbook/2/indexed-access-types.html)
- [Conditional Types](https://www.typescriptlang.org/docs/handbook/2/conditional-types.html)
- [Mapped Types](https://www.typescriptlang.org/docs/handbook/2/mapped-types.html)
- [Template Literal Types](https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html)

![Steve Balmer Yelling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82c0po4j32wkqkx2b1u0.gif)

_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](https://www.typescriptlang.org/docs/handbook/intro.html). 

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. ✌🏽