Intro
Learning TS and having a layer of protection to catch type-based errors was one of the biggest motivations to adopt TS. This an awesome tool to have in your pocket. in this article I would refer to some parts of the typescript that might be confusing to you if you new to TS, all of them have been asked on Stackoverflow. I tried to form the thoughts in a clear way that should remove vagueness and incompleteness. Down below are the references I use to write this article. The confusion comes from several reasons, such as obvious similarity and vague difference, not knowing when to use what, similar variants. let's have a look at them.
private vs protected access modifiers
An access modifier in TypeScript determines who access class property or method.
private access modifier is accessible only from inside the class.
protected access modifier is accessible from inside the class and sub-class as well.
class Parent {
private privateP: number // or #privateP TS 3.8 supports the new JS syntax
public publicP: number
protected protectP: number
constructor( publicP:number, protectP:number ){
this.publicP=publicP
this.protectP=protectP
this.privateP= this.publicP * this.protectP
}
method(){
// all properties are accessible
}
}
new Parent(5,8).publicP // only public props | mothods are accessible
class Subclass extends Parent {
constructor(publicP:number,protectP:number){
super(publicP, protectP)
}
method2(){
this.protectP
this.publicP
this.method
// this.privateP is not accessabile
}
}
interface vs class
Similarity:
both do type-checking
Key differences:
interface:
Definition: is simply a structural contract that defines what the properties of an object should have as a name and as a type. The typescript compiler uses it solely for type-checking purposes. To be sure an object has the exact properties you want as name and as type then use interface.
When type-checking: during design and compile time.
When to use: simple type-checking for an object
JavaScript output: no
syntax:
interface Foo {
a: number
}
Class:
Definition: is a blueprint of what an object should look like and act like and then implements that blueprint by initializing the class properties and defining methods.
When type-checking: during design, compile-time, and runtime.
When to use: needs an extra functionality
JavaScript output: yes
syntax:
class Foo {
a: number
condtructor(a:number){
this.a=a
}
method (){
//...
}
}
interface vs type
Similarity
both are used for type-checking and can be used in some cases interchangeably.
Key differences:
interface
Definition: is simply a structural contract that defines what the properties of an object should have as a name and as a type. The typescript compiler uses it solely for type-checking purposes. To be sure an object has the exact properties you want as name and as type then use interface.
type-checking: object, function as a method
When to use: interface is dedicated to objects and is limited.
Compose types:
extend
Extend:
// Interface extends interface
interface A { a: number }
interface AB extends A { b: number }
// Interface extends type alias
type A = { a:number }
interface AB extends A { b:number }
implement
interface Point {
x: number;
y: number;
}
class SomePoint implements Point {
x = 1;
y = 2;
}
type
Definition:
type-checking: primitive, object, union, tuple, function
When to use: type alias covers all types, but there are conventions that I use to see in codebases and prefer to follow. But it is up to you.
Compose types: Intersection (
&) and Union types (|)
Extend:
// type extends type (intersection)
type A { a: number }
type AB & A { b: number }
// type extends interface
interface A { a: number }
type AB & A { b: number }
implement: a class can implement a type except for type union it throws an error
type Point2 = {
x: number;
y: number;
};
class SomePoint2 implements Point2 {
x = 1;
y = 2;
}
type PartialPoint = { x: number; } | { y: number; };
// ERROR: A class can only implement an object type or intersection of object types with statically known members
class SomePartialPoint implements PartialPoint {
x = 1;
y = 2;
}
Module vs namespace
both are ways to organize our code.
- a module is a block of code that has its own scope, variables, functions, classes...etc declared in a module are not visible outside the module, unless they are exported using one of the export forms. they can be consumed using one of the import forms
module contains code and declaration
- a namespace is simply named JavaScript object in the global namespace. Unlike modules, namespaces can span multiple files.
- namespace contains only declarations
extends vs implements
In the context of classes
extends the new class is child, by extending a class we have all its properties and methods implemented out of the box, and we can override them and/or add more.
implements the new class has the same 'shape' as the parent, and the new class has to implement the properties and the methods.
class Foo {
a:number
constructor(a:number){
this.a =a
}
}
// extends
class Bar extends Foo {
b:number
constructor(a:number,b:number) {
super(a) // super is required
this.b= super.a * b
}
}
// implements
class Baz implements Foo {
a:number // is required
b:number
constructor(a:number){
this.a= a
this.b=a*2
}
}
In the context of interfaces
it is almost the same as in the context of classes but interface has no implementation
interface Foo{
a:number
}
interface Bar extends Foo{
b:boolean
}
const obj: Bar= {
a:3, // both propertries must be provided, no more nor less.
b:true
}
implement: interfaces have no implementation, only class can implement an interface but not the other way around.
Thank you for reading, share if you like it!
References: