Translate/type premitives into ja

packages/playground-examples/copy/ja/TypeScript/Type Primitives/Nullable Types.ts

@@ -0,0 +1,85 @@
+//// { order: 3, compiler: { strictNullChecks: false } }
+
+// JavaScriptでは、存在しない値を宣言する方法が2つあります。
+// TypeScriptでは、optionalやnullableな値を宣言する
+// 方法をさらにいくつか提供します。
+
+// 最初に、JavaScriptの基本型である
+// undefinedとnullの違いを見てみましょう。
+
+// Undefinedは値が見つからないときあるいは設定できない場合です。
+
+const emptyObj = {};
+const anUndefinedProperty: undefined = emptyObj["anything"];
+
+// Nullは値が意図的に欠如していることを
+// 意味します。
+
+const searchResults = {
+  video: { name: "LEGO Movie" },
+  text: null,
+  audio: { name: "LEGO Movie Soundtrack" },
+};
+
+// なぜundefinedを使わないのでしょう?
+// 主な理由としては、textが正しく含まれていることを確認できるからです。
+// もしtextがundefinedの場合、
+// 結果はtextが存在しないときと同じものになります。
+
+// これは、少し表面的に感じるかもしれません。
+// しかし、JSON文字列に変換したときに、
+// textがundefinedの場合、textは変換された文字列に含まれません。
+
+// Strict Null Types
+
+// TypeScript 2.0より前では、undefinedとnullは事実上、型システムから無視されていました。
+// これによって、TypeScriptのコーディング環境は
+// 型のないJavaScriptに近づいてしまっていました。
+
+// バージョン2.0にて、"strictNullChecks"というコンパイラフラグが追加されました。
+// このフラグをオンにすると、undefinedとnullが
+// コードフロー分析を通して対応すべき型として扱われるようになります。
+// (より詳細には example:code-flow を参照ください)
+
+// TypeScriptでstrict null checksを有効にしたときの違いの例として
+// 以下の"Potential String"型をホバーしてみてください:
+
+type PotentialString = string | undefined | null;
+
+// PotentialString型ではundefinedとnullが切り捨てられています。
+// もし、設定に行きstrictモードを有効にして戻ってくると、
+// PotentialString型がすべての型の交差型になっていることが
+// 確認できます。
+
+declare function getID(): PotentialString;
+
+const userID = getID();
+console.log("User Logged in: ", userID.toUpperCase());
+
+// strictモードでは、上記はエラーになります。
+
+// 型アサーションや非nullアサーション演算子(!)を使うなど
+// TypeScriptに詳細を教える方法はいくつかあります。
+
+const definitelyString1 = getID() as string;
+const definitelyString2 = getID()!;
+
+// あるいはifを用いて存在を安全に確認することもできます:
+
+if (userID) {
+  console.log(userID);
+}
+
+// Optional Properties
+
+// Void
+
+// voidは値を返さない関数の
+// 戻り値型です。
+
+const voidFunction = () => {};
+const resultOfVoidFunction = voidFunction();
+
+// 実行時にはundefinedであっても、
+// TypeScriptはコンパイルエラーを発生させるために
+// void型を保持します。

packages/playground-examples/copy/ja/TypeScript/Type Primitives/Tuples.ts

@@ -0,0 +1,74 @@
+// 一般的に、配列は0から任意の数の
+// 単一の型のオブジェクトを含みます。
+// TypeScriptは複数の型を含み、
+// 格納順が重要な配列について特別な解析を行います。
+
+// これらはタプルと呼ばれます。これらはキーを持つオブジェクトよりも短い文法で、
+// いくつかのデータをつなげるための方法と考えられます。
+
+// タプルはJavaScriptの配列の文法で作成できます:
+
+const failingResponse = ["Not Found", 404];
+
+// ただし、タプルとして型を宣言する必要があります。
+
+const passingResponse: [string, number] = ["{}", 200];
+
+// もし、ホバーすれば2つの変数が配列( (string | number)[] )と
+// タプル( [string, number] )として解釈されているという
+// 違いを確認できるでしょう。
+
+// 配列の場合、どのインデックスの要素も文字列または数値の
+// どちらかになるので順番は重要ではありません。
+// タプルでは、順番と長さは保証されています。
+
+if (passingResponse[1] === 200) {
+  const localInfo = JSON.parse(passingResponse[0]);
+  console.log(localInfo);
+}
+
+// これは、TypeScriptが正しいインデックスに対して正しい型を提供するだけでなく、
+// もしオブジェクトの宣言していないインデックスに
+// アクセスしようとすればエラーを発生させることを意味します。
+
+passingResponse[2];
+
+// タプルは接続されたデータの短いまとまりやフィクスチャにとって、
+// 良いパターンとして感じられるでしょう。
+
+type StaffAccount = [number, string, string, string?];
+
+const staff: StaffAccount[] = [
+  [0, "Adankwo", "adankwo.e@"],
+  [1, "Kanokwan", "kanokwan.s@"],
+  [2, "Aneurin", "aneurin.s@", "Supervisor"],
+];
+
+// 最初がタプルで、その後の長さが分からない型を扱う場合、
+// スプレッド構文を使うと任意の長さを持ち、
+// 追加のインデックスの要素が
+// 特定の型であると示すことができます。
+
+type PayStubs = [StaffAccount, ...number[]];
+
+const payStubs: PayStubs[] = [
+  [staff[0], 250],
+  [staff[1], 250, 260],
+  [staff[0], 300, 300, 300],
+];
+
+const monthOnePayments = payStubs[0][1] + payStubs[1][1] + payStubs[2][1];
+const monthTwoPayments = payStubs[1][2] + payStubs[2][2];
+const monthThreePayments = payStubs[2][2];
+
+// 以下のようにタプルを用いて任意の数の数値型を
+// 引数として受け取る関数を宣言できます:
+
+declare function calculatePayForEmployee(id: number, ...args: [...number[]]): number;
+
+calculatePayForEmployee(staff[0][0], payStubs[0][1]);
+calculatePayForEmployee(staff[1][0], payStubs[1][1], payStubs[1][2]);
+
+//
+// https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#tuples-in-rest-parameters-and-spread-expressions
+// https://auth0.com/blog/typescript-3-exploring-tuples-the-unknown-type/