SPFx example with Promises, What does TypeScript do with this code?

%3CLINGO-SUB%20id%3D%22lingo-sub-47016%22%20slang%3D%22en-US%22%3ESPFx%20example%20with%20Promises%2C%20What%20does%20TypeScript%20do%20with%20this%20code%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-47016%22%20slang%3D%22en-US%22%3E%3CP%3EStill%20trying%20to%20learn%20SPFx...%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Esource%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Fblob%2Fmaster%2Fsamples%2Fangular-ngofficeuifabric-todo%2Fsrc%2Fwebparts%2FtoDo%2Fapp%2FDataService.ts%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Fblob%2Fmaster%2Fsamples%2Fangular-ngofficeuifabric-todo%2Fsrc%2Fwebparts%2FtoDo%2Fapp%2FDataService.ts%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E!%5B%5D(%3CIMG%20src%3D%22http%3A%2F%2Fi.imgur.com%2FVPyQ4ti.jpg%22%20border%3D%220%22%20%2F%3E%3C%2FP%3E%3CP%3EWhat%20does%20TypeScript%20add%20to%20this%20code%20when%20transpiling%3F%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20do%20not%20understand%20why%20(all%20over%2C%20in%20this%20Todo%20example)%20Promises%20are%20created%20and%20(line%20101)%20%3CSTRONG%3Eimmediatly%3C%2FSTRONG%3E%20resolved.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-47114%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20example%20with%20Promises%2C%20What%20does%20TypeScript%20do%20with%20this%20code%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-47114%22%20slang%3D%22en-US%22%3E%3CP%3EThis%20code%20does%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E1.%20Create%20%26nbsp%3BPromise%3C%2FP%3E%3CP%3E2.%20Loop%20Items%3C%2FP%3E%3CP%3E3.%20resolve%20a%20Promise%3C%2FP%3E%3CP%3E4.%20return%20Promise%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eeven%20if%20no%20%22real%22%20data%20is%20wired%20I%20do%20not%20understand%20this%20example%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EA%20normal%20Promise%20should%20look%20like%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E1.%20Create%20Promise%20AND%20declare%20function%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20A.%20Loop%20items%3C%2FP%3E%3CP%3E%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20%26nbsp%3B%20B.%20resolve%20Promise%3C%2FP%3E%3CP%3E2.%20return%20Promise%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESo%20why%20is%20there%20a%20Promise%20in%20this%20SPFX%20example%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20only%20reason%20I%20could%20think%20of%20is%20that%20it%20is%20%3CSTRONG%3Enot%3C%2FSTRONG%3E%20incorrect%20code%2C%20and%20TypeScript%20makes%20it%20work.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-47032%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20example%20with%20Promises%2C%20What%20does%20TypeScript%20do%20with%20this%20code%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-47032%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20Danny%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20data%20service%20introduces%20the%20logic%2C%20flow%2C%20which%20isn't%20wired%20with%20the%20%22real%22%20data.%3C%2FP%3E%3CP%3EData%20service%20operates%20with%20a%20locally%20stored%20(in%20the%20memory)%26nbsp%3B%3CSPAN%20class%3D%22pl-en%22%3EITodo%3C%2FSPAN%3E%3CSPAN%3E%5B%5D%20array%2C%20without%20any%20physical%20async%20requests%20to%20SharePoint%20lists%2C%20for%20instance.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EYet%2C%20with%20such%20implementation%2C%20it's%20possible%20to%20change%20only%20the%20DataService%20by%20adding%20async%20operations%20and%20move%20resolve()%20into%20another%20promise%20or%20a%20callback%2C%20with%20the%26nbsp%3Bother%20part%20of%20the%20application%20untouched.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3ESo%2C%20no%20matter%20that%20in%20the%20example%2C%20it%20can%20be%26nbsp%3Bsenseless%20to%26nbsp%3Bintroduce%20promises%20inside%20sync%20piece%20of%20code%20due%26nbsp%3Bto%20its%20unnecessity%2C%20as%20it%20might%20have%20seen%20from%20a%20first%20glance%2C%20it%20actually%20introduces%20an%20architecture%20which%20can%20be%20painlessly%20extended%20with%20async%20communication%20with%20a%20real%20server.%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3ESorry%20if%20I%20understood%20your%20question%20wrong%20and%20wrote%20an%20obvious%20explanation%20of%20the%20code%20example.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3E--%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EBest%20regards%2C%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EAndrew%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

Still trying to learn SPFx...

 

source:

 

 

https://github.com/SharePoint/sp-dev-fx-webparts/blob/master/samples/angular-ngofficeuifabric-todo/s...

 

![](

What does TypeScript add to this code when transpiling? 

 

I do not understand why (all over, in this Todo example) Promises are created and (line 101) immediatly resolved.

 

 

2 Replies
Highlighted

Hi Danny,

 

This data service introduces the logic, flow, which isn't wired with the "real" data.

Data service operates with a locally stored (in the memory) ITodo[] array, without any physical async requests to SharePoint lists, for instance.

Yet, with such implementation, it's possible to change only the DataService by adding async operations and move resolve() into another promise or a callback, with the other part of the application untouched.

So, no matter that in the example, it can be senseless to introduce promises inside sync piece of code due to its unnecessity, as it might have seen from a first glance, it actually introduces an architecture which can be painlessly extended with async communication with a real server. 

 

Sorry if I understood your question wrong and wrote an obvious explanation of the code example.

 

--

Best regards,

Andrew

Highlighted

This code does:

 

1. Create  Promise

2. Loop Items

3. resolve a Promise

4. return Promise

 

even if no "real" data is wired I do not understand this example

 

A normal Promise should look like

 

1. Create Promise AND declare function

        A. Loop items

        B. resolve Promise

2. return Promise

 

 

So why is there a Promise in this SPFX example?

 

The only reason I could think of is that it is not incorrect code, and TypeScript makes it work.