One IT Thing

IT業界で飯を食う為の学習系雑記

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するのを忘れないようにしないとですね。

-nodejs, typescript, プチハマリ解決日記

執筆者:

関連記事

Android用ionic cordovaアプリのビルド時に「Unable to merge dex」エラー

目次1 事象2 原因3 解決4 まとめ 事象 「cordova-plugin-admob-free」を追加した次のビルドで発生。他のケースでも発生する可能性があります。 C:\src\ionic\aw …

org.apache.poi.ooxml.POIXMLException: Strict OOXML isn’t currently supported, please see bug #57699

目次1 事象2 原因3 対処4 まとめ 事象 以下のExcelファイルをApache POIで読み込んだ際に発生。  mojikiban.ipa.go.jp  5 twe …

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

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

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

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

Apple PayのMerchant Doamin設定がPendingになり、Verifiedにならなかった原因

開発しているWebシステム上でApple Payによるクレジットカード選択が出来るようにするには「Apple Developer Program」で「Merchant Domain」を設定します。 & …

 

shingo.nakanishi
 

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

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

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