Berat Bozkurt

Berat Bozkurt




Related Posts

Micro Frontend Architecture (Part 1)
19 Nisan 2025

Micro Frontend Architecture (Part 1)

The Unsung Hero of Javascript: Event Loop and Promises
20 Mart 2025

The Unsung Hero of Javascript: Event Loop and Promises

Immutable and Mutable in Javascript
23 Ekim 2024

Immutable and Mutable in Javascript

Codes for Myself: TypeScript

13 Şubat 2021 • 2 view•
If you want to determine your career and reach a better level in that field, you should definitely follow the technologies. At least you should stay up to date. Especially if you are at the beginning of the road like me, these processes will tire you a little. If this job is a hobby for you, this process will be fun.
I have difficulty remembering the syntax. That's why I always follow the syntax of the technologies I am new to through a sample project to remember them. This way, it is easier to write. When I start a new technology, my focus is on understanding its logic. The part of understanding this logic takes less time when it is in the market.
There will be code sections in this article because I will come back and look at it later. In fact, you can use this as a cheatsheet.

TypeScript Types

Let's examine the most commonly used ones in a code block, I guess.
let name: string = "berat"; // should be string type.
let age: number; // should be number type
let phone: any; // can be any type
let technologies: string[]; // a string array

age = 22;
phone = "555 555 55 55";
technologies = ["React", "Redux"];

console.log(`${name}, ${age}, ${phone}, ${technologies.join(" - ")}`); // "berat, 22, 555 555 55 55, React - Redux"
I tweeted because I couldn't figure out the enum logic in my head and I can say that I understood it a little bit as a result of the response.
As far as I understand, it allows you to not leave the type structure defined with enum. But in my opinion, it is easier to use string literal union instead.
I usually don't know these terms and I'm not used to them. But after a certain point, it is necessary to know and be informed about them. That's why I learn them by using them.
enum Sizes {
  small = "10px",
  medium = "50px",
  large = "100px"
}

console.log(`The product was ${Sizes.medium} the size.`) //"The product was 50px the size." 
Tuple is a type that you can use if the type of elements in a fixed array is known.
let errors: [number, string];
errors = [404, "Not found!"];
One of the other types is unknown. The only difference with Any is that if you have a variable whose type you have previously determined, you cannot assign the variable you defined as unknown to that variable. Let's give an example.
let status = true;
let a: any = status; // works
let b: unknown;
status = b; // throw error
Object Type Determining the object type.
let user: {
  name: string,
  age: number,
  phone: any,
  salary: () => number,
};

user = {
  name: "Berat",
  age: 22,
  phone: 5555555555,
};

TypeScript Union Type

In short, it allows you to limit the values ​​that a variable can take or assign values ​​of several different types.
let role: {
  role: "admin" | "user", // can only take the value admin or user.
  id: string | number, // value can be of type string or number.
};

TypeScript Functions

const print = (
  name: string,
  age: number,
  id: string | number,
  phone?: string
): any => {
  return `${name} ${age} ${id} ${phone}`;
};

print("Berat", 22, 11111111111);
I tried to explain the whole thing with a single function. Now let's see what's going on;
  • name: string We send parameters like this. As we used before.
  • number?: string Here the ? sign comes into play. If we don't have to take this parameter, we use a question mark. If we don't use a question mark and this parameter doesn't come, the code will give an error.
  • (...) : any function will return a value and we say that this value must be of any type.

Since I am currently actively using the topics I mentioned above, I created this article on them. I am sure that I will be very interested in sections such as classes and interfaces in the future. We will update this article then :)
Actually, I would like to do a project about TypeScript, but as far as I examined the sample projects and videos, it did not seem like such a complicated thing. So it would be enough to just note down the general features somewhere.

Resources

  • The TypeScript Handbook
  • TypeScript Complete Course | Typescript for Newbies @codingwithdidem
•
Share on X (Twitter)