11. TypeScript (1) recap with "Makigas"

Credits Makigas typescript course. Makigas (Dani)  is a great programming evangelist. His channel is in Spanish.

 1. Install VS Code, node, and npm

 2. Create a project folder (for instance makigas01)

 3. Enter this folder and type npm init. Accept all the default parameters. Verify that the file package.json has been created.

 4. Install typescript inside this project (npm i --save-dev typescript) and verify that in this folder there are these files or directories (node_modules, package.json, and package-lock.json) and execute  node_modules/.bin/tsc and verify that works.

 5. In the package.json file verify the ts version (in the dependencies section, in my case is 4.6.4)

 6. Open VS Code and go to the folder makigas01 and press to create a new file for instance first.ts. Save it with Cntrl-S 

 7. Compiling: Option 1: (terminal node_modules/.bin/tsc first.ts ) Option 2: (Edit package.json and in the scripts section add the line "build": "tsc first.ts" and in the terminal type npm run build)

 8. ${var_name} in string: let a=`Hello ${myVar}!` 

 9. Playland in typescriptlang.org let you see how the ts code is "transpiled" in time to js. TS Config to select the output of the code (ES3, ES5, ..)

10. Primitive types (let a: string = 'Hello'). Possible types boolean, number, string...

11. Number examples: 1, 0.11, 1_000_000 (for easy readability), 0o701 (octal), 0xaf12 (hexadecimal), 0b100101 (bynary) 

12. any, null (optional argument),  undefined, void.

13. array (let days: string[] ={"monday", "twesday"}  let other: any[] ={true, 23, "twesday"}  )

14. tuples (let recs: [boolean,string][]=[[true,"ximo"],["false", "Mike"]] )

15. objects (let person = {name: "John", age:22, job { ent:"ajt", tpe: 12} } person.age=33 )  let other : {name: string, num: number} ={name: "dog", num:2} let obj: object ={} 

15.1 referencing properties of objects: person.name="Ximo"     person['name']='Ximo'

