TypeScript: JavaScript のスーパーヒーロー ケープ

JavaScript に型を追加する理由

これを想像してください: JavaScript で楽しくコーディングしていると、突然、「未定義のプロパティ 'name' を読み取れません」というメッセージが表示されます。ああ、みんな行ったことあるよ！ TypeScript は、こうした間違いが起こる前に気づいてくれる友人がいるようなものです。

起源の物語

JavaScript はクモに噛まれる前のピーター・パーカーのようなものです - 大きな可能性を秘めていますが、事故が起こりやすいです。 TypeScript は、JavaScript にスーパーパワーを与えるスパイダーバイトです。バグを早期に発見し、コードの信頼性を高める型システムを追加します。

初めての TypeScript の冒険

簡単な JavaScript 関数から始めて、それを TypeScript に変換してみましょう:

// JavaScript
function greet(name) {
    return "Hello, " + name + "!";
}

次に、TypeScript マジックを追加しましょう:

// TypeScript
function greet(name: string): string {
    return "Hello, " + name + "!";
}

文字列が見えますか?これは TypeScript が「この関数は文字列を受け取り、文字列を返す」と伝えているものです。今度はこれを試してください:

greet(123); // Error: Argument of type 'number' is not assignable to parameter of type 'string'

TypeScript が潜在的なバグから私たちを救ってくれました! ?

基本タイプ: あなたの新しいスーパーパワー

いくつかの基本的な TypeScript 型を見てみましょう:

// Basic types
let heroName: string = "Spider-Man";
let age: number = 25;
let isAvenger: boolean = true;
let powers: string[] = ["web-slinging", "wall-crawling"];

// Object type
let hero: {
    name: string;
    age: number;
    powers: string[];
} = {
    name: "Spider-Man",
    age: 25,
    powers: ["web-slinging", "wall-crawling"]
};

インターフェース: 独自のタイプの作成

インターフェースはオブジェクトの設計図のようなものです。これらはデータの形状を定義するのに非常に役立ちます:

interface Hero {
    name: string;
    age: number;
    powers: string[];
    catchPhrase?: string; // Optional property
}

function introduceHero(hero: Hero): void {
    console.log(`I am ${hero.name}, and I'm ${hero.age} years old!`);
    if (hero.catchPhrase) {
        console.log(hero.catchPhrase);
    }
}

const spiderMan: Hero = {
    name: "Spider-Man",
    age: 25,
    powers: ["web-slinging", "wall-crawling"]
};

introduceHero(spiderMan);

タイプエイリアス: カスタムタイプ

独自のタイプの組み合わせを作成したい場合があります:

type PowerLevel = 'rookie' | 'intermediate' | 'expert';

interface Hero {
    name: string;
    powerLevel: PowerLevel;
}

const batman: Hero = {
    name: "Batman",
    powerLevel: "expert" // TypeScript will ensure this is one of the allowed values
};

ジェネリック: 究極の柔軟性

ジェネリックは、コードをより再利用しやすくするワイルドカードのようなものです。

function createHeroTeam<T>(members: T[]): T[] {
    return [...members];
}

interface Superhero {
    name: string;
    power: string;
}

interface Villain {
    name: string;
    evilPlan: string;
}

const heroes = createHeroTeam<Superhero>([
    { name: "Iron Man", power: "Technology" },
    { name: "Thor", power: "Lightning" }
]);

const villains = createHeroTeam<Villain>([
    { name: "Thanos", evilPlan: "Collect infinity stones" }
]);

現実世界の例: Todo アプリ

TypeScript を使用して簡単な ToDo アプリを構築しましょう:

interface Todo {
    id: number;
    title: string;
    completed: boolean;
    dueDate?: Date;
}

class TodoList {
    private todos: Todo[] = [];

    addTodo(title: string, dueDate?: Date): void {
        const todo: Todo = {
            id: Date.now(),
            title,
            completed: false,
            dueDate
        };
        this.todos.push(todo);
    }

    toggleTodo(id: number): void {
        const todo = this.todos.find(t => t.id === id);
        if (todo) {
            todo.completed = !todo.completed;
        }
    }

    getTodos(): Todo[] {
        return this.todos;
    }
}

// Usage
const myTodos = new TodoList();
myTodos.addTodo("Learn TypeScript with baransel.dev");
myTodos.addTodo("Build awesome apps", new Date("2024-10-24"));

React を使用した TypeScript

TypeScript と React はピーナッツバターとゼリーのようなものです。簡単な例を次に示します:

interface Props {
    name: string;
    age: number;
    onSuperPower?: () => void;
}

const HeroCard: React.FC<Props> = ({ name, age, onSuperPower }) => {
    return (
        <div>
            <h2>{name}</h2>
            <p>Age: {age}</p>
            {onSuperPower && (
                <button onClick={onSuperPower}>
                    Activate Super Power!
                </button>
            )}
        </div>
    );
};

ヒントとコツ

1. シンプルから始めましょう: 基本的なタイプから始めて、徐々に複雑なものを追加していきます。
2. コンパイラーを使用する: TypeScript のコンパイラーはあなたの友人です - そのエラーに注意してください。
3. 過剰に入力しないでください: 場合によっては、どれを入力しても問題ありません (ただし、慎重に使用してください)。
4. 厳密モードを有効にする: 保護を最大限に高めるために、tsconfig.json に "strict": true を追加します。

よくある問題とその修正方法

// Problem: Object is possibly 'undefined'
const user = users.find(u => u.id === 123);
console.log(user.name); // Error!

// Solution: Optional chaining
console.log(user?.name);

// Problem: Type assertions
const input = document.getElementById('myInput'); // Type: HTMLElement | null
const value = input.value; // Error!

// Solution: Type assertion or type guard
const value = (input as HTMLInputElement).value;
// or
if (input instanceof HTMLInputElement) {
    const value = input.value;
}

まとめ

TypeScript は最初は余分な作業のように思えるかもしれませんが、バグが発生する前に発見するのに役立つスーパーパワーを持っているようなものです。小さなものから始めて、徐々に種類を増やしていけば、気づけばこれなしでどうして生きていたのかと不思議に思うことでしょう!

覚えておいてください:

• タイプはあなたの友達です
• コンパイラはあなたの相棒です
• 練習すれば完璧になります

以上がTypeScript: JavaScript のスーパーヒーロー ケープの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。