Skip to content

Translate/type premitives into ja #550

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 12, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -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型を保持します。
Original file line number Diff line number Diff line change
@@ -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/