16. functions ( function sum (n:number, m: number): number {return n+m}                                         let rest: (n:number, m: number) => number =function (n:number, m: number)  {return n+m}                 let mult: (n:number, m: number) => number   mult=function (m,n) { return m*n}  mult= (m,n)=>m*n     let myFun :(a number, b:number, callback: (r:number) => void) => number                                              

17. class (abstract, protected, extends), attributes (private (#), readonly, get and set(virtual attributes), this) , constructor, methods      

18. types ( type logintp= { user: string, pwd: string,}     )

19. literal types (as constants let a: true = true    let b:5=5  let c:'hello'  let d: 'one' | 'two' ='one' )     

20. type unions ( function afunc( a: string | number)  use if(typeof(a) === number) {...})

21. type intersection ( let a: tp1 & tp2 have the arguments of both types) type tp3 = tp2 & {c: string}

22. interfaces (skeleton of class). 

23. Optional argument (a?: boolean or a: boolean | undefined) to verify if not undefined use if (l.a) {...} or l.a?.someFunction() or l.a!.someFunction() (only if we are sure that the argument a exists!!!)

24. interfaces and classes ( class Rectangle implements Shape, Polygon..), interfaces can extend other interfaces

25. indexed interfaces ( interface intfA{ [index:string]: boolean }  let l: intfA ={}  let k= l["pepe"] )

26. functional interfaces ( interface intfB { (a:string, b:string): number }  is equivalent to                     type tpB =(a:string, b:string) => number 

27. Window as a global variable store. interface Window to join declarations

28. cast ( let g: intA = f as intfB) where intA is the parent of intB.  Also NO ( let g: intA = (<intfB>) f )

29. check ( if (a instanceOf Date  not applied to interfaces, only to classes!!!)  for interfaces use function isIntfB (a: any) : a is intfB { return x.B_attribute1 && x.B_attribute2 } and use function isIntfB for checking tha a inplements the interface intfB

30. enums (enum week { monday, twesday, wednesday }  let dia: week = 0 or week.monday

enum week2 { monday = 401, twesday=12, wednesday="wed"} //Carefull

enum week3 { monday=1, twesday= monday * 2, wednesday=twesday * 2, thursday=myFunc() }

31. Generics (interface intfA<T> { a: T}    let b: intfA<boolean> =  {a=false} )

interface intfB<T,U> { a: T, a1:U}    let b: intfA<boolean, string> =  {a=false, a1: 'ximo'}

interface intfB<Tp,Ub> { a: Tp, a1:Ub}    let b: intfA<boolean, string> =  {a=false, a1: 'ximo'}

32. Generics and functions (T extends Post) careful if Post has a method that has the same name that number (toString()for instance) as number then implements Post too!!!!

33. Generics Utility Types (Partial<Type> -> all the attributes are optional, NonNullable<Type>

34. Modules (export ; export default ;   import {} from "./almacen" ; import IVA from './impuestos'  ; import IVA, {Impuesto, Precio} from "./Impuestos";   import * as impuestos from './Impuestos" ;

35. Projects (file tsconfig.json created with node_modules/.bin/tsc --init  , target: the generated code type (es3, ..), outDir: folder for generated js). Now Edit package.json and in the scripts section add the line "build": "tsc  and in the terminal type npm run build) No need to indicate the ts file.

if the file tsconfig.json exists, now you can compile by typing node_modules/.bin/tsc without indicating the file to compile.

36. npm (express, is-odd, is-what, datetoken) in the terminal type npm i is-what and you can use it on ts import {isString} from 'is-what' (note that no need to indicate from './...') and includes the library into the node_modules folder

37. file *.d.ts (definition file for js, inidcating equivalences ts<->js . To use pure js (without d.ts) in tsconfig.json change "allowJS": true  or download the packages from @types/is-odd (in this case)

npm --save-dev @types/isodd (use --save-dev !! NOT --save )
















Comentarios

Publicar un comentario

Entradas populares de este blog

15 Typescript (3) json ..

 Credits Makigas Ariel Bautista Academind Peter Lehnhhardt  (Stack Overflow) Jurgen Van Moere-Understanding Modules Neoguias-webapck   Swashbuckling with Code  (webpack & ts) npm install lite-server --save-dev package.json -> "scripts":[ .... "start":"lite-server" Find index.html    in tsconfig,json "resolveJsonModule" : true , json data (menu.json) [ { "key" : "hola" , "translation" : [ "hola" , "hola" , "hello" , "Hallo" ]}, { "key" : "now" , "translation" : [ "ahora" , "ara" , "now" , "alssecspiken" ]} ] a module for reading json (index.ts) import menu from "../data-i18n/i18n-menu.json" import field from "../data-i18n/i18n-field.json" console . log ( menu [ 0 ]. key ); console . log ( menu [ 0 ]. translation [ 0 ]); console . log ( menu [ 1 ]. key ); consol...
Leer más

10. Some Javascript & JQuery concepts

1. Serializing  const myObj = { fld01 : 1 , fld02 : 2 , fld03 : "\"hello\"" } ; //1. Serialize to json // returns { "fld01" : 1 , "fld02" : 2 , "fld03" : "\"hello\"" } var myJsonSerialize = JSON. stringify (myObj); //2. Serialize to URL ->equivalent to $("form").serialize) // returns fld01=1&fld02=2&fld03=%22hello%22 var myURLSerialize = $. param ( myObj ); //3. Serializing a form to pass ass a URL // returs something like FirstName=Mickey&LastName=Mouse $( "form" ). serialize (); //4. Get the form as an object var formData = new FormData ($( 'form' )[ 0 ]); //5. Convert the formdata to json var data = JSON. stringify ( Object . fromEntries (formData)); 2. JQuery click events conflict It is recommended not to use click and dbclick at the same time with jquery (and jsgrid ). If you use alert or console.log  in "click" event th...
Leer más

14 Typescript (2) with jquery, bootstrap and other module stuff

Imagen
1. Introduction Modules are rather tedious and difficult to be understood. There are many module types (Commonjs, AMD, UMD, System) as Jurgen Van Moere explains.  Node, however, works well with Commonjs modules but cannot integrate well with other modules (AMD, System..) Webpack comes to the rescue, but it is a bit difficult to use. With the help of some sites like Neoguias  and  Swashbuckling  this task is much more easier. Our schedule is: Create the basics Create a simple web page with html and javascript Creating a simple module Importing and using a simple node module (is-what) and @types Importing and using jquery 1. The basics. Installation Open VS Code and execute these commands in the terminal window # create the project folder mkdir webpack-jq cd webpack-jq # create the package.json and ask for project basic info npm init -y # install webpack and cli (opt -D is equivalent to --save-dev ) npm i -D webpack webpack-cli # create the folder src (source...
Leer más