TypeScript: JavaScript&#s 슈퍼 히어로 케이프-JS 튜토리얼-php.cn

TypeScript: JavaScript&#s 슈퍼 히어로 케이프

Susan Sarandon

풀어 주다： 2024-10-27 20:45:29

원래의

946명이 탐색했습니다.

TypeScript: JavaScript

JavaScript에 유형을 추가하는 이유는 무엇입니까?

이것을 생각해 보세요. JavaScript로 즐겁게 코딩하고 있는데 갑자기 "정의되지 않은 'name' 속성을 읽을 수 없습니다."라는 메시지가 나타납니다. 아, 우리 모두 거기에 가본 적이 있어요! TypeScript는 실수가 발생하기 전에 이를 잡아주는 친구를 갖는 것과 같습니다.

기원 이야기

JavaScript는 거미에게 물리기 전의 Peter Parker와 같습니다. 잠재력은 크지만 사고가 발생하기 쉽습니다. 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를 사용하여 간단한 할 일 앱을 만들어 보겠습니다.

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>
    );
};

로그인 후 복사

팁과 요령

간단하게 시작: 기본 유형부터 시작하여 점차적으로 복잡한 유형을 추가하세요.
컴파일러 사용: TypeScript의 컴파일러는 여러분의 친구입니다. 오류에 주의하세요.
과도하게 입력하지 마세요: 때로는 어떤 것이든 괜찮습니다(하지만 아껴서 사용하세요!).
엄격 모드 활성화: 보호를 극대화하려면 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;
}

로그인 후 복사