Practical essentials, snippets for learning and working with TypeScript

TypeScript is one of the most sought after coding languages, which is reflected in StackOverflow Developer Survey – 2020 . In this blog post, I will give you the most essential snippets, we would need in general when writing TypeScript code along with brief description explaining it.

What is TypeScript?

This is a superset of JavaScript . What this means is basically this contains JavaScript and some extra stuff. So, you can simply write normal JavaScript code, and say you are writing TypeScript. Though this is logically correct, don’t do it.

This extra stuff is what is making it as a Strongly Typed Language , something like Java , where you declare the type on any variable and compiler will help you catch if datatype mismatches happens anywhere for these variables. This is actually targeted to help with big projects where you see a strong need to integrate with a lot of components. TypeScript can help suggesting the usage of relevant datatype methods (for example, array.length ) and catch bugs much earlier during development phases.

Syntax

A typical type declaration states the type of variable following colons, as shown below.

let name : string = “Vamshi”;

In the following sections, I will explain with simple and essential examples which can help you learn Essential TypeScript for your daily needs.

Basic Types

Very basic types which are used very frequently across code.

let name: string = "Vamshi";   // you can use ES6 Template Strings also.
let age: number = 30;
let motivationLevel: bigint = 100n;
let isCurious: boolean = true;

// if not sure about any type, use any!
let x: any = 10,
x = "str"
x = false;    // re-assigning to different value type 

// void
function print(): void {
  console.log("test");
}

// null, undefined types are present but not that useful. You can work with "any" in case you really need

// object - this type is generally not that useful, except when you are building some util which creates new object
// Because you cannot create objects directly, out of simple numbers, strings  and boolean.

Collections

For collections of datatypes we have multiple ways of declaring – literally and also generic types.

let ranksList: number[] = [1, 2, 3];

// you can also use generic type like  
let ranksList: Array<number> = [1, 2, 3];

// Tuples are fixed length, mixed element types
let mixTuple: [string, number] = ["mix", 10];

Enums

Enums are basically a mapping of friendly names to numerical values which start from 0 (zero) by default.

enum TestDay { Monday, Wednesday, Friday }
let t: TestDay = TestDay.Monday;

// to start from 1
enum TestDay { Monday = 1, Wednesday, Friday }

// to manually set all values
enum TestDay { Monday = 1, Wednesday = 3, Friday = 5 }

This mapping also works backways. You can use the index to find the friendly name too.

enum TestDay { Monday = 1, Wednesday = 3, Friday = 5 }
let dayName: string = TestDay[3];   // Wednesday

Type casting or Type assertion

If you are sure about any type of value, you can force the compiler to assume so. Let’s say there is some variable called inputVal , and you are sure that it will be a string, you can do as follows to type cast variable.

// with non-jsx 
let inputLength: number = (<string>inputVal).length;

// with jsx
let inputLength: number = (inputVal as string).length;

Thanks for reading through. Hope this helped you to get a taste of TypeScript. We will get into interfaces, functions, classes in the next posts. Keep in touch. Please let me know your thoughts and suggestions in comments below. Have a good day!

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章