TypeScript Deep Dive 日本語版
  • TypeScript Deep Dive 日本語版
  • TypeScript入門 & 環境構築
    • なぜTypeScriptを使うのか?
  • JavaScript
    • 等価演算子の同一性
    • リファレンス
    • nullとundefined
    • this
    • クロージャ
    • Number型
    • Truthy
  • モダンなJavaScriptの機能
    • クラス
      • Classes Emit
    • アロー関数
    • 残余引数(Restパラメータ)
    • let
    • const
    • 分割代入
    • スプレッド演算子
    • for...of
    • Iterator
    • テンプレートリテラル
    • Promise
    • ジェネレータ
    • async await
  • プロジェクトの環境設定
    • コンパイルコンテキスト
      • tsconfig.json
      • コンパイル対象ファイルの設定
    • 宣言空間
    • ファイルモジュール
      • ファイルモジュールの詳細
      • global.d.ts
    • 名前空間
    • 動的インポート
  • Node.js & TypeScriptのプロジェクト作成
  • React & TypeScriptのプロジェクト作成
  • TypeScriptの型システム
    • JavaScriptからの移行ガイド
    • @types パッケージ (DefinitelyTyped)
    • アンビエント宣言(declare)
      • 型定義ファイル
      • グローバル変数の宣言
    • インターフェース
    • Enum
    • lib.d.ts
    • 関数の型
    • 呼び出し可能オブジェクト
    • Type Assertion(型アサーション)
    • Freshness
    • 型ガード
    • リテラル型
    • Readonly
    • ジェネリック型
    • 型推論
    • 型の互換性
    • never
    • 判別可能なUnion型
    • Index signature(インデックス型)
    • 型の移動
    • 例外のハンドリング
    • ミックスイン
  • JSX
    • React
    • React以外のJSX
  • オプション
    • noImplicitAny
    • strictNullChecks
  • TypeScriptのエラー
    • エラーの理解
    • 一般的なエラー
  • NPM
  • テスト
    • Jest
    • Cypress
  • ツール
    • Prettier
    • Husky
    • Changelog
  • その他のヒント
    • String Based Enums
    • Nominal Typing
    • Stateful Functions
    • Bind is Bad
    • Currying
    • Type Instantiation
    • Lazy Object Literal Initialization
    • Classes are Useful
    • Avoid Export Default
    • Limit Property Setters
    • outFile caution
    • JQuery tips
    • static constructors
    • singleton pattern
    • Function parameters
    • Build Toggles
    • Barrel
    • Create Arrays
    • Typesafe Event Emitter
  • スタイルガイド(コーディング規約)
  • TypeScriptコンパイラの内側
    • Program
    • AST
      • TIP: Visit Children
      • TIP: SyntaxKind enum
      • Trivia
    • Scanner
    • Parser
      • Parser Functions
    • Binder
      • Binder Functions
      • Binder Declarations
      • Binder Container
      • Binder SymbolTable
      • Binder Error Reporting
    • Checker
      • Checker Diagnostics
      • Checker Error Reporting
    • Emitter
      • Emitter Functions
      • Emitter SourceMaps
    • Contributing
GitBook提供
このページ内
  • エラーを抑制する
  • サードパーティ製JavaScript
  • サードパーティ製NPMモジュール
  • 外部の非jsリソース
  • その他

役に立ちましたか?

  1. TypeScriptの型システム

JavaScriptからの移行ガイド

前提事項:

  • あなたはJavaScriptを知っている

  • プロジェクトで使用されているパターンや構築ツール(webpackなど)を知っている

そのような前提をもとに、一般にプロセスは以下のステップからなる:

  • tsconfig.jsonを追加する

  • ソースコードの拡張子を .jsから.tsに変更する。any型を使ってエラーを抑制する

  • 新しいコードはTypeScriptで記述し、できるだけanyを使わないようにする

  • 古いコードに戻り、型アノテーションを追加し、バグを修正する

  • サードパーティ製JavaScriptコードの型定義を使用する

これらの点のいくつかをさらに議論しましょう。

すべてのJavaScriptは_有効な_TypeScriptであることに注意してください。つまり、TypeScriptコンパイラにJavaScriptをいくつか与えると、TypeScriptコンパイラによって生成されたJavaScriptは元のJavaScriptとまったく同じように動作します。つまり、拡張子を.jsから.tsに変更しても、コードベースに悪影響はありません。

