typescript-notes.md

1. installing typescript:

• install node
• npm i -g typescript

2. write your typescript code and then you should compile your typescript code to javascript by using: tsc index.ts.

I assumed that our target file name is: index.ts also note that all typescript files extension is: ts

3. how to create a configuration file for typescript compiler: tsc --init this command create a configuration file called: tsconfig.json

in this file, there is a key named: target which specifies which version of javascript, the typescript file get compiled to.

• key named rootDir => specifies in which patth our typescript files locate. and for compilation, the typescript compiler watch this location.
• key named outDir => specifies after typescript compilation, the javascript result in which location will store.
• key named removeComments: true => determines that after compilation, all existing comments in typescript files get removed in final result which is generated javascript file.
• key named noEmitOnError: true => if anu error occurred during compilation then no output will be generated.

4. now if in terminal type: tsc => then all typescript files which are located in rootDir get compiled to javascript and result files will be stored in outDir.

5. for debugging written typescript file, first of all uncomment a key called sourceMap in tsconfig.json file. actually sourceMap determines how each line of code in typescript file is related to generated javascript file.

6. javascript types:

• number
• string
• boolean
• null
• undefined
• object

typescript has above types plus:

• any
• unknown
• never
• enum
• tuple

7. note: if a variable without any value is defined, the typescript assumes the type of this variable is any.
8. always mark these keys as true: noUnusedLocals, noUnusedParameters, noImplicitReturns.
9. if a javascript function does not have any return statement, then this function by default returns undefined.
10. there is three types of optional access in javascript and typescript:

• optional property access
• optional element access ==> to check if given array is not equal to null/undefined, then try to access specific index
• optional call ==> to check if given method already exists and is equal to real function.

11. falsy values in javascript: False, '', 0, undefined, null.
12. in javascript there is an operator called Nullish coalescing operator which is ??. this operator checks if given variable is null or undefined.
13. in javascript typeof keyword is just used for primitive types. for classes and objects, instanceof is used.
14. in inheritance, if in child class, method overriding occurres, it is best practice to use keyword override before name of that method. e.g:

class Person {
  fullname: string;
  
  get fullname() {
    return this.fullname;
  }
}


class Teacher{
  override get fullname() {
    return 'Teacher ' + super.fullname;
  }
}

15. four main principal in OOP:

    • Encapsulation
    • Abstraction
    • Inheritance
    • Polymorphism

16. polymorphism in OOP lead us to open-closed principle.

17. what is the meaning of parameter property in typescript? it has same meaning as constructor property promotions in php 😊

18. abstract class is a classe which has at least one method without implementation. also note that abstract classes can not be instansiated. e.g:

abstract class Shape {
  constructor(public color:string){}
  
  abstract render(): void;
}

class Circle extends Shape {
  override render(): void {
    console.log("it is a circle"):
  }

}

19. by default javascript is not included in compilation process of typescript. for being able to use javascript in typescript codes, theses steps must be considered.

    • open tsconfig.json file
    • in Javascript Support section, find option named allowJs
    • change allowJs option to true and uncomment this line.

20. a typescript is just a file with ts extension.

21. since typescript is a superset of javascript, so every javascript file can be considered as typescript.so to force typescript compiler also check javascript files, two keywords must be set as true. allowJs and checkJs.

22. it is possible to add type to javascript files by using JSDoc standard syntax.

23. there is a repository named Definetley typed repository which provides type difinition file for almost all open source libraries. also it is possible that we ourselve create a type definition file for our javascript files.

for example to install type definition file for jquery library from Defineitly typed repossitory just in npmjs.org search: @type/jquery.

if we want to create a type defintion file for our javascript file, we must create a file which its name is exactly the same as target javascript file with .d.ts extension.

24. there is a concept named: type inference => In TypeScript, there are several places where type inference is used to provide type information when there is no explicit type annotation. For example, in this code => let x = 3;
25. in addition to built-in types, we can define own custom types in typescript by using interface.

interfaces just is used to define custom type in typescript and are just avaialble at compile time and is not available at runtime.

26. another way to define our own custom type is by using type alias. type aliases improve code readability and maintainability by providing custom names for types.

27. to be able to limit values which can be assigned to a variable, it is possible to use enum.

28. to be able to use decorator in typescript, you must add key named experimentalDecorators: true in tsconfig.json file under the compilerOptions key. and also add emitDecoratorMetadata: true under compilerOptions.

{
  "compilerOptions": {
    "target": "ES5",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

aand also installed package named: reflect-metadata library ==> npm i --save reflect-metadata\

This library implements polyfills for another set of proposed ECMAScript features, which are considered experimental now, but should hopefully be approved and implemented around the same time that decorators become widely available (linkedin: typescript essential training / 2022 release)

29. typescript consideres every class definition as an interface.
30. it more than one interface with same name exist, then typescript merges the existing interface with following interfaces with same name.