issue closed nodejs typescript

Typescript3.0以下の環境で発生する「Cannot find name ‘unknown’」に対処する

投稿日:2019年6月9日 更新日:

事象

Typescript2.3.4を使っている息の長いWebシステムでnpm installをし直し、tscビルドし直したらトランスパイルエラーが発生。「unknown」という型を見つけられませんとwebpack越しにtscコマンドがこけます。

[14:27:05]  transpile started ...
[14:27:25]  typescript: C:/src/pwa/awsomeapp/node_modules/raven-js/typescript/raven.d.ts, line: 205
            Cannot find name 'unknown'.

     L206:       * Manually send a message to Sentry

原因

unknown型はTypescript3から実装されている型なので、Typescript2環境では使えません。自分のコードで使っていなくても、npm installした依存モジュールが使っている場合、tscトランスパイルに失敗します。

今回の場合、エラーログ収集サーバであるSentryに対してフロントからエラーログを投げる為に入れているraven-jsで発生しました。npm installし直したことでraven-js@3.26.2から3.27.1にバージョンが上がり、この過程で開発元がTypescript3を使い始めたのかタイプ定義(raven.d.ts)内でunknown型を使用していました。

    captureException(
      ex: unknown,  ← これ
      options?: RavenOptions
    ): RavenStatic;

結果、Typescript2環境では事象のトランスパイルエラーが発生してしまいます。

対処

unknown型を解決出来るpolyfillを入れます。

$ npm install unknown-ts --save-dev
+ unknown-ts@0.1.0
added 1 package and removed 1 package in 66.533s

後は読み込みルートになるts(ionicやangularであればapp.modules.tsとか)に以下を入れればunknown型が使えるようになります。

import "unknown-ts";

再度ビルド実行して事象のエラーが発生しなくなることを確認します。

まとめ

インストールしたunknown-tsの内容はたったこれだけです。

export type mixed = { [key: string]: any } | object | number | string | boolean | symbol | undefined | null | void

declare global {
  type unknown = mixed
}

これと同じ記述を読み込みルートになるtsに書いてあげればunknown-tsをインストールしなくても解決します。

ですがTypescriptは2系のままの環境でも、tslintのバージョンは結構上がっていたりしてunknown型のことを知っていて、新規にunknown型を定義しようとすると今度はtslintに注意されるハメになります。

ビルドは通るようにはなりますが、VSCode上でtslintエラーが表示されてしまうのは精神的にスッキリしないので、素直にunknown-tsを入れて今はそっと蓋をしました。

Typescriptを3系に上げたらnpm uninstallするのを忘れないようにしないとですね。

-issue closed, nodejs, typescript

執筆者:

関連記事

EclipseのXMLエディタ一行目でDTDエラー「参照ファイルにエラーが含まれています」

目次1 事象2 原因3 対処4 まとめ 事象 checkstyleのルールXMLをEclipseで開くと一行目にエラーマーク。 カーソルを合わせた時のメッセージ。 XMLのデータ構造整合性をチェックす …

git push時に「error: RPC failed; result=22, HTTP code = 501」エラー

目次1 事象2 原因3 対処 事象 オンプレGitLabへのgit push時に掲題のエラーが発生してpushに失敗します。 原因 git push時の1ファイル最大サイズは1Mbyteの為。 git …

Angularのテンプレート評価式にビット演算を使うとTemplate parse errorが発生する

AngularのテンプレートHTMLでビット演算をすることは禁じられているので代替手段を考えます。 目次1 事象2 原因3 対処 事象 CSSクラスをビット演算で切り替えるテンプレートを書きました。c …

ERROR: Several keys given – pgcrypto does not handle keyring、またはERROR: Corrupt ascii-armor

gpgキーストアに同じUIDで複数の鍵ペアを登録してしまうと、ファイルにexportした際に1ファイルに複数の鍵情報が入ってしまい、1ファイル1鍵を期待しているpgcryptoに怒られます。 目次1 …

Nodeアプリが依存するnpmモジュールライセンスをlicense-checker & Jenkinsで自動チェック(2)

目次1 目的1.1 動作イメージ2 Jenkinsジョブを設定2.1 前提2.2 Jenkins「シェルの実行」を設定2.3 想定外ライセンスが含まれていた場合の通知3 まとめ 目的 前回の続き。On …

 

shingo.nakanishi
 

東京在勤、職歴2n年中年ITエンジニアです。まだ開発現場で頑張っています。

19歳(1996年)から書き始めたアウトプット用プライベートWeb日記数が5,000日を超え、残りの人生は発信をして行きたいと思い、令和元日からこのサイトを開始しました。勉強と試行錯誤をしながら、自分が経験したIT関連情報を投稿しています。

私と同じく、今後IT業界で生計を立てて行きたいと考えている方や、技術共有したいけど仲間が居なくて孤独、といった方と一緒に成長、知識共有して行けたら楽しいな、と思っています。