エラーを抑制する

TypeScriptはすぐに型チェックを開始しますが、元のJavaScriptコードはあなたが思っていたほど整っていない可能性があります。したがって、エラーが発生します。これらのエラーの多くは、anyを使用して抑制することができます。例:

var foo = 123;
var bar = 'hey';

bar = foo; // ERROR: cannot assign a number to a string

エラーが正しいものであったとしても(ほとんどの場合、推測された情報は、開発者の考えよりも優れています)、あなたはおそらくTypeScriptで新しいコードを書きつつ、古いコードを徐々に更新することに集中することになるでしょう。型エラーを抑制する方法は以下の通りです:

var foo = 123;
var bar = 'hey';

bar = foo as any; // Okay!

他の場所で何かをanyとアノテーションしたいことがあるかもしれません。例:

function foo() {
    return 1;
}
var bar = 'hey';
bar = foo(); // ERROR: cannot assign a number to a string

エラーを抑制した結果:

function foo(): any { // Added `any`
    return 1;
}
var bar = 'hey';
bar = foo(); // Okay!

注意:エラーを抑止することは危険ですが、新しく書いたTypeScriptコードでエラー通知を受けることができます。// TODO:コメントを残したほうが良いかもしれません。

サードパーティ製JavaScript

JavaScriptをTypeScriptに変更することはできますが、世界全体を変更してTypeScriptを使用することはできません。これは、TypeScriptのアンビエント定義のサポートが必要な部分です。最初はvendor.d.ts(.d.ts拡張子が、これは宣言ファイルであることを指定しています)を作成し、色々と雑多に詰め込むことをオススメします。あるいは、ライブラリに固有のファイルを作成します(例えば、jqueryのためのjquery.d.ts)。

jqueryの場合を考えてください。jqueryのために些細な定義を素早く簡単に作ることができます:

declare var $: any;

場合によっては、明示的なアノテーションを何か(例えばJQuery)に追加したいかもしれないし、型宣言スペースに何かが必要な場合もあります。typeキーワードを使って簡単に行うことができます:

declare type JQuery = any;
declare var $: JQuery;

これにより、将来の更新が簡単になります。

サードパーティ製NPMモジュール

declare module "jquery";

必要に応じてファイルにインポートすることができます:

import * as $ from "jquery";

外部の非jsリソース

JS以外のファイルであっても、単純な*スタイルの宣言でインポートできます。例えば.cssです(webpackスタイルのローダーやCSSモジュールのようなものを使用している場合)。理想的には、global.d.tsファイルの中でインポートします。

declare module "*.css";

これで、import * as foo from "./some/file.css"をインポートすることができます。

同様に、htmlテンプレート(angularなど)を使用している場合は、次のことを行えます:

declare module "*.html";

その他

前へTypeScriptの型システム次へ@types パッケージ (DefinitelyTyped)

最終更新 2 年前

役に立ちましたか?

注意: と呼ばれるOSSリポジトリには、上位90%のJavaScriptライブラリには、よくメンテナンスされた、厳密な型定義が存在します。ここにあるように独自の定義を作成する前に、そこを見ることをお勧めします。それにもかかわらず、この素早くもダーティな方法は、初期のTypeScriptにおける障壁を減らすために不可欠な知識です。

ここでも、 に高品質の「jquery.d.ts」が存在します。しかし、サードパーティ製のJavaScriptを使用している場合、JavaScript -> TypeScriptの摩擦をすばやく克服する方法を、あなたは既に知っています。次に、アンビエント宣言について詳しく説明します。

グローバル変数宣言と同様に、グローバルモジュールを簡単に宣言できます。例えばjqueryをモジュール()として使用したい場合は、あなた自身で以下のように書くことができます:

さらに、より高品質のjqueryモジュール宣言を提供する に高品質の jquery.d.tsが存在します。しかし、あなたのライブラリには存在しないかもしれません。なので、既に説明したように、少ない摩擦で移行を継続するための素早い方法があります🌹

もしチームがTypeScriptへの移行に積極的でなくて、もっと静かにアップグレードしたいときは、。

DefinitelyTyped
DefinitelyTyped
https://www.npmjs.com/package/jquery
DefinitelyTyped
チームを説得せずに気づかれずにアップグレードする方法について、TypeScriptチームがブログ記事を書いています