日本語

TypeScriptの基本

TypeScriptの基本タイプ

TypeScriptの制御フロー

TypeScript 関数

TypeScript インターフェース

TypeScript クラスとオブジェクト

TypeScript 高级タイプ

TypeScriptのタイプ操作

TypeScript ジェネリック

TypeScriptのその他

TypeScriptチュートリアル: 超強化されたJavaScriptへの入門ガイド

こんにちは、未来のプログラミングスーパースター！? 当社のTypeScriptチュートリアルにようこそ。このエキサイティングなTypeScriptの旅にあなたを案内するのがとても楽しみです。プログラミングを教えてきた経験豊富な者として、私の知識を共有し、この素晴らしい言語の力をあなたに開放するのを待ちきれません。

TypeScript - Home

TypeScriptとは？

まず基本から始めましょう。TypeScriptはJavaScriptのよりクールで洗練されたいとこのような存在です。JavaScriptを基盤に新しい機能を追加し、問題になる前にエラーをキャッチする助けをしてくれるプログラミング言語です。JavaScriptがお洒落なスーツと单片眼鏡を着ている姿を思い浮かべると、それがTypeScriptです！

シンプルな例

簡単な例でImmediateに飛び込んでみましょう：

function greet(name: string) {
console.log(`こんにちは、${name}さん！`);
}

greet("アリス"); // 出力: こんにちは、アリスさん！
greet(123); // エラー: 引数の型 'number' はパラメータの型 'string' に割り当てられません。

この例では、greet関数を定義し、nameパラメータを受け取ります。name: stringの部分は、nameが文字列であることをTypeScriptに伝えます。数値でgreetを呼び出そうとすると、TypeScriptはコードを実行する前にエラーをキャッチします！

TypeScriptを学ぶ理由

「JavaScriptが既に存在するのに、なぜTypeScriptを学ぶ必要があるのか？」と思われるかもしれません。素晴らしい質問です！以下にいくつかの説得力のある理由を挙げます：

  1. エラーを早期にキャッチ: TypeScriptはコードが実行される前にエラーを見つけて修正する助けをしてくれます。
  2. 優れたツール: エディタでより賢いコード提案と自動補完を受けられます。
  3. 明確なコード: TypeScriptはコードをより読みやすく、理解しやすくします。
  4. 拡張性: 大規模なプロジェクトやチームに最適です。

TypeScriptを学ぶべき人々

TypeScriptは誰にでも役立ちます。以下のいずれかの人々が該当します：

  • プログラミングの完全な初心者
  • JavaScript開発者でスキルアップを望む人
  • 大規模なアプリケーションを開発するチームの一員

TypeScriptにはあなたに提供できるものがあります。プログラミングを学ぶのにトレーニングホイールを付けるのと同じで、学習中に追加のサポートを受けながら、まだすべてのクールな技を披露できます！

TypeScriptを学ぶための前提知識

深く掘り下げる前に、以下のことを知っておくべきです：

  • プログラミング概念（変数、関数など）の基本的な理解
  • JavaScriptの多少の熟悉度（古い知識でも問題ありません！）

これらがない場合でも問題ありません！基本的なことを進めながらカバーします。

TypeScriptを始める方法

インストール

まず、TypeScriptをコンピュータにセットアップしましょう。ターミナルを開き、以下のコマンドを実行します：

npm install -g typescript

これでTypeScriptがコンピュータに全局でインストールされました。これでコーディングを始める準備が整いました！

最初のTypeScriptプログラム

円の面積を計算するシンプルなプログラムを書いてみましょう：

function calculateCircleArea(radius: number): number {
const pi: number = 3.14159;
return pi * radius * radius;
}

const area: number = calculateCircleArea(5);
console.log(`円の面積は ${area.toFixed(2)} 平方ユニットです。`);

以下のように分解してみましょう：

  1. calculateCircleArea関数を定義し、radiusパラメータを受け取ります。
  2. 関数の宣言後にnumberが指定されているため、関数は数値を返します。
  3. 円の面積の公式πr²を使って計算します。
  4. 関数に半径5を渡し、結果をareaに格納します。
  5. 最後に結果を表示し、toFixed(2)を使って小数点以下を2桁に丸めます。

このプログラムを実行するには、circle.tsとして保存し、次のようにコンパイルして実行します：

tsc circle.ts
node circle.js

出力は「円の面積は 78.54 平方ユニットです。」になるはずです。

TypeScriptの型

TypeScriptの強力な機能の1つはその型システムです。以下に一般的な型をいくつか紹介します：

型 説明 例
number 数値 let age: number = 30;
string 文字 let name: string = "アリス";
boolean 真偽値 let isStudent: boolean = true;
array 値のリスト let fruits: string[] = ["りんご", "バナナ"];
object キーと値のペア let person: { name: string, age: number } = { name: "ボブ", age: 25 };
any 任意の型（控えめに使用してください！） let data: any = 42;

複数の型を使ったより複雑な例を以下に示します：

interface Student {
name: string;
age: number;
grades: number[];
isActive: boolean;
}

function printStudentInfo(student: Student): void {
console.log(`名前: ${student.name}`);
console.log(`年齢: ${student.age}`);
console.log(`平均点: ${calculateAverage(student.grades)}`);
console.log(`アクティブ: ${student.isActive ? "はい" : "いいえ"}`);
}

function calculateAverage(grades: number[]): number {
const sum = grades.reduce((acc, grade) => acc + grade, 0);
return sum / grades.length;
}

const alice: Student = {
name: "アリス",
age: 20,
grades: [85, 90, 92],
isActive: true
};

printStudentInfo(alice);

この例では以下のことを示しています：

  1. interfaceを使って複雑な型（Student）を定義。
  2. 配列とオブジェクトを使った操作。
  3. 関数のパラメータと返り値に型注釈を追加。
  4. 簡潔なif/else論理に使われる条件演算子（三元演算子）。

TypeScriptプログラムのコンパイルと実行

TypeScriptプログラムを実行するには、まずJavaScriptにコンパイルする必要があります。以下の手順に従います：

  1. TypeScriptコードを書く（例えば、app.ts）。
  2. コンパイルする：tsc app.ts。
  3. 結果のJavaScriptを実行する：node app.js。

プロ tip: tsc --watch app.tsを使うと、保存するたびに自動的に再コンパイルされます！

実世界でのTypeScriptの使用

TypeScriptは学習用だけでなく、多くの人気库やフレームワークで使用されています：

  • Angular（Googleのウェブアプリケーションフレームワーク）
  • React（TypeScriptサポート）
  • Node.js（サーバーサイドのJavaScript）
  • Vue.js（TypeScriptサポート）

TypeScriptを学ぶことで、これら強力なツールを利用する道が開けます！

結論

おめでとうございます！TypeScriptの世界に初めての一歩を踏み出されました。基本的なことをカバーしましたが、まだ探索するものがたくさんあります。プログラミングを学ぶのは新しい言語を学ぶのと同じで、練習、忍耐、そして粘り強さが鍵です。

TypeScriptの旅を続ける中で、間違えを恐れずに。すべてのエラーは学習の機会です。codingを続け、実験を続け、そして最も重要なのは、楽しむことです！

幸せなコーディング、そしてTypeScriptの冒険がバグフリーで楽しいものになることを祈っています！?✨

Credits: Image by storyset

 
次のチュートリアル:
TypeScript - 概要