Sp-dev-docs: Upgrade TypeScript package to latest version

[lipalath-ms]

Category

• [x] Question
• [ ] Typo
• [ ] Bug
• [ ] Additional article idea

Expected or Desired Behavior

Upgrade Typescript package version to 3.1.6

Observed Behavior

I still see older version of TypeScript:

PS C:\Users\xyz\Desktopspfx-upgrade\EUS-Col\PApps> npm ls typescript
[email protected] C:\Users\xyz\Desktopspfx-upgrade\EUS-Col\PApps
+-- @microsoft/[email protected]
| +-- @microsoft/[email protected]
| | +-- @microsoft/[email protected]
| | | -- [email protected] | |-- [email protected] deduped
| -- @microsoft/[email protected] |-- [email protected] deduped
+-- @microsoft/[email protected]
| -- @microsoft/[email protected] |-- [email protected] deduped
+-- [email protected]
| -- [email protected] extraneous -- [email protected]

npm ERR! extraneous: [email protected] C:\Users\xyz\Desktopspfx-upgrade\EUS-Col\PAppsnode_modulesnode-sppkg-deploynode_modulestypescript

Steps to Reproduce

npm install -g [email protected]
npm ls typescript

Please let me know how I can get latest version of TypeScript in my project?

Thanks for your contribution! Sharing is caring.

[darkriderdesign]

I tried this also, with the same results. It looks like typescript version is hard coded in the Microsoft mode modules folder.

This is kind of a show stopper? In that almost all react based UI frameworks are using 2.8 of newer.... material-design ui is using 3.

To put things into perspective... If I try and find a version of material design ui that uses typescript 2.4 I literally have to go back to pre beta?

[cebud]

Install latest typescript locally:

• npm install [email protected]

Update gulpfile.js in SPFx project:

const typescriptBuild = require('@microsoft/gulp-core-build-typescript');

typescriptBuild.tscCmd.mergeConfig({
overridePackagePath: 'node_modules/typescript'
});

[patmill]

We are working on updated typescript support, but it is not available yet.

[salascz]

Potential typings conflicts might be resolved within “resolutions” attribute in package.json file.

[cebud]

@xyz92 Try to update ts-lint to newer version.

• npm install ts-lint

Add to gulpfile.js:

typescriptBuild.tslintCmd.mergeConfig({
overridePackagePath: 'node_modules/tslint'
});

[lipalath-ms]

@cebud Thank you! I still see 2.4.2 version in microsoft modules:

[email protected] C:\Users\lipalath\Desktopspfx-upgrade\EUS-Col-ColPub-PublishApps\PublishApps
+-- @microsoft/[email protected]
| +-- @microsoft/[email protected]
| | +-- @microsoft/[email protected]
| | | -- [email protected] | |-- [email protected]
| -- @microsoft/[email protected] |-- [email protected]
+-- @microsoft/[email protected]
| -- @microsoft/[email protected] |-- [email protected]
-- [email protected] -- [email protected] extraneous

Also, I see [tsc] errors - TS2564: Property 'isReviewer' has no initializer and is not definitely assigned in the constructor. Are these introduced as a part of typescript version upgrade?

[cebud]

@xyz92

During the compilation of which file this error occurred? It is in your custom code? _[tsc] errors - TS2564: Property 'isReviewer' has no initializer and is not definitely assigned in the constructor._

The problem is most likely due to the strictPropertyInitialization flag firstly introduced in TypeScript 2.7 (and beyond), which could cause these kind of errors.

[cebud]

@xyz92 Where do you have tslint.json? in config folder? or on the same level as is tsconfig.json, package.json,...

[lipalath-ms]

@cebud Figured out the issue. I had 2 tslint.json files in my project - one on the same level of tsconfig.json, package.json (where I made the updates), one within src folder. I had to update that as well. Thank you so much! Appreciate your help!

[darkriderdesign]

@Cebud.... this totally works, thank you.

[FlorianGrimm]

Ola

I'm using on a project "@microsoft/sp-build-web": "1.5.1".
I accidentally installed Node.JS version:v10.14.0 on my maschine.

As I reallized that - and it worked - I also updated the typescript version to 3.2.1.

As I hacked @microsoft\gulp-core-build-typescript via

cd node_modules\@microsoft\gulp-core-build-typescript
yarn add typescript tslint-microsoft-contrib

I was also able to run gulp serve, gulp bundle, gulp package-solution.

I don't have installed any Typescript version globally.

[lipalath-ms]

@cebud After updating gulp files, I ran gulp build and I still see my older version of TypeScript being listed:

[17:57:55] Starting subtask 'typescript'...
[17:57:55] [typescript] TypeScript version: 2.4.2
typeof-compare is deprecated. Starting from TypeScript 2.2 the compiler includes this check which makes this rule redundant.

Please let me know if I am missing any steps to upgrade. Thank you!

[cebud]

@xyz92 What's the SPFx version in your project? The previous steps are valid only for version 1.6 and newer.

[lipalath-ms]

SPFx version is 1.7.0, NodeJS: 8.11.4, npm: 6.4.1

[mrukas]

@xyz92 @cebud

I also had to upgrade typescript in order to get Ant Design working.
The solution above wasn't working for me.
My workaround was the following:

• npm install typescript --save-dev
• Edit gulpfile so it looks lile this:

'use strict';

const typeScriptConfig = require('@microsoft/gulp-core-build-typescript/lib/TypeScriptConfiguration');

typeScriptConfig.TypeScriptConfiguration.setTypescriptCompiler(require('typescript'));

const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

build.initialize(gulp);

[lipalath-ms]

@cebud Hi, when I try to run gulp build, it takes ~8 minutes to complete step "Finished subtask 'tsc'". It usually gets completed in seconds (before typescript upgrade). Could you please let me know if you have idea to resolve this?

