# JavaScriptからの移行ガイド

前提事項：

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

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

* `tsconfig.json`を追加する
* ソースコードの拡張子を `.js`から`.ts`に変更する。any型を使ってエラーを抑制する
* 新しいコードはTypeScriptで記述し、できるだけ`any`を使わないようにする
* 古いコードに戻り、型アノテーションを追加し、バグを修正する
* サードパーティ製JavaScriptコードの型定義を使用する

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

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

### エラーを抑制する

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

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

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

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

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

bar = foo as any; // Okay!
```

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

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

エラーを抑制した結果：

```typescript
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`)。

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

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

```typescript
declare var $: any;
```

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

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

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

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

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

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

```typescript
declare module "jquery";
```

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

```typescript
import * as $ from "jquery";
```

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

## 外部の非jsリソース

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

```typescript
declare module "*.css";
```

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

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

```typescript
declare module "*.html";
```

## その他

もしチームがTypeScriptへの移行に積極的でなくて、もっと静かにアップグレードしたいときは、[チームを説得せずに気づかれずにアップグレードする方法について、TypeScriptチームがブログ記事を書いています](https://devblogs.microsoft.com/typescript/how-to-upgrade-to-typescript-without-anybody-noticing-part-1/)。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://typescript-jp.gitbook.io/deep-dive/type-system/migrating.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.