DEV Community

Cover image for Typescript basic in a post
Ha Tuan Em
Ha Tuan Em

Posted on

Typescript basic in a post

TypeScript

Typescript is an open-source programming language developed and maintained by Microsoft. It's a strict syntactical superset of Javascript and adds optional static typing to the language.

Typescript is designed for the development of large applications and transcompiles to Javascript.

It's may be used to develop JavaScript
applications for both client-side and server-side execution (as with Nodejs or Deno).

Typescript supports definition files that contain type information of existing Javascript libraries. Its the header for the NodeJS basic modules are also available, allowing the development of Nodejs programs within TypeScript.

The Typescript compiler is itself written in Typescript and compiled to Javascript.

ECMAScript 2015 support

TypeScript adds support for features such as classes, modules, and an arrow function syntax as defined in the ECMAScript 2015 standard.

Basic Types

Like much programming static language other. Typescript contain a lot of type like string, number, array, tuple, enum, void, etc,...
And here are the type which supports in Typescript

1. Boolean

   let is_locked: boolean = false;
Enter fullscreen mode Exit fullscreen mode

2. Number

   let decimal: number = 6;
   let hex: number = 0xf00d;
   let binary: number = 0b1010;
   let octal: number = 0o744;
Enter fullscreen mode Exit fullscreen mode

3. String

   let firstName: string = "Jane Hill";
Enter fullscreen mode Exit fullscreen mode

4. Array

   let listAge: number[] = [21, 22, 14, 45, 60, 70];
   // The second way uses a generic array type, Array<elemType>
   let listStudent: Array<number> = [1, 2, 3, 5];
Enter fullscreen mode Exit fullscreen mode

5. Tuple

Tuple types allow you to express an array with a fixed number of elements whose types are known, but need not be the same. For example, we have an array for dictionary book and we got have id and meaning of this word :

   let dictionary: [number, string];
   dictionary = [1, "Hello world"];
   dictionary = ["Hugo", 2];// error TS2322: Type 'number' is not assignable to type 'string'.
   let firstWordMean = dictionary[1].substring(1);
   let firstWordId = dictionary[0].substring(1);// error TS2339: Property 'substring' does not exist on type 'number'.
   let firstWordDate = dictionary[3].substring(1); // error TS2493: Tuple type '[number, string]' of length '2' has no element at index '3'.
Enter fullscreen mode Exit fullscreen mode

7. Enum

As in languages like C#, an enum is a way of giving more friendly names to sets of numeric values.

   enum StatusDelivery {
      NEW = 1,
      PROCESSING = 2,
      SHIPPING = 3,
      DONE = 4
   }
   // enum StatusDelivery {
   //    NEW = 0,
   //    PROCESSING,
   //    SHIPPING,
   //    DONE
   // }
   let statusDelivery: StatusDelivery = StatusDelivery.NEW;
   //easy for get name of enum type
   let nameStatusNew: string = StatusDelivery[0];
Enter fullscreen mode Exit fullscreen mode

8. Any

If you want to get dynamic type in Javascript so you can use any type. It allows you define without type so you don't know what is this ?

   let checkout: any = false;
   checkout = "Checkout is successed";
   let Student: Object = 5;
   Student.toFixed(); //  error TS2339: Property 'toFixed' does not exist on type 'Object'.
Enter fullscreen mode Exit fullscreen mode

*Variables of type Object only allow you to assign any value to them. You can’t call arbitrary methods on them, even ones that actually e

   let otherArray: any = [1, "Milk", 20000, "2020-01-01"];
   otherArray = ["2", "Meat", "100000", "2020-01-02"];
Enter fullscreen mode Exit fullscreen mode

The any type is also handy if you know some part of the type, but perhaps not all of it.

9. Void

void is a little like the opposite of any: the absence of having any type at all. You may commonly see this as the return type of functions that do not return a value:

   function createStudent(user): void {
      if (user) {
         console.log("User created");
      } else {
         console.log("Creating user is failed");
      }
   }
   createStudent(undefined);
Enter fullscreen mode Exit fullscreen mode

10. Null and Undefined

Undefined and null actually have their own types named undefined and null respectively. Much like void, they’re not extremely useful on their own.

   // Not much else we can assign to these variables!
   let noValued: undefined = undefined;
   let noNamed: null = null;
Enter fullscreen mode Exit fullscreen mode

Because they are subtypes of all other types. That is means we can assign null or undefined to something type like number.
But we can't assign some variables with null or undefined because they make some common error. So we can be tracking the code with tsconfig.json in options strictNullChecks flag.

  {
    "compilerOptions": {
      "strictNullChecks": true,
    }
  }
Enter fullscreen mode Exit fullscreen mode

11. Never

The never type represents the type of values that never occur. For instance, never is the return type for a function expression or an arrow function expression that always throws an exception or one that never returns; Variables also acquire the type never when narrowed by any type of guards that can never be true.

The never type is a subtype of, and assignable to, every type; however, no type is a subtype of, or assignable to, never (except never itself). Even any isn’t assignable to never.

// Function returning never must have unreachable end point
function error(message: string): never {
    throw new Error(message);
}

// Inferred return type is never
function fail() {
    return error("Something failed");
}

// Function returning never must have unreachable end point
function infiniteLoop(): never {
    while (true) {
    }
}
Enter fullscreen mode Exit fullscreen mode

12. Object

An object in typescript looks like an object in javascript.

//original object in javascript
const cake = {
  sugar: "30%",
  milk: "29%",
  flour: "30%",
  salt: "1%",
  orangeJuice: "10%"
};
//using object like function with parameters
const otherCake = function(obj: any) {
  console.log(obj);
};

otherCake({
  sugar: "10%",
  milk: "29%",
  flour: "50%",
  salt: "1%",
  AppleJuice: "10%"
});
Enter fullscreen mode Exit fullscreen mode

13. Type assertions

A type assertion is like a type cast in other languages but performs no special checking or restructuring of data. It has no runtime impact and is used purely by the compiler

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
//or using as for make code is shorter
let strLength: number = (someValue as someValue).length;

Enter fullscreen mode Exit fullscreen mode

14. About let

Using let because it's safer than var to very much.

It's just my tech note so maybe it gets something wrong.
Thanks for reading my post.
Have a nice day !

Dummies are great

Latest comments (0)