[patmill]

What does the output of gulp serve --verbose look like?

[lipalath-ms]

@patmill Here is the output for gulp serve --verbose:

gulp serve --verbose
Build target: DEBUG
Found config file: copy-assets.json
Found config file: write-manifests.json
Found config file: serve.json
Found config file: deploy-azure-storage.json
Found config file: package-solution.json
[12:54:23] Using gulpfile ~_\EUS\PAgulpfile.js
[12:54:23] Starting gulp
[12:54:23] Starting 'serve'...
[12:54:23] Starting subtask 'configure-sp-build-rig'...
[12:54:23] [configure-sp-build-rig] Found config file: config.json
[12:54:23] Finished subtask 'configure-sp-build-rig' after 19 ms
[12:54:23] Starting subtask 'spfx-serve'...
[12:54:23] Starting server...
Starting api server on port 5432.
Registring api: /workbench
Registring api: /
[12:54:24] Finished subtask 'spfx-serve' after 1.39 s
[12:54:25] Starting subtask 'pre-copy'...
[12:54:25] Finished subtask 'pre-copy' after 50 ms
[12:54:25] Starting subtask 'copy-static-assets'...
[12:54:25] Starting subtask 'sass'...
[12:54:25] Server started https://localhost:4321
[12:54:25] LiveReload started on port 35729
[12:54:25] Running server
[12:54:25] Opening https://localhost:5432/workbench using the default OS app
[12:54:26] Finished subtask 'sass' after 1.46 s
[12:54:26] Starting subtask 'tslint'...
[12:54:26] [tslint] tslint version: 5.11.0
[12:54:27] Starting subtask 'tsc'...
[12:54:27] [tsc] typescript version: 3.1.6
Request: [::1] '/workbench'
Request: '/temp/workbench.html'
[12:54:28] Finished subtask 'copy-static-assets' after 3.2 s
Request: '/temp/manifests.js'
Request: '/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js'
Request: '/temp/workbench-packages/@microsoft_sp-webpart-workbench/lib/api/workbenchInit.js'
Request: '/node_modules/@microsoft/decorators/dist/decorators.js'
Request: '/node_modules/@microsoft/sp-component-base/dist/sp-component-base_en-us.js'
Request: '/node_modules/@microsoft/sp-extension-base/dist/sp-extension-base_en-us.js'
Request: '/node_modules/@microsoft/sp-application-base/dist/sp-application-base_en-us.js'
Request: '/temp/workbench-packages/react/umd/react.development.js'
Request: '/temp/workbench-packages/react-dom/umd/react-dom.development.js'
Request: '/node_modules/@microsoft/office-ui-fabric-react-bundle/dist/office-ui-fabric-react-bundle.js'
Request: '/node_modules/@microsoft/sp-webpart-base/dist/sp-webpart-base_en-us.js'
Request: '/node_modules/@microsoft/sp-webpart-workbench/dist/sp-webpart-workbench_en-us.js'
Request: '/node_modules/@microsoft/sp-webpart-workbench/dist/4.4_4c6ac99cf0a3a4aaf266.js'
Request: '/node_modules/@microsoft/sp-webpart-workbench/dist/3.3_82dcff9c7c8ac15d1d73.js'
Request: '/temp/workbench-packages/@microsoft_sp-webpart-workbench/lib/api/assets/server-icon.png'
[12:54:59] Finished subtask 'tslint' after 32 s
[13:03:05] Finished subtask 'tsc' after 8.63 min
[13:03:05] Starting subtask 'api-extractor'...
[13:03:05] Finished subtask 'api-extractor' after 2.21 ms
[13:03:05] Starting subtask 'post-copy'...
[13:03:05] Finished subtask 'post-copy' after 2.13 ms
[13:03:05] Starting subtask 'collectLocalizedResources'...
[13:03:05] [collectLocalizedResources] 1 localized resources defined.
[13:03:05] [collectLocalizedResources] Found file "lib/webparts/pa/loc/en-us.js", identified as locale "en-us"
[13:03:05] [collectLocalizedResources] Found file "lib/webparts/pa/loc/es-es.js", identified as locale "es-es"
[13:03:05] [collectLocalizedResources] Found file "lib/webparts/pa/loc/hi-in.js", identified as locale "hi-in"
[13:03:05] Finished subtask 'collectLocalizedResources' after 24 ms
[13:03:05] Starting subtask 'configure-webpack'...
[13:03:08] [configure-webpack] 1 entries specified.
[13:03:08] [configure-webpack] 20 externals specified.
[13:03:08] [configure-webpack] 1 localized resources specified.
[13:03:08] Finished subtask 'configure-webpack' after 3.14 s
[13:03:08] Starting subtask 'webpack'...
[13:03:17] Finished subtask 'webpack' after 8.88 s
[13:03:17] Starting subtask 'configure-webpack-external-bundling'...
[13:03:17] [configure-webpack-external-bundling] No localized resources specified, nothing to do.
[13:03:17] Finished subtask 'configure-webpack-external-bundling' after 2.84 ms
[13:03:17] Starting subtask 'copy-assets'...
[13:03:18] Finished subtask 'copy-assets' after 352 ms
[13:03:18] Starting subtask 'write-manifests'...

[patmill]

OK, that's seriously weird. If you do the usual "what is my machine doing" things (look at perf monitor, network usage, disk usage, cpu usage, etc.) can you tell what subsystem is getting hammered? I'd expect my machine to sound like a jet engine if it was spending 8 minutes on CPU.

[lipalath-ms]

It's the CPU I think:

[lipalath-ms]

I upgraded typescript to latest version 3.4.2 and now is taking only seconds :) Thank you!

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues