sharepoint type script in SPFX

%3CLINGO-SUB%20id%3D%22lingo-sub-57668%22%20slang%3D%22en-US%22%3Esharepoint%20type%20script%20in%20SPFX%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-57668%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%3EHi%20All%2C%20%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EI%20am%20working%20in%20SPFX%20with%20angular%202.%20I%20wanted%20to%20use%20sharepoint%20type%20script%20in%20my%20project.%20I%20have%20installed%20the%20sharepoint%20type%20script%20with%20npm%20command%20%22typings%20install%20dt~sharepoint%20--global%20--save%22.%20When%20i%20tried%20to%20build%20the%20project%20with%20gulp%20serve%20command%20it%20give%20me%2043%20error%20all%20are%20in%20sharepoint%20dt.The%20error%20is%20%22Error%20-%20typescript%20-%20typings%5Cglobals%5Csharepoint%5Cindex.d.ts(11190%2C40)%3A%20error%20TS2304%3A%20Cannot%20find%20name%20'Sys'.%22%20It%20seems%20some%20depency%20is%20not%20installed%20but%20i%20could%20not%20able%20to%20figure%20out%20which%20one.%20Please%20share%20your%20knowledge%20with%20me%20to%20fix%20this%20problem.%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3Ei%20want%20to%20use%20the%20sharepoint%20global%20variable%20_spPageContextInfo%20in%20typescript%20fir%20this%20reason%20i%20need%20sharepoint%20typescript%20reference%20that%20i%20get%20by%20%22typings%20install%20dt~sharepoint%20--global%20--save%22.%20when%20try%20to%20build%20the%20project%20with%20gulf%20server%20it%20gives%20me%20avove%20error.%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-57976%22%20slang%3D%22en-US%22%3ERe%3A%20sharepoint%20type%20script%20in%20SPFX%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-57976%22%20slang%3D%22en-US%22%3E%3CP%3EThis%20looks%20like%20an%20issue%20with%20the%20typings%20being%20out%20of%20sync.%20As%20a%20first%20step%20I%20suggest%20that%20you%20make%20sure%20you%20have%20the%20latest%20generator%20installed%20and%20create%20a%20new%20project%20and%20see%20if%20that%20builds%20properly.%20The%20scaffolded%20project%20will%20include%20TypeScript.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAngular%202%20(aka%20Angular)%20is%20not%20yet%20fully%20supported%20in%20SPFx%2C%20but%20there%20is%20a%20prototype%20sample%20at%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Fangular2-prototype%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Fangular2-prototype%3C%2FA%3E.%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-57864%22%20slang%3D%22en-US%22%3ERe%3A%20sharepoint%20type%20script%20in%20SPFX%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-57864%22%20slang%3D%22en-US%22%3ESorry%2C%20I%20was%20wrong%20about%20using%20_spPageContextInfo.%20it's%20possible%20to%20use%20it%20on%20spfx%20(I%20think%20the%20issue%20I%20remember%20is%20when%20using%20the%20Local%20workbench)%3CBR%20%2F%3EThis%20sample%3CBR%20%2F%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Fblob%2F98138de57fd8ba3eb19afa69caf032ab785f0b0e%2Fsamples%2Freact-search%2Fsrc%2Fwebparts%2FsearchSpfx%2Fflux%2Fhelpers%2FSearchTokenHelper.ts%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Fblob%2F98138de57fd8ba3eb19afa69caf032ab785f0b0e%2Fsamples%2Freact-search%2Fsrc%2Fwebparts%2FsearchSpfx%2Fflux%2Fhelpers%2FSearchTokenHelper.ts%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3Eis%20using%20that%20variable%2C%20but%20I%20don't%20see%20the%20sharepoint%20typings.%20Instead%2C%20it's%20creating%20a%20custom%20interface%20with%20all%20_spPageContextInfo%20properties%2C%20and%20declaring%20the%20variable%20as%3A%3CBR%20%2F%3E%3CBR%20%2F%3Edeclare%20const%20_spPageContextInfo%3A%20IPageContext%3B%3CBR%20%2F%3E%3CBR%20%2F%3EWhere%20IPageContext%20is%20a%20custom%20interface%20defined%20here%3A%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Fblob%2F98138de57fd8ba3eb19afa69caf032ab785f0b0e%2Fsamples%2Freact-search%2Fsrc%2Fwebparts%2FsearchSpfx%2Futils%2FIPageContext.ts%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Fblob%2F98138de57fd8ba3eb19afa69caf032ab785f0b0e%2Fsamples%2Freact-search%2Fsrc%2Fwebparts%2FsearchSpfx%2Futils%2FIPageContext.ts%3C%2FA%3E%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-57854%22%20slang%3D%22en-US%22%3ERe%3A%20sharepoint%20type%20script%20in%20SPFX%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-57854%22%20slang%3D%22en-US%22%3Ecouple%20of%20comments%3A%3CBR%20%2F%3E-%20in%20order%20to%20install%20typings%2C%20you%20should%20use%20npm%20instead%20of%20Typings%3A%3CBR%20%2F%3Enpm%20install%20%40types%2Fsharepoint%20--save-dev%3CBR%20%2F%3E-%20Sys%20is%20not%20a%20sharepoint%20type.%20I%20think%20it%20comes%20from%20Microsoft%20AJAX.%3CBR%20%2F%3E-%20not%20sure%20if%20a%20spfx%20webpart%20can%20access%20the%20_spPageContextInfo%20variable%20(I%20remember%20%40PatrickRodgers%20had%20some%20issues%20with%20the%20PnP%20JS%20library%20because%20the%20spPageContextInfo%20variable%20was%20not%20available%20on%20the%20spfx).%3CBR%20%2F%3E-%20why%20do%20you%20need%20that%20spPageContextInfo%20variable%3F%20I'm%20asking%20cos%20you%20have%20some%20%22context%22%20info%20in%20the%20spfx%20webpart%3A%3CBR%20%2F%3Ethis.context.pageContext%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

