Translate language extensions of playground examples into japanese

packages/playground-examples/copy/ja/TypeScript/Language Extensions/Enums.ts

@@ -0,0 +1,81 @@
+// EnumsはTypeScriptを用いてJavaScriptで
+// 固定値の集合を簡単に扱うための機能です。
+
+// デフォルトでは、enumは0から始まり
+// オプション1つにつき1ずつ増加していく数値です。
+// これは値が重要でないときに便利です。
+
+enum CompassDirection {
+  North,
+  East,
+  South,
+  West,
+}
+
+// enumオプションに注釈を付けると、値を設定できます。
+// 注釈をつけなければ、値のインクリメントは設定された値を引き継いで行われます。
+
+enum StatusCodes {
+  OK = 200,
+  BadRequest = 400,
+  Unauthorized,
+  PaymentRequired,
+  Forbidden,
+  NotFound,
+}
+
+// enumはEnumName.Valueで参照できます。
+
+const startingDirection = CompassDirection.East
+const currentStatus = StatusCodes.OK
+
+// Enumsはキーから値と値からキーの双方による
+// アクセスをサポートしています。
+
+const okNumber = StatusCodes.OK
+const okNumberIndex = StatusCodes['OK']
+const stringBadRequest = StatusCodes[400]
+
+// Enumsに異なる型を設定することもできます。文字列型が一般的です。
+// 文字列型を用いると、runtimeで数字を探す必要がなくなるので、
+// デバッグが簡単になります。
+
+enum GamePadInput {
+  Up = 'UP',
+  Down = 'DOWN',
+  Left = 'LEFT',
+  Right = 'RIGHT',
+}
+
+// もし、JavaScript runtimeでobjectの数を減らしたいなら、
+// const enumが使えます。
+
+// const enumの値は
+// runtimeでobjectを介して対応する値を見つけるのではなく、
+// TypeScriptによるコードのトランスパイル時に置換されます。
+
+const enum MouseAction {
+  MouseDown,
+  MouseUpOutside,
+  MouseUpInside,
+}
+
+const handleMouseAction = (action: MouseAction) => {
+  switch (action) {
+    case MouseAction.MouseDown:
+      console.log('Mouse Down')
+      break
+  }
+}
+
+// トランスパイルされたJavaScriptのコードを見ると、
+// 他のenumsはobjectや関数として残っているのに、
+// MouseActionだけが残っていないことに気がつくでしょう。
+
+// これは、handleMouseActionのswitch文にある
+// MouseAction.MouseDownについても同様です。
+
+// Enumsには他にも多くの機能があります。
+// 詳しくはTypeScriptハンドブックをご覧ください。
+//
+// https://www.typescriptlang.org/docs/handbook/enums.html

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(/\</g, '≤')
+  return simpleValidatedInput as ValidatedInputString
+}
+
+// 次に、普通の文字列型は受け取らず、
+// 作成した公称型であるValidatedInputStringだけを受け取る関数を作ってみます。
+
+const printName = (name: ValidatedInputString) => {
+  console.log(name)
+}
+
+// 例えば、ユーザーからの安全でない入力を受け取り、
+// バリデーターに通してから出力してみます。
+
+const input = "\n<script>alert('bobby tables')</script>"
+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/

packages/playground-examples/copy/ja/TypeScript/Language Extensions/Types vs Interfaces.ts

@@ -0,0 +1,83 @@
+// オブジェクトの形を宣言するのに使う
+// 2つの主なツールがinterfacesと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
+
+// どちらも他のinterfacesやtypesからの拡張をサポートしています。
+// type aliasesは交差型を、
+// interfacesは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 aliasesよりもinterfacesを使うことをおすすめします。
+// 具体的には、より良いエラーメッセージが得られるからです。
+// 以下のエラーにマウスオーバーしてみると、
+// Chickenのようなinterfacesを使ったときの方が簡潔でより分かりやすいメッセージが
+// TypeScriptより示されているのが分かるでしょう。
+
+owl = chicken
+chicken = owl
+
+// type aliasesとinterfacesの最も大きな違いの1つは、
+// interfacesが開かれた型であるのに対して、type aliasesは閉じた型であることです。
+// これは、interfaceは2回目の宣言で拡張が可能であることを
+// 意味します。
+
+interface Kitten {
+  purrs: boolean
+}
+
+interface Kitten {
+  colour: string
+}
+
+// 一方で、type aliaseは一度宣言した後に、
+// 外からその型の内容を変更することはできません。
+
+type Puppy = {
+  color: string
+}
+
+type Puppy = {
+  toys: number
+}
+
+// 達成したい目標に依って、この違いは利点にも欠点にもなり得ます。
+// しかし、公開される型については
+// interfaceを用いる方が良いでしょう。
+
+// type aliasesとinterfacesにおけるすべてのエッジケースを確認するのに
+// 最適な資料の1つである以下のstack overflowスレッドは
+// 初めて調べるのにちょうど良いでしょう:
+
+// https://stackoverflow.com/questions/37233735/typescript-interfaces-vs-types/52682220#52682220

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 <a href='https://devblogs.microsoft.com/typescript/announcing-typescript-3-7/'>Release notes</a>."
+    },
+    {
+      "name": "3.8",
+      "id": "3.8",
+      "subtitle": "See the <a href='https://devblogs.microsoft.com/typescript/announcing-typescript-3-8-beta/'>Beta Release notes</a>."
+    },
+    {
+      "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"
+  ]
+}