diff --git a/packages/documentation/copy/ja/javascript/Creating DTS files From JS.md b/packages/documentation/copy/ja/javascript/Creating DTS files From JS.md new file mode 100644 index 000000000000..e5ccdbe82660 --- /dev/null +++ b/packages/documentation/copy/ja/javascript/Creating DTS files From JS.md @@ -0,0 +1,88 @@ +--- +title: .jsファイルから.d.tsファイルを生成する +layout: docs +permalink: /ja/docs/handbook/declaration-files/dts-from-js.html +oneline: "JavaScriptプロジェクトでd.tsファイルを生成する方法" +translatable: true +--- + +[TypeScript 3.7](/docs/handbook/release-notes/typescript-3-7.html#--declaration-and---allowjs)では、 +TypeScriptに、JSDoc構文を使ったJavaScriptから.d.tsファイルを生成するためのサポートが導入されました。 + +この仕組みは、プロジェクトをTypeScriptに移行することなく、TypeScriptが備わったエディタの体験を自分のものにできるということを意味します。 +TypeScriptはほとんどのJSDocタグをサポートしています。リファレンスは[こちら](/docs/handbook/type-checking-javascript-files.html#supported-jsdoc)。 + +## .d.tsファイルを出力するようにプロジェクトを設定する + +プロジェクトに.d.tsファイルの作成を追加するように設定するには、最大4つのステップを実行する必要があります: + +- dev dependenciesにTypeScriptを追加する +- TypeScriptを設定するための`tsconfig.json`を追加する +- TypeScriptコンパイラを実行して、JSファイルに対応するd.tsファイルを生成する +- (任意) package.jsonを編集して型を参照できるようにする + +### TypeScriptを追加する + +こちらは、[インストールページ](/download)を参照してください。 + +### TSConfig + +TSConfigはコンパイラのフラグを設定し、対象のファイルを宣言するためのjsoncファイルです。 +今回のケースでは、次のようなファイルが必要になるでしょう: + +```json5 +{ + // プロジェクトに合わせて変更してください + include: ["src/**/*"], + + compilerOptions: { + // JSファイルは通常、ソースファイルとして無視されますが、 + // ここではJSファイルを読み込むようにTypeScriptに指示します + allowJs: true, + // d.tsファイルを生成します + declaration: true, + // コンパイラを実行すると + // d.tsファイルのみ出力されます + emitDeclarationOnly: true, + // 型はこのディレクトリに出力されます + // このオプションを削除すると + // .jsファイルの隣に.d.tsファイルが置かれます + outDir: "dist", + }, +} +``` + +オプションについては、[tsconfigリファレンス](/reference)で詳しく知ることができます。 +TSConfigファイルを使用する代替手段としてCLIがあります。次は上記のTSConfigファイルの設定と同じふるまいをするCLIコマンドです。 + +```sh +npx typescript src/**/*.js --declaration --allowJs --emitDeclarationOnly --outDir types +``` + +## コンパイラを実行する + +実行方法については[インストールページ](/download)を参照してください。 +プロジェクトの`.gitignore`にファイルが指定してある場合は、これらのファイルがパッケージに含まれていることを確認しましょう。 + +## package.jsonを編集する + +TypeScriptは、.d.tsファイルを見つけるためのステップを追加し、`package.json`の中でNodeのモジュール解決を再現します。 +大まかには、モジュール解決は任意のフィールドである`"types"`フィールドをチェックし、次に`"main"`フィールド、そして最後にルートの`index.d.ts`を試します。 + +| Package.json | デフォルトの.d.tsの場所 | +| :------------------------ | :----------------------------- | +| "types"フィールドがない | "main"をチェックし、次にindex.d.ts| +| "types": "main.d.ts" | main.d.ts | +| "types": "./dist/main.js" | ./main/main.d.ts | + +もし存在しなければ、次は"main"が使用されます + +| Package.json | デフォルトの.d.tsの場所 | +| :----------------------- | :------------------------ | +| "main"フィールドがない | index.d.ts | +| "main":"index.js" | index.d.ts | +| "main":"./dist/index.js" | ./dist/index.d.ts | + +## Tips + +.d.tsファイルにテストを記述したいなら、[tsd](https://github.com/SamVerschueren/tsd)を試してみてください。 diff --git a/packages/documentation/copy/ja/javascript/Intro to JS with TS.md b/packages/documentation/copy/ja/javascript/Intro to JS with TS.md new file mode 100644 index 000000000000..9525a8945732 --- /dev/null +++ b/packages/documentation/copy/ja/javascript/Intro to JS with TS.md @@ -0,0 +1,70 @@ +--- +title: TypeScriptを活用したJSプロジェクト +layout: docs +permalink: /ja/docs/handbook/intro-to-js-ts.html +oneline: TypeScriptを使ってJavaScriptファイルに型チェックを追加する方法 +translatable: true +--- + +TypeScriptの型システムがコードベースを扱う際には、様々な厳密さのレベルがあります: + +- JavaScriptのコードを使った推論のみに基づく型システム +- [JSDoc](/docs/handbook/jsdoc-supported-types.html)によるJavaScriptの段階的な型付け +- JavaScriptファイルにおける`// @ts-check`の使用 +- TypeScriptコード +- [`strict`](/tsconfig#strict)を有効にしたTypeScript + +それぞれのステップはより安全な型システムへの動きを表していますが、すべてのプロジェクトがそのレベルでの検証を必要としているわけではありません。 + +## JavaScriptと併用するTypeScript + +こちらは、オートコンプリートやシンボルへのジャンプといった機能や、リネームなどのリファクタリングツールを提供するためにTypeScriptを使用しているエディタを使う場合です。 +[homepage](/)では、TypeScriptプラグインを備えているエディタをリストしています。 + +## JSDocを使ってJSで型ヒントを提供する + +`.js`ファイルでは、多くの場合型を推測することが可能です。型が推測できない場合、JSDoc構文を使って指定することができます。 + +宣言の前でJSDocのアノテーションを使い、その宣言の型を設定します。例えば: + +```js twoslash +/** @type {number} */ +var x; + +x = 0; // OK +x = false; // OK?! +``` + +サポートしているJSDocパターンの全リストは[JSDocがサポートする型](/docs/handbook/jsdoc-supported-types.html)にあります。 + +## `@ts-check` + +前述のコードサンプルの最後の行はTypeScriptではエラーとなりますが、JSプロジェクトのデフォルトではエラーを発生させません。 +JavaScriptファイルでエラーを有効化するには、`.js`ファイルの最初の行に`// @ts-check`を追加して、TypeScriptにエラーを発生させるようにします。 + +```js twoslash +// @ts-check +// @errors: 2322 +/** @type {number} */ +var x; + +x = 0; // OK +x = false; // エラー +``` + +エラーを追加したいJavaScriptファイルがたくさんある場合は、[`jsconfig.json`](/docs/handbook/tsconfig-json.html)を使用するように変更しましょう。 +ファイルに`// @ts-nocheck`コメントをつけることで、ファイルのチェックを省略することができます。 + +TypeScriptはあなたが納得できないようなエラーを発生させるかもしれませんが、その場合は前の行に`// @ts-ignore`または`// @ts-expect-error`を追加することで、特定の行のエラーを無視することができます。 + +```js twoslash +// @ts-check +/** @type {number} */ +var x; + +x = 0; // OK +// @ts-expect-error +x = false; // エラー +``` + +JavaScriptがTypeScriptによってどのように解釈されるかについて知りたい場合は、[TSの型がJSをチェックする方法](/docs/handbook/type-checking-javascript-files.html)を参照してください。 diff --git a/packages/documentation/copy/ja/javascript/JSDoc Reference.md b/packages/documentation/copy/ja/javascript/JSDoc Reference.md new file mode 100644 index 000000000000..b03b01cd6d2b --- /dev/null +++ b/packages/documentation/copy/ja/javascript/JSDoc Reference.md @@ -0,0 +1,693 @@ +--- +title: JSDocリファレンス +layout: docs +permalink: /ja/docs/handbook/jsdoc-supported-types.html +oneline: TypeScriptを備えたJavaScriptはどのようなJSDocをサポートしているか +translatable: true +--- + +以下のリストは、JavaScriptファイルの型情報を提供する +JSDocアノテーションにおいて、現在サポートされている構文の概要です。 + +以下に明示的にリストに入っていないタグ(`@async`など)はまだサポートされていないことに注意してください。 + +- `@type` +- `@param` (or `@arg` or `@argument`) +- `@returns` (or `@return`) +- `@typedef` +- `@callback` +- `@template` +- `@class` (or `@constructor`) +- `@this` +- `@extends` (or `@augments`) +- `@enum` + +#### `class`拡張 + +- [プロパティ修飾子](#jsdoc-property-modifiers) `@public`、`@private`、`@protected`、`@readonly` + +タグの意味は通常、[jsdoc.app](https://jsdoc.app)で与えられたものと同じか、あるいはそのスーパーセットです。 +以下のコードでは、それぞれのタグの違いを説明し、使用例を示します。 + +**注意:** [JSDocサポートを探るプレイグラウンド](/play?useJavaScript=truee=4#example/jsdoc-support)を使用できます + +## `@type` + +"@type"タグを使用すれば、型名(プリミティブ、TypeScript宣言やJSDocの"@typedef"タグで定義されたもの)を参照することができます。 +ほとんどのJSDoc型と、[`string`のような最も基本的なもの](/docs/handbook/basic-types.html)から[Conditional Typesのような高度なもの](/docs/handbook/advanced-types.html)まで、あらゆるTypeScriptの型を使うことができます。 + +```js twoslash +/** + * @type {string} + */ +var s; + +/** @type {Window} */ +var win; + +/** @type {PromiseLike} */ +var promisedString; + +// DOMプロパティを使ってHTML要素を指定することができます。 +/** @type {HTMLElement} */ +var myElement = document.querySelector(selector); +element.dataset.myData = ""; +``` + +`@type`ではUnion型も指定できます — 例えば、次の型は文字列か真偽値のどちらかになります。 + +```js twoslash +/** + * @type {(string | boolean)} + */ +var sb; +``` + +Union型の場合は、丸括弧は任意であることに注意してください。 + +```js twoslash +/** + * @type {string | boolean} + */ +var sb; +``` + +様々な構文を使って配列の型を指定することができます: + +```js twoslash +/** @type {number[]} */ +var ns; +/** @type {Array.} */ +var nds; +/** @type {Array} */ +var nas; +``` + +オブジェクトリテラル型を指定することもできます。 +例えば、'a' (文字列) と 'b' (数値) をプロパティとして持つオブジェクトは次のような構文を使って指定します: + +```js twoslash +/** @type {{ a: string, b: number }} */ +var var9; +``` + +JSDocの標準構文かTypeScriptの構文を使えば、文字列と数値のインデックスシグネチャを使ってマップや配列のようなオブジェクトを指定することができます。 + +```js twoslash +/** + * 任意の`string`プロパティを`number`にマッピングするマップライクなオブジェクト + * + * @type {Object.} + */ +var stringToNumber; + +/** @type {Object.} */ +var arrayLike; +``` + +前述の2つの型は、TypeScriptの型である`{ [x: string]: number }`および`{ [x: number]: any }`と等価です。コンパイラは両方の構文を理解します。 + +関数は、TypeScriptとClosureのどちらの構文を使っても指定することができます: + +```js twoslash +/** @type {function(string, boolean): number} Closure構文 */ +var sbn; +/** @type {(s: string, b: boolean) => number} TypeScript構文 */ +var sbn2; +``` + +あるいは、型が特定されていない`Function`型を使うこともできます: + +```js twoslash +/** @type {Function} */ +var fn7; +/** @type {function} */ +var fn6; +``` + +Closureの他の型でも動作します: + +```js twoslash +/** + * @type {*} - 'any'型になります + */ +var star; +/** + * @type {?} - 不明な型('any'と同じ) + */ +var question; +``` + +### キャスト + +TypeScriptはClosureからキャスト構文を借用しています。 +これにより、丸括弧で囲まれた式の前に`@type`タグを追加することで、型を他の型にキャストすることができます。 + +```js twoslash +/** + * @type {number | string} + */ +var numberOrString = Math.random() < 0.5 ? "hello" : 100; +var typeAssertedNumber = /** @type {number} */ (numberOrString); +``` + +### インポート型 + +インポート型を使用して他のファイルから宣言をインポートすることもできます。 +この構文はTypeScript固有のものであり、JSDocの標準とは異なります: + +```js twoslash +// @filename: types.d.ts +export type Pet = { + name: string, +}; + +// @filename: main.js +/** + * @param p { import("./types").Pet } + */ +function walk(p) { + console.log(`Walking ${p.name}...`); +} +``` + +インポート型は型エイリアス宣言でも使用できます: + +```js twoslash +// @filename: types.d.ts +export type Pet = { + name: string, +}; +// @filename: main.js +// ---cut--- +/** + * @typedef { import("./types").Pet } Pet + */ + +/** + * @type {Pet} + */ +var myPet; +myPet.name; +``` + +型がわからない場合や型が大きくて型を付けるのが面倒な場合に、インポート型を使ってモジュールから値の型を取得することができます: + +```js twoslash +// @filename: accounts.d.ts +export const userAccount = { + name: "Name", + address: "An address", + postalCode: "", + country: "", + planet: "", + system: "", + galaxy: "", + universe: "", +}; +// @filename: main.js +// ---cut--- +/** + * @type {typeof import("./accounts").userAccount } + */ +var x = require("./accounts").userAccount; +``` + +## `@param`と`@returns` + +`@param`は`@type`と同じ型の構文を使用しますが、パラメータ名を追加します。 +また、パラメータ名を角括弧で囲むことで、パラメータを任意のものとして宣言することもできます: + +```js twoslash +// パラメータは様々な構文形式で宣言することができます +/** + * @param {string} p1 - 文字列パラメータ + * @param {string=} p2 - 任意のパラメータ(Closure構文) + * @param {string} [p3] - 任意のパラメータ(JSDoc構文). + * @param {string} [p4="test"] - デフォルト値を持つ任意のパラメータ + * @return {string} 結果 + */ +function stringsStringStrings(p1, p2, p3, p4) { + // TODO +} +``` + +関数の戻り値の型についても同様です: + +```js twoslash +/** + * @return {PromiseLike} + */ +function ps() {} + +/** + * @returns {{ a: string, b: number }} - '@returns'と同じく'@return'を使うことができます + */ +function ab() {} +``` + +## `@typedef`、`@callback`および`@param` + +複雑な型を定義するために`@typedef`を使うことができます。 +`@param`を使った同様の構文でも動作します。 + +```js twoslash +/** + * @typedef {Object} SpecialType - 'SpecialType'という名前の新しい型を作成 + * @property {string} prop1 - SpecialTypeの文字列プロパティ + * @property {number} prop2 - SpecialTypeの数値プロパティ + * @property {number=} prop3 - SpecialTypeの任意の数値プロパティ + * @prop {number} [prop4] - SpecialTypeの任意の数値プロパティ + * @prop {number} [prop5=42] - SpecialTypeのデフォルト値を持つ任意の数値プロパティ + */ + +/** @type {SpecialType} */ +var specialTypeObject; +specialTypeObject.prop3; +``` + +最初の行には、`object`あるいは`Object`のどちらかを使うことができます。 + +```js twoslash +/** + * @typedef {object} SpecialType1 - 'SpecialType'という名前の新しい型を作成 + * @property {string} prop1 - SpecialTypeの文字列プロパティ + * @property {number} prop2 - SpecialTypeの数値プロパティ + * @property {number=} prop3 - SpecialTypeの任意の数値プロパティ + */ + +/** @type {SpecialType1} */ +var specialTypeObject1; +``` + +`@param`を使えば、同様の構文で一回限りの型を指定することができます。 +ネストされたプロパティ名の前には、パラメータ名をつけなければならないことに注意してください: + +```js twoslash +/** + * @param {Object} options - 形状は上記のSpecialTypeと同じ + * @param {string} options.prop1 + * @param {number} options.prop2 + * @param {number=} options.prop3 + * @param {number} [options.prop4] + * @param {number} [options.prop5=42] + */ +function special(options) { + return (options.prop4 || 1001) + options.prop5; +} +``` + +`@callback`は`@typedef`に似ていますが、オブジェクト型ではなく関数型を指定します: + +```js twoslash +/** + * @callback Predicate + * @param {string} data + * @param {number} [index] + * @returns {boolean} + */ + +/** @type {Predicate} */ +const ok = (s) => !(s.length % 2); +``` + +もちろん、これらの型はすべてTypeScriptの構文を使って一行の`@typedef`で宣言することができます: + +```js +/** @typedef {{ prop1: string, prop2: string, prop3?: number }} SpecialType */ +/** @typedef {(data: string, index?: number) => boolean} Predicate */ +``` + +## `@template` + +ジェネリクス関数は`@template`タグを使って宣言することができます: + +```js twoslash +/** + * @template T + * @param {T} x - 戻り値に流用するジェネリクスパラメータ + * @return {T} + */ +function id(x) { + return x; +} + +const a = id("string"); +const b = id(123); +const c = id({}); +``` + +複数の型パラメータを宣言するには、コンマか複数のタグを使用します: + +```js +/** + * @template T,U,V + * @template W,X + */ +``` + +型パラメータ名の前に、型制約を指定することもできます。 +リストにある最初の型パラメータだけが、制約を受けます: + +```js twoslash +/** + * @template {string} K - Kは文字列または文字列リテラルでなければなりません + * @template {{ serious(): string }} Seriousalizable - seriousメソッドを持っていなければなりません + * @param {K} key + * @param {Seriousalizable} object + */ +function seriousalize(key, object) { + // ???? +} +``` + +ジェネリクスのクラスや型の宣言はサポートされていません。 + +## クラス + +クラスはES6のクラスとして宣言することができます。 + +```js twoslash +class C { + /** + * @param {number} data + */ + constructor(data) { + // プロパティの型は推測されます + this.name = "foo"; + + // あるいは、明示的に設定することもできます + /** @type {string | null} */ + this.title = null; + + // また、他のところで設定されている場合は、単に型注釈をつけることもできます + /** @type {number} */ + this.size; + + this.initialize(data); // initializerは文字列を受け取るので、エラーになるべきです + } + /** + * @param {string} s + */ + initialize = function (s) { + this.size = s.length; + }; +} + +var c = new C(0); + +// Cはnewを使用した場合のみ呼び出されるべきですが、 +// JavaScriptでは、以下は許可されており、 +// これは'any'型とみなされます。 +var result = C(1); +``` + +次の節で説明するように、コンストラクタ関数として宣言することもできます: + +## `@constructor` + +コンパイラはthisプロパティの代入に基づいてコンストラクタ関数を推測しますが、`@constructor`タグを追加すればより厳密なチェックとより良い提案を受けることができます: + +```js twoslash +// @checkJs +// @errors: 2345 2348 +/** + * @constructor + * @param {number} data + */ +function C(data) { + // プロパティの型は推測されます + this.name = "foo"; + + // あるいは、明示的に設定することもできます + /** @type {string | null} */ + this.title = null; + + // また、他のところで設定されている場合は、単に型注釈をつけることもできます + /** @type {number} */ + this.size; + + this.initialize(data); +} +/** + * @param {string} s + */ +C.prototype.initialize = function (s) { + this.size = s.length; +}; + +var c = new C(0); +c.size; + +var result = C(1); +``` + +> 注意: エラーメッセージが表示されるのは、[JSConfig](/docs/handbook/tsconfig-json.html)と[`checkJs`](/tsconfig#checkJs)が有効化されているJSコードベースのみです。 + +`@constructor`では、`this`はコンストラクタ関数`C`の内部でチェックされるので、数値を渡すと`initialize`メソッドへの提案とエラーが表示されます。また、コンストラクタの代わりに`C`を呼び出すと、エディタが警告を表示することもあります。 + +残念ながら、これは呼び出しも可能なコンストラクタ関数では、`@constructor`を使用できないことを意味します。 + +## `@this` + +コンパイラは通常、`this`が用いられるコンテクストから`this`の型を推測することができます。推測できない場合、`@this`を使って明示的に`this`の型を指定することができます: + +```js twoslash +/** + * @this {HTMLElement} + * @param {*} e + */ +function callbackForLater(e) { + this.clientHeight = parseInt(e); // 大丈夫なはず! +} +``` + +## `@extends` + +JavaScriptクラスがジェネリクスの基底クラスを拡張するとき、型パラメータが何であるべきかを指定するところがありません。`@extends`タグはそのような型パラメータを指定する方法を提供しています: + +```js twoslash +/** + * @template T + * @extends {Set} + */ +class SortableSet extends Set { + // ... +} +``` + +`@extends`は、クラスに対してのみ動作することに注意してください。現在、コンストラクタ関数がクラスを拡張する方法はありません。 + +## `@enum` + +`@enum`タグを使うと、すべてのメンバが指定された型であるオブジェクトリテラルを作成することができます。JavaScriptのたいていのオブジェクトリテラルとは異なり、明示されていないメンバは使用できません。 + +```js twoslash +/** @enum {number} */ +const JSDocState = { + BeginningOfLine: 0, + SawAsterisk: 1, + SavingComments: 2, +}; + +JSDocState.SawAsterisk; +``` + +注意すべき点は、`@enum`はTypeScriptの`enum`とは大きく異なっており、とてもシンプルです。一方で、TypeScriptの`enum`とは違って、`@enum`は任意の型を持つことができます: + +```js twoslash +/** @enum {function(number): number} */ +const MathFuncs = { + add1: (n) => n + 1, + id: (n) => -n, + sub1: (n) => n - 1, +}; + +MathFuncs.add1; +``` + +## その他の例 + +```js twoslash +class Foo {} +// ---cut--- +var someObj = { + /** + * @param {string} param1 - プロパティの割り当てに関する仕様は、 + */ + x: function (param1) {}, +}; + +/** + * 変数の代入や + * @return {Window} + */ +let someFunc = function () {}; + +/** + * クラスメソッド、 + * @param {string} greeting 使用する挨拶 + */ +Foo.prototype.sayHi = (greeting) => console.log("Hi!"); + +/** + * アロー関数式でも同様に動作します + * @param {number} x - 乗数 + */ +let myArrow = (x) => x * x; + +/** + * つまり、JSXのステートレス関数コンポーネントでも動作するということです + * @param {{a: string, b: number}} test - いくつかのパラメータ + */ +var sfc = (test) =>
{test.a.charAt(0)}
; + +/** + * パラメータには、Closure構文を使用して、クラスのコンストラクタを使用することができます。 + * + * @param {{new(...args: any[]): object}} C - 登録するクラス + */ +function registerClass(C) {} + +/** + * @param {...string} p1 - 文字列の'レストパラメータ'(配列)引数 ('any'として扱われます) + */ +function fn10(p1) {} + +/** + * @param {...string} p1 - 文字列の'レストパラメータ'(配列)引数 ('any'として扱われます) + */ +function fn9(p1) { + return p1.join(); +} +``` + +## サポートされていないことが知られているパターン + +コンストラクタ関数のようにオブジェクトも型を作らない限り、値空間のオブジェクトを型として参照することはできません。 + +```js twoslash +function aNormalFunction() {} +/** + * @type {aNormalFunction} + */ +var wrong; +/** + * 'typeof'を代わりに使用します: + * @type {typeof aNormalFunction} + */ +var right; +``` + +オブジェクトリテラル型のプロパティ型の後ろに等号をつけても、任意のプロパティにはなりません: + +```js twoslash +/** + * @type {{ a: string, b: number= }} + */ +var wrong; +/** + * 代わりにプロパティ名の後ろにクエスチョンマークを付けます: + * @type {{ a: string, b?: number }} + */ +var right; +``` + +`strictNullChecks`が有効化されている場合のみ、Nullable型は動作します: + +```js twoslash +/** + * @type {?number} + * strictNullChecks: trueの場合 -- number | null + * strictNullChecks: falseの場合 -- number + */ +var nullable; +``` + +Union型も使うことができます: + +```js twoslash +/** + * @type {number | null} + * strictNullChecks: trueの場合 -- number | null + * strictNullChecks: falseの場合 -- number + */ +var unionNullable; +``` + +非Nullable型は意味を持たず、元の型と同じように扱われます: + +```js twoslash +/** + * @type {!number} + * 数値型だけをもちます + */ +var normal; +``` + +JSDocの型システムとは異なり、TypeScriptは型にnullが含まれるかどうか記すことしかできません。 +明示的な非Nullable型はありません -- strictNullChecksが有効なら、`number`はNullableではありません。 +無効なら、`number`はNullableです。 + +### サポートされていないタグ + +TypeScriptはサポートされていないJSDocタグを無視します。 + +以下のタグは、サポートを目標とした進行中のIssueがあります: + +- `@const` ([issue #19672](https://github.com/Microsoft/TypeScript/issues/19672)) +- `@inheritdoc` ([issue #23215](https://github.com/Microsoft/TypeScript/issues/23215)) +- `@memberof` ([issue #7237](https://github.com/Microsoft/TypeScript/issues/7237)) +- `@yields` ([issue #23857](https://github.com/Microsoft/TypeScript/issues/23857)) +- `{@link …}` ([issue #35524](https://github.com/Microsoft/TypeScript/issues/35524)) + +## JSクラスの拡張 + +### JSDocプロパティ修飾子 + +TypeScript 3.8以降、JSDocを使ってクラスプロパティを修飾することができます。まずは、アクセシビリティ修飾子`@public`、`@private`、`@protected`です。 +これらのタグは、TypeScriptの`public`、`private`、`protected`とそれぞれ同じように動作します。 + +```js twoslash +// @errors: 2341 +// @ts-check + +class Car { + constructor() { + /** @private */ + this.identifier = 100; + } + + printIdentifier() { + console.log(this.identifier); + } +} + +const c = new Car(); +console.log(c.identifier); +``` + +- `@public`は常に暗黙的に宣言されており、省略可能です。どこからでもプロパティにアクセスできることを意味します。 +- `@private`は、そのプロパティが含まれるクラス内でのみ使用可能であることを意味します。 +- `@protected`は、そのプロパティが含まれるクラスと、そのクラスの派生クラス内で使用可能ですが、クラスのインスタンスからはアクセスできません。 + +次に、`@readonly`修飾子を追加しました。これを使用すると、プロパティが初期化時にのみ書き込まれることが保証されます。 + +```js twoslash +// @errors: 2540 +// @ts-check + +class Car { + constructor() { + /** @readonly */ + this.identifier = 100; + } + + printIdentifier() { + console.log(this.identifier); + } +} + +const c = new Car(); +console.log(c.identifier); +``` diff --git a/packages/documentation/copy/ja/javascript/Type Checking JavaScript Files.md b/packages/documentation/copy/ja/javascript/Type Checking JavaScript Files.md new file mode 100644 index 000000000000..112f41e5a16d --- /dev/null +++ b/packages/documentation/copy/ja/javascript/Type Checking JavaScript Files.md @@ -0,0 +1,310 @@ +--- +title: JavaScriptファイルの型チェック +layout: docs +permalink: /ja/docs/handbook/type-checking-javascript-files.html +oneline: TypeScriptを使ってJavaScriptファイルに型チェックを追加する方法 +--- + +ここでは、`.js`ファイルを`.ts`ファイルと比較したときの、チェック機能の違いについて注目すべき点をいくつか挙げます。 + +## プロパティはクラス本体における代入から推測される + +ES2015には、クラスのプロパティを宣言する手段がありません。プロパティはオブジェクトリテラルのように、動的に代入されます。 + +`.js`ファイルでは、コンパイラはクラス本体のプロパティの代入からプロパティを推測します。 +コンストラクタで型が定義されていない場合や、コンストラクタでの型がundefinedまたはnullである場合を除いて、プロパティの型はコンストラクタ内で与えられた型になります。 +プロパティの型がコンストラクタ内で与えられない場合、プロパティの型は、プロパティの代入式におけるすべての右辺の値の型によるUnion型となります。 +メソッドやgetter、setter内で定義されたプロパティは任意とみなされるのに対して、コンストラクタで定義されたプロパティは常に存在するものとみなされます。 + +```js twoslash +// @checkJs +// @errors: 2322 +class C { + constructor() { + this.constructorOnly = 0; + this.constructorUnknown = undefined; + } + method() { + this.constructorOnly = false; + this.constructorUnknown = "plunkbat"; // ok、constructorUnknown は string | undefined です + this.methodOnly = "ok"; // ok、しかし、methodOnlyはundefinedの可能性もあります + } + method2() { + this.methodOnly = true; // こちらもokです。methodOnlyの型は string | boolean | undefined です + } +} +``` + +クラス本体でプロパティが設定されていない場合、そのプロパティは未知のものとみなされます。 +クラスプロパティが読み取り専用ならば、コンストラクタにプロパティを追加した後に、型指定のためJSDocを使って型宣言の注釈を付けます。 +後で初期化されるのであれば、値を指定する必要さえありません: + +```js twoslash +// @checkJs +// @errors: 2322 +class C { + constructor() { + /** @type {number | undefined} */ + this.prop = undefined; + /** @type {number | undefined} */ + this.count; + } +} + +let c = new C(); +c.prop = 0; // OK +c.count = "string"; +``` + +## コンストラクタ関数はクラスと同等である + +ES2015以前のJavascriptでは、クラスの代わりにコンストラクタ関数が使われていました。 +コンパイラはこうしたパターンをサポートしており、コンストラクタ関数をES2015のクラスと同等のものとして理解します。 +上記で説明したプロパティの推論ルールも全く同じように動作します。 + +```js twoslash +// @checkJs +// @errors: 2683 2322 +function C() { + this.constructorOnly = 0; + this.constructorUnknown = undefined; +} +C.prototype.method = function () { + this.constructorOnly = false; + this.constructorUnknown = "plunkbat"; // OK、型はstring | undefinedです +}; +``` + +## CommonJSモジュールがサポートされている + +`.js`ファイルでは、TypeScriptはCommonJSモジュール形式をサポートしています。 +`exports`や`module.exports`への代入は、エクスポート宣言として認識されていますし、 +同様に`require`関数の呼び出しも、モジュールインポートとして認識されます。例えば: + +```js +// `import module "fs"`と同じ +const fs = require("fs"); + +// `export function readFile`と同じ +module.exports.readFile = function (f) { + return fs.readFileSync(f); +}; +``` + +JavaScriptのモジュールサポートは、TypeScriptのモジュールサポートよりも構文的に寛容です。 +ほとんどの代入と宣言の組み合わせがサポートされています。 + +## クラス、関数、オブジェクトリテラルは名前空間を作る + +クラスは`.js`ファイルにおける名前空間を作成します。 +これを利用してクラスをネストすることができます。例えば: + +```js twoslash +class C {} +C.D = class {}; +``` + +また、ES2015以前のコードのための擬似的な静的メソッドとしても利用できます: + +```js twoslash +function Outer() { + this.y = 2; +} + +Outer.Inner = function () { + this.yy = 2; +}; + +Outer.innter(); +``` + +シンプルな名前空間を作成することにも使えます: + +```js twoslash +var ns = {}; +ns.C = class {}; +ns.func = function () {}; + +ns; +``` + +その他の変形も同様に可能です: + +```js twoslash +// IIFE (即時実行関数式) +var ns = (function (n) { + return n || {}; +})(); +ns.CONST = 1; + +// グローバル名前空間をデフォルトにする +var assign = + assign || + function () { + // ここにコードを記述する + }; +assign.extra = 1; +``` + +## オブジェクトリテラルは無制限型である + +`.ts`ファイルにおいて、変数宣言を初期化するオブジェクトリテラルは、宣言に型を与えます。 +元のリテラルで指定されていない新しいメンバを追加することはできません。 +このルールは`.js`ファイルでは緩和されています; オブジェクトリテラルには無制限型(インデックスシグネチャ)があり、元々定義されていないプロパティを追加したり検索したりすることができます。 +例えば: + +```js twoslash +var obj = { a: 1 }; +obj.b = 2; // これは許容されます +``` + +オブジェクトリテラルはインデックスシグネチャ `[x:string]: any` を持っているかのように動作し、制限をもつオブジェクトではなく無制限のマップとして扱うことができます。 + +他の特別なJSチェックの動作と同様に、変数にJSDoc型を指定することでこの動作を変更することができます。例えば: + +```js twoslash +// @checkJs +// @errors: 2339 +/** @type {{a: number}} */ +var obj = { a: 1 }; +obj.b = 2; +``` + +## null、undefined、空の配列の初期化子はanyまたはany[]型を付ける + +nullまたはundefinedで初期化されたパラメータやプロパティは、厳密なnullチェックが有効化されていたとしても、any型になります。 +[]で初期化されたパラメータやプロパティは、厳密なnullチェックが有効化されていたとしても、any[]型になります。 +唯一の例外は上記で説明した初期化子を複数持つプロパティの場合です。 + +```js twoslash +function Foo(i = null) { + if (!i) i = 1; + var j = undefined; + j = 2; + this.l = []; +} + +var foo = new Foo(); +foo.l.push(foo.i); +foo.l.push("end"); +``` + +## 関数のパラメータはデフォルトでは任意である + +ES2015以前のJavascriptでは、パラメータが任意かどうかを指定する方法がないため、`.js`ファイルの関数パラメータはすべて任意とみなされます。 +宣言されたパラメータ数よりも少ない引数で、関数を呼び出すことが可能です。 + +宣言された数より、引数の数が多い関数を呼び出すとエラーになるので注意が必要です。 + +例えば: + +```js twoslash +// @checkJs +// @strict: false +// @errors: 7006 7006 2554 +function bar(a, b) { + console.log(a + " " + b); +} + +bar(1); // OK、二番目の引数は任意とみなされます +bar(1, 2); +bar(1, 2, 3); // エラー、引数が多すぎます +``` + +JSDocの注釈付き関数はこの規則から除外されます。 +任意であることを表すには、JSDocの任意パラメータ構文(`[` `]`)を使用します。例えば: + +```js twoslash +/** + * @param {string} [somebody] - 誰かの名前 + */ +function sayHello(somebody) { + if (!somebody) { + somebody = "John Doe"; + } + console.log("Hello " + somebody); +} + +sayHello(); +``` + +## 可変長引数のパラメータ宣言は、`arguments`の使い方から推測される + +関数本体で`arguments`を参照すると、暗黙的に可変長引数パラメータ(つまり: `(...arg: any[]) => any`)を持っているとみなされます。JSDocの可変長引数構文を使って、引数の型を指定します。 + +```js twoslash +/** @param {...number} args */ +function sum(/* numbers */) { + var total = 0; + for (var i = 0; i < arguments.length; i++) { + total += arguments[i]; + } + return total; +} +``` + +## 未指定の型パラメータのデフォルトは`any`である + +Javascriptにはジェネリクス型のパラメータを指定するための標準構文がないため、未指定の型パラメータはデフォルトで`any`となります。 + +### extends句において + +例えば、`React.Component`は、`Props`と`State`の2つの型パラメータを持つように定義されています。 +`.js`ファイルでは、extends句でこれらを指定する正しい方法はありません。型引数はデフォルトで`any`となります: + +```js +import { Component } from "react"; + +class MyComponent extends Component { + render() { + this.props.b; // this.propsはany型なので、許可されています + } +} +``` + +JSDocの`@augments`を使って明示的に型を指定します。例えば: + +```js +import { Component } from "react"; + +/** + * @augments {Component<{a: number}, State>} + */ +class MyComponent extends Component { + render() { + this.props.b; // エラー: b は {a:number} に存在しません + } +} +``` + +### JSDocリファレンスにおいて + +JSDocで指定されていない型引数のデフォルトはanyです: + +```js twoslash +/** @type{Array} */ +var x = []; + +x.push(1); // OK +x.push("string"); // OK、xはArray型です + +/** @type{Array.} */ +var y = []; + +y.push(1); // OK +y.push("string"); // エラー、stringはnumberに代入できません +``` + +### 関数呼び出しにおいて + +ジェネリクス関数の呼び出しでは、引数から型パラメータを推論します。この処理では、主に推論の根拠がないために型の推論に失敗することが時たまあります。そのような場合、型パラメータはデフォルトで`any`となります。例えば: + +```js +var p = new Promise((resolve, reject) => { + reject(); +}); + +p; // Promise; +``` + +JSDocで利用可能なすべての機能を知りたい場合は、[リファレンス](/docs/handbook/jsdoc-supported-types.html)を参照してください。