TypeScript のメモ (1)

序文

なぜ突然 TypeScript を学んだのですか? つまり、多くの Web3 プロジェクトは TypeScript に基づいて開発されているため、より早くプロジェクトに慣れるために、TypeScript の関連内容を体系的に学習したいと考えています。これらの記事は、一定のプログラミングの基礎があることを前提に書かれており、TypeScript のいくつかの機能を理解している記事も多くあります。

TypeScriptとは何ですか

では、TypeScript とは何でしょうか? TypeScript と JavaScript の間にはどのような関係がありますか? TypeScript の公式定義は次のとおりです。

添加了类型系统的 JavaScript，适用于任何规模的项目。

TypeScript の 2 つの重要な機能は、文字通りの意味からもわかるように、型システムとあらゆるスケールに適用可能です。TypeScript は、JavaScript に型システムを追加したものであり、JavaScript と完全な互換性があります。

型システム

TypeScript の Type から、TypeScript の中心的な内容は Type (型) であることがわかり、この型は JavaScript と比較されます。ご存知のとおり、JavaScript は非常に柔軟な言語です。

型の制約はなく、変数を文字列として初期化し、後で数値を割り当てることができます。
暗黙的な変換が存在するため、一部の変数の型を実行前に判断するのは困難です。
プロトタイプベースのオブジェクト指向プログラミングにより、プロトタイプのプロパティまたはメソッドを実行時に変更できます。
関数は JavaScript の第一級住民であり、変数に代入したり、パラメーターや戻り値として使用したりできます。

この種の柔軟性により JavaScript は繁栄しますが、同時にコードが不均一になり、メンテナンスコストが高くつき、実行時エラーが多くなります。TypeScript の登場は、JavaScript の型の問題を解決することを目的としています。

静的型付けと動的型付け

型システムは、型チェックのタイミングに応じて動的型と静的型に分類できます。動的型とは、実行時に型チェックが行われることを意味します。動的型は、実行時エラーにつながることがよくあります。JavaScript は動的型の言語です。インタープリタ型言語にはコンパイルフェーズがありません。たとえば、次の JavaScript コードは実行時に失敗します。

let foo = 1;
foo.split(' ');
// Uncaught TypeError: foo.split is not a function
// 运行时会报错（foo.split 不是一个函数），造成线上 bug

動的型付けと比較して、静的型付けは、コンパイル段階で各変数の型を決定できることを意味します。この言語での型エラーは構文エラーにつながります。TypeScript は実行前に JavaScript にコンパイルする必要があります。コンパイル段階問題が発生した場合、エラーが報告されます。たとえば、次の TypeScript コードはコンパイル時にエラーを報告します。

let foo = 1;
foo.split(' ');
// Property 'split' does not exist on type 'number'.
// 编译时会报错（数字没有 split 方法），无法通过编译

これら 2 つのコードには実際には違いがなく、事実は同じであることがわかります。ほとんどの JavaScript コードは、強力な機能のおかげで、わずかな変更を加えるだけで、またはまったく変更せずに TypeScript 言語に変換できます。 TypeScript の型推論。上記は例です。変数 foo の型が手動で宣言されていない場合でも、変数が初期化されるときに、型が Number であると推論できます。完全な TypeScript コードは次のとおりです。

let foo: number = 1;
foo.split(' ');
// Property 'split' does not exist on type 'number'.
// 编译时会报错（数字没有 split 方法），无法通过编译

強いタイピングと弱いタイピング

型システムは、暗黙的な変換が許可されるかどうかに応じて、強い型と弱い型に分類できます。次のコードは、TypeScript と JavaScript の両方で正常に実行できます。数値 1 は、実行時に暗黙的に文字列 "1" に変換されます。 signed + は文字列の連結として認識されるため、出力結果は「11」になります。

console.log(1 + '1');
// 打印出字符串 '11'

TypeScript は JavaScript と完全な互換性があり、JavaScript の実行時の特性を変更しないため、型指定が弱くなります。これに対応するのは Python です。Python は強力な型であり、次のコードはエラーを報告します。

print(1 + '1')
# TypeError: unsupported operand type(s) for +: 'int' and 'str'

強い/弱いは相対的です。Python が整数型と浮動小数点型の加算を処理するとき、暗黙的に整数型を浮動小数点型に変換しますが、これは Python が強い型であるという結論には影響しません。 Python の場合、暗黙的な型変換は実行されません。対照的に、JavaScript と TypeScript では、プラス記号の両側の型に関係なく、エラーを報告するのではなく、暗黙的な型変換を通じて結果を計算できるため、JavaScript と TypeScript は両方とも弱い型です。

要約する

TypeScript は、あらゆる規模のプロジェクトに対応する型システムを追加した JavaScript です。
TypeScript は、静的に型付けされた弱い型付け言語です。
TypeScript は JavaScript と完全な互換性があり、JavaScript ランタイムの特性を変更しません。
TypeScript は JavaScript にコンパイルでき、ブラウザや Node.js など、JavaScript を実行できる環境であればどれでも実行できます。
TypeScript には多くのコンパイルオプションがあり、型チェックをどの程度厳密にするかはユーザー次第です。

簡単な例

以下は TypeScript の簡単な例です。demo.ts は tsc コマンドを通じて js コードにコンパイルできます。TS コードは次のとおりです。

function sayHello(name: string) {
    return "Hello " + name;
}
let user = "Tom";
console.log(sayHello(user))

コンパイルされたjsコードは次のとおりです。

function sayHello(name) {
    return "Hello " + name;
}
var user = "Tom";
console.log(sayHello(user));

最後に、ノードdemo.jsを通じてコードを実行できます。

やっと

この記事では、JavaScript との違いを中心に TypeScript の関連概念を中心に紹介しますが、その他の記事については公式アカウント QStack をご覧ください。

序文