DEV Community

Julia Shlykova
Julia Shlykova

Posted on

Introduction to TypeScript. JavaScript primitive data types

Implicit and explicit data type assignment

Now, with TypeScript we have the ability to explicitly set data type for a value like this:

//script.ts 

let str: string = "hello";
console.log(str);
Enter fullscreen mode Exit fullscreen mode

However, when we assign a value, even without explicitly declaring data type, TypeScript can implicitly set data type. This technique is called inferred typing. The following code is still valid:

//script.ts 

let str = "hello"; // type is "string"
console.log(str);
Enter fullscreen mode Exit fullscreen mode

TypeScript will still show an error if we try to assign a new value that is not of the previous data type.

//script.ts 

let str = "hello";
str = 1; // Type 'number' is not assignable to type 'string'.
console.log(str);
Enter fullscreen mode Exit fullscreen mode

So, in what cases would we need to explicitly set data type?

  • if we not immediately assign a value to a variable when we declare it:
let str: string;
str = "hello";
console.log(str);
Enter fullscreen mode Exit fullscreen mode
  • for function input and output:
function f(s: string): string {

}
Enter fullscreen mode Exit fullscreen mode
  • inside object types (interfaces);
  • inside classes.

Duck inferred typing

In more complex variable types if they are not explicitely set, TypeScript uses so-called "duck typing" method:

"If it looks like a duck, and quacks like a duck, then it probably is a duck"

const obj1 = {
  id: 1,
  name: "Mary",
  greet() {
    console.log(`Hello, ${this.name}!`);
  },
};

obj1.name = "Ann"; // Ok

obj1.age = 45; // Property 'age' does not exist on type '{ id: number; name: string; greet(): void; }'
Enter fullscreen mode Exit fullscreen mode

TypeScript defined implicityle the type as { id: number; name: string; greet(): void; } and doesn't allow to assign new properties.


Primitive JavaScript types

Each primitive type in JavaScript has a corresponding type in TypeScript:

  • number - floating-point numbers:
let a: number;

a = 123;
a = 123.0;
a = 0x7b; //hexadecimal notation
a = 0b1111011; //binary notation
a = 0.123e3; // exponential notation
a = Infinity;
Enter fullscreen mode Exit fullscreen mode
  • bigint - used for large integers (usually higher than 2^53-1 or lower than -(2^53-1)):
let a: bigint;

a = 9007199254740992n;
a = BigInt("9007199254740992");
Enter fullscreen mode Exit fullscreen mode
  • string - sequence of characters:
let a: string;

a = 'red';
a = "apple";
a = `${1+2} bears`;
Enter fullscreen mode Exit fullscreen mode
  • boolean - true of false:
let a: boolean;

a = true;
a = Boolean(0); //false
Enter fullscreen mode Exit fullscreen mode
  • symbol - special type that makes value unique:
let a: symbol;

a = Symbol('key');
Enter fullscreen mode Exit fullscreen mode

Null and undefined

  • null - indicates value, that's empty or non-existent and we don't expect it to change.
  • undefined - works as a placeholder for a value of a variable, that was declared but has not yet been assigned to other value.

These two values in TypeScript have any data type. It means that we can change the value of the variable to any value.

let a = undefined; // data type is any

a = 1;

a = 'str';
Enter fullscreen mode Exit fullscreen mode

If we explicitly set data type as null or undefined, the variable won't have the ability to change its value:

let a: undefined;

a = 1; // Type '1' is not assignable to type 'undefined'
Enter fullscreen mode Exit fullscreen mode

Top comments (0)