diff --git a/packages/playground-examples/copy/ja/TypeScript/Language Extensions/Enums.ts b/packages/playground-examples/copy/ja/TypeScript/Language Extensions/Enums.ts new file mode 100644 index 000000000000..da38362eb164 --- /dev/null +++ b/packages/playground-examples/copy/ja/TypeScript/Language Extensions/Enums.ts @@ -0,0 +1,81 @@ +// EnumはTypeScriptを用いてJavaScriptで +// 固定値の集合を簡単に扱うための機能です。 + +// デフォルトでは、Enumは0から始まり +// オプション1つにつき1ずつ増加していく数値です。 +// これは値が重要でないときに便利です。 + +enum CompassDirection { + North, + East, + South, + West, +} + +// Enumオプションに注釈を付けると、値を設定できます。 +// 注釈をつけなければ、値のインクリメントは設定された値を引き継いで行われます。 + +enum StatusCodes { + OK = 200, + BadRequest = 400, + Unauthorized, + PaymentRequired, + Forbidden, + NotFound, +} + +// EnumはEnum名.値名で参照できます。 + +const startingDirection = CompassDirection.East +const currentStatus = StatusCodes.OK + +// Enumはキーから値と値からキーの双方による +// アクセスをサポートしています。 + +const okNumber = StatusCodes.OK +const okNumberIndex = StatusCodes['OK'] +const stringBadRequest = StatusCodes[400] + +// Enumに異なる型を設定することもできます。文字列型が一般的です。 +// 文字列型を用いると、実行時に数字を探す必要がなくなるので、 +// デバッグが簡単になります。 + +enum GamePadInput { + Up = 'UP', + Down = 'DOWN', + Left = 'LEFT', + Right = 'RIGHT', +} + +// もし、JavaScriptの実行時にobjectの数を減らしたいなら、 +// const enumが使えます。 + +// const enumの値は +// 実行時にobjectを介して対応する値を見つけるのではなく、 +// TypeScriptによるコードのトランスパイル時に置換されます。 + +const enum MouseAction { + MouseDown, + MouseUpOutside, + MouseUpInside, +} + +const handleMouseAction = (action: MouseAction) => { + switch (action) { + case MouseAction.MouseDown: + console.log('Mouse Down') + break + } +} + +// トランスパイルされたJavaScriptのコードを見ると、 +// 他のEnumはobjectや関数として残っているのに、 +// MouseActionだけが残っていないことに気がつくでしょう。 + +// これは、handleMouseActionのswitch文にある +// MouseAction.MouseDownについても同様です。 + +// Enumには他にも多くの機能があります。 +// 詳しくはTypeScriptハンドブックをご覧ください。 +// +// https://www.typescriptlang.org/docs/handbook/enums.html diff --git a/packages/playground-examples/copy/ja/TypeScript/Language Extensions/Nominal Typing.ts b/packages/playground-examples/copy/ja/TypeScript/Language Extensions/Nominal Typing.ts new file mode 100644 index 000000000000..41c16768290b --- /dev/null +++ b/packages/playground-examples/copy/ja/TypeScript/Language Extensions/Nominal Typing.ts @@ -0,0 +1,66 @@ +// 公称型システムではそれぞれの型がユニークであり、 +// ある2つの型が同じデータ構造をしていても +// 型をまたいで代入することはできません + +// TypeScriptの型システムは構造的です。 +// 構造的型システムでは、ある型がアヒル型と同じ構造をしていたら、それをアヒル型として扱います。 +// また、ガチョウ型がアヒル型とまったく同じ属性を持っていたら、ガチョウ型はアヒル型としても扱われます。 +// より詳しいことはこちらをご覧ください: example:structural-typing + +// これにはいくつかの欠点があります。 +// 文字列や数値が特別なコンテキストを持っており、 +// 他の値に変換可能にしたくない場合などが該当します。 +// 例: +// +// - ユーザーの入力した安全でない文字列 +// - 翻訳された文字列 +// - ユーザー識別番号 +// - アクセストークン + +// 少しの余分なコードを足すだけで、 +// 公称型システムと同じような恩恵に預かることができます。 + +// 交差型を用いて、__brand (この名前は慣習的なもの)という +// プロパティを持つ型を作成し、 +// 通常の文字列が代入不可能な +// ValidatedInputStringという型を作ってみましょう。 + +type ValidatedInputString = string & { __brand: 'User Input Post Validation' } + +// 文字列をValidatedInputString型に変換するために関数を使います。 +// 注目に値するのは、validateUserInputを通過した文字列はValidatedInputStringだと +// TypeScriptに_伝えて_いる点です。 + +const validateUserInput = (input: string) => { + const simpleValidatedInput = input.replace(/\ { + console.log(name) +} + +// 例えば、ユーザーからの安全でない入力を受け取り、 +// バリデーターに通してから出力してみます。 + +const input = "\n" +const validatedInput = validateUserInput(input) +printName(validatedInput) + +// 一方でバリデートしていない文字列をprintNameに渡すと、 +// コンパイルエラーが発生します。 + +printName(input) + +// 以下の400コメントがついたGitHubのissueに、 +// 公称型を作成する色々な方法のまとめと +// それらのトレードオフがまとまっています: +// +// https://github.com/Microsoft/TypeScript/issues/202 +// +// 他にも以下の記事が分かりやすいまとめになっています: +// +// https://michalzalecki.com/nominal-typing-in-typescript/ diff --git a/packages/playground-examples/copy/ja/TypeScript/Language Extensions/Types vs Interfaces.ts b/packages/playground-examples/copy/ja/TypeScript/Language Extensions/Types vs Interfaces.ts new file mode 100644 index 000000000000..900b1f967848 --- /dev/null +++ b/packages/playground-examples/copy/ja/TypeScript/Language Extensions/Types vs Interfaces.ts @@ -0,0 +1,83 @@ +// オブジェクトの形を宣言するのに使う +// 2つの主なツールがinterfaceとtype aliasです。 +// +// これらはとても似ており、ほとんどの場合、 +// 同じ振る舞いをします。 + +type BirdType = { + wings: 2 +} + +interface BirdInterface { + wings: 2 +} + +const bird1: BirdType = { wings: 2 } +const bird2: BirdInterface = { wings: 2 } + +// TypeScriptは構造的型システムを採用しているので、 +// どちらの使い方も混在させることができます。 + +const bird3: BirdInterface = bird1 + +// どちらも他のinterfaceやtypeからの拡張をサポートしています。 +// type aliasは交差型を、 +// interfaceはextendsキーワードを使用します。 + +type Owl = { nocturnal: true } & BirdType +type Robin = { nocturnal: false } & BirdInterface + +interface Peacock extends BirdType { + colourful: true + flies: false +} +interface Chicken extends BirdInterface { + colourful: false + flies: false +} + +let owl: Owl = { wings: 2, nocturnal: true } +let chicken: Chicken = { wings: 2, colourful: false, flies: false } + +// そうは言っても、type aliasよりもinterfaceを使うことをおすすめします。 +// 具体的には、より良いエラーメッセージが得られるからです。 +// 以下のエラーにマウスオーバーしてみると、 +// Chickenのようなinterfaceを使ったときの方が簡潔でより分かりやすいメッセージが +// TypeScriptより示されているのが分かるでしょう。 + +owl = chicken +chicken = owl + +// type aliasとinterfaceの最も大きな違いの1つは、 +// interfaceが開かれた型であるのに対して、type aliasは閉じた型であることです。 +// これは、interfaceは2回目の宣言で拡張が可能であることを +// 意味します。 + +interface Kitten { + purrs: boolean +} + +interface Kitten { + colour: string +} + +// 一方で、type aliasは一度宣言した後に、 +// 外からその型の内容を変更することはできません。 + +type Puppy = { + color: string +} + +type Puppy = { + toys: number +} + +// 達成したい目標に依って、この違いは利点にも欠点にもなり得ます。 +// しかし、公開される型については +// interfaceを用いる方が良いでしょう。 + +// type aliasとinterfaceにおけるすべてのエッジケースを確認するのに +// 最適な資料の1つである以下のstack overflowスレッドは +// 初めの一歩にちょうど良いでしょう: + +// https://stackoverflow.com/questions/37233735/typescript-interfaces-vs-types/52682220#52682220 diff --git a/packages/playground-examples/copy/ja/sections.json b/packages/playground-examples/copy/ja/sections.json new file mode 100644 index 000000000000..51fe3e0f4bcf --- /dev/null +++ b/packages/playground-examples/copy/ja/sections.json @@ -0,0 +1,55 @@ +{ + "sections": [ + { + "name": "JavaScript", + "id": "JavaScript", + "subtitle": "See how TypeScript improves day to day working with JavaScript with minimal additional syntax." + }, + { + "name": "TypeScript", + "id": "TypeScript", + "subtitle": "どのようにしてTypeScriptがJavaScriptを拡張して、より安全で便利にしているかを確認する。" + }, + { + "name": "3.7", + "id": "3.7", + "subtitle": "See the Release notes." + }, + { + "name": "3.8", + "id": "3.8", + "subtitle": "See the Beta Release notes." + }, + { + "name": "Playground V3", + "id": "Playground", + "subtitle": "Learn what has changed in this website." + } + ], + + "sortedSubSections": [ + // JS + "JavaScript Essentials", + "Functions with JavaScript", + "Working With Classes", + "Modern JavaScript", + "External APIs", + "Helping with JavaScript", + // TS + "Primitives", + "Type Primitives", + "Meta-Types", + "Language", + "Language Extensions", + // Examples + "Syntax and Messaging", + "Types and Code Flow", + "Fixits", + // Playground + "Config", + "Tooling", + // 3.8 + "Breaking Changes", + "JSDoc Improvements" + ] +}