Hi All,

I am working in SPFX with angular 2. I wanted to use sharepoint type script in my project. I have installed the sharepoint type script with npm command "typings install dt~sharepoint --global --save". When i tried to build the project with gulp serve command it give me 43 error all are in sharepoint dt.The error is "Error - typescript - typings\globals\sharepoint\index.d.ts(11190,40): error TS2304: Cannot find name 'Sys'." It seems some depency is not installed but i could not able to figure out which one. Please share your knowledge with me to fix this problem.

 

i want to use the sharepoint global variable _spPageContextInfo in typescript fir this reason i need sharepoint typescript reference that i get by "typings install dt~sharepoint --global --save". when try to build the project with gulf server it gives me avove error.

3 Replies
Highlighted
couple of comments:
- in order to install typings, you should use npm instead of Typings:
npm install @types/sharepoint --save-dev
- Sys is not a sharepoint type. I think it comes from Microsoft AJAX.
- not sure if a spfx webpart can access the _spPageContextInfo variable (I remember @PatrickRodgers had some issues with the PnP JS library because the spPageContextInfo variable was not available on the spfx).
- why do you need that spPageContextInfo variable? I'm asking cos you have some "context" info in the spfx webpart:
this.context.pageContext
Highlighted
Sorry, I was wrong about using _spPageContextInfo. it's possible to use it on spfx (I think the issue I remember is when using the Local workbench)
This sample

https://github.com/SharePoint/sp-dev-fx-webparts/blob/98138de57fd8ba3eb19afa69caf032ab785f0b0e/sampl...

is using that variable, but I don't see the sharepoint typings. Instead, it's creating a custom interface with all _spPageContextInfo properties, and declaring the variable as:

declare const _spPageContextInfo: IPageContext;

Where IPageContext is a custom interface defined here:
https://github.com/SharePoint/sp-dev-fx-webparts/blob/98138de57fd8ba3eb19afa69caf032ab785f0b0e/sampl...

Highlighted

This looks like an issue with the typings being out of sync. As a first step I suggest that you make sure you have the latest generator installed and create a new project and see if that builds properly. The scaffolded project will include TypeScript.

 

Angular 2 (aka Angular) is not yet fully supported in SPFx, but there is a prototype sample at https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/angular2-prototype.