집 >웹 프론트엔드 >JS 튜토리얼 >TypeScript로 구축하기: 레고 기반 가이드

TypeScript로 구축하기: 레고 기반 가이드

Patricia Arquette원래의: 2025-01-20 23:44:13253검색

TypeScript: JavaScript에서 TypeScript로 원활하게 전환하는 것은 마치 레고 조립 과정을 업그레이드하는 것과 같습니다!

Building with TypeScript: A Lego-Based Guide

“할 수 있는 일을 하고, 가진 것을 활용하라”는 것이 제 좌우명 중 하나입니다. 이 문장은 또한 성장 사고방식의 일부를 반영합니다. 대부분의 프런트엔드 또는 JavaScript 개발자는 이미 TypeScript를 시작했거나 완전히 마이그레이션했습니다. 그러나 일부 사람들은 여전히 개념을 이해하거나 사고방식을 JavaScript에서 TypeScript로 전환하는 데 어려움을 겪을 수 있습니다. 이 문제를 해결하기 위해 제가 가장 좋아하는 도구 중 하나인 레고를 사용하겠습니다. 여기서 시작해 보겠습니다. "JavaScript를 자유롭게 만들 수 있는 기본 레고 벽돌 세트라고 생각하세요. TypeScript는 동일한 벽돌 세트이지만 자세한 지침과 품질 관리 확인이 포함되어 있습니다." 여기 , 여기 및 이 비디오 를 참조할 수 있습니다. 이 가이드의 목표는 개념을 더 쉽게 이해할 수 있도록 레고 비유를 사용하여 각 JavaScript 개념이 TypeScript로 변환되는 방법을 보여주는 것입니다.

가변 범위와 호이스팅: 방 만들기

Building with TypeScript: A Lego-Based Guide

개념 정의

변수 범위는 프로그램에서 변수에 액세스하고 사용할 수 있는 컨텍스트를 나타냅니다. 범위에는 로컬 범위와 글로벌 범위의 두 가지 주요 유형이 있습니다. 함수 외부에서 선언된 변수는 전역 범위에 있으므로 코드 어디에서나 액세스하고 수정할 수 있습니다. 반면, 함수 내부에 선언된 변수는 로컬 범위에 있으며 해당 함수 내에서만 액세스할 수 있습니다. JavaScript는 var, let 및 const 키워드를 사용하여 변수를 선언하며 각 키워드는 범위에 서로 다른 영향을 미칩니다. let 및 const으로 선언된 변수는 블록 범위이므로 가장 가까운 바깥쪽 블록 {} 내에서만 액세스할 수 있습니다. 대조적으로 var은 함수 범위이므로 선언된 함수 전체에서 사용할 수 있습니다. 변수 범위를 명확하게 이해하면 JavaScript 프로그램에서 변수 이름 충돌 및 예상치 못한 부작용과 같은 문제를 방지하는 데 도움이 됩니다.

호이스팅은 코드가 실행되기 전에(컴파일 단계) 변수 및 함수 선언을 포함 범위의 맨 위로 이동하는 행위입니다. 즉, 변수와 함수는 선언되기 전에 사용할 수 있습니다. 함수 선언은 완전히 호이스팅되므로 코드에 정의되기 전에도 호출할 수 있습니다. 그러나 var으로 선언된 변수는 호이스팅되지만 초기값으로 초기화되지 않으므로 할당 전에 변수에 액세스하면 undefined이 발생합니다. let 및 const으로 선언된 변수도 호이스팅되지만 초기화되지 않으므로 선언 전에 액세스하면 ReferenceError이 됩니다. 승격을 이해하면 개발자가 변수 및 함수 선언을 올바르게 구성하여 일반적인 함정을 피하는 데 도움이 됩니다.

레고 비유

스코프를 다른 레고 방으로 생각해보세요.

글로벌 범위: 모든 건축업자는 빌딩 블록의 공유 거실에 접근할 수 있습니다.
기능 범위: 개인용 빌딩 테이블.
블록 범위: 테이블의 특정 영역을 구축합니다.

자바스크립트 구현

<code class="language-javascript">// 全局搭建房间
const globalBricks = "每个人都可以使用这些";
function buildSection() {
    // 个人搭建桌
    var tableBricks = "仅供此搭建者使用";

    if (true) {
        // 特定区域
        let sectionBricks = "仅供此部分使用";
    }
}</code>

타입스크립트의 진화

<code class="language-typescript">// 为我们的搭建房间添加类型安全
type BrickType = "regular" | "special" | "rare";
const globalBricks: BrickType = "regular";

function buildSection(): void {
    // TypeScript确保我们只使用有效的积木类型
    const tableBricks: BrickType = "special";

    if (true) {
        // TypeScript阻止在此块之外使用sectionBricks
        let sectionBricks: BrickType = "rare";
    }
}

// 真实世界的例子：配置管理
interface AppConfig {
    readonly apiKey: string;
    environment: "dev" | "prod";
    features: Set<string>;
}

const config: AppConfig = {
    apiKey: "secret",
    environment: "dev",
    features: new Set(["feature1", "feature2"])
};</code>

함수 및 클로저: 조립 지침

Building with TypeScript: A Lego-Based Guide

개념 정의

함수는 특정 작업을 수행하도록 설계된 재사용 가능한 코드 블록입니다. 이는 모듈성과 코드 효율성을 향상시킵니다. function 키워드와 이름, 대괄호 (), 중괄호 {}로 묶인 코드 블록을 사용하여 정의할 수 있습니다. 인수는 함수가 호출될 때 제공되는 값에 대한 자리 표시자 역할을 하는 괄호나 중괄호 안에 함수에 전달될 수 있습니다. JavaScript는 익명 함수(이름 없음)와 화살표 함수(더 깔끔한 구문 제공)도 지원합니다. 함수는 return 문을 사용하여 값을 반환하거나 값을 반환하지 않는 작업을 수행할 수 있습니다. 또한 JavaScript의 함수는 일급 개체입니다. 즉, 함수를 변수에 할당하고, 인수로 전달하고, 다른 함수에서 반환할 수 있으므로 함수형 프로그래밍 패턴이 가능합니다.

클로저는 함수가 어휘 범위 밖에서 실행되더라도 함수가 어휘 범위를 기억하고 액세스할 수 있도록 하는 강력한 기능입니다. 함수가 함수 내부에 정의되고 외부 함수의 변수를 참조할 때 클로저를 만들 수 있습니다. 외부 함수의 실행이 완료된 후에도 내부 함수는 이러한 변수에 계속 액세스할 수 있습니다. 이 기능은 이벤트 핸들러나 콜백과 같은 환경에서 데이터 캡슐화 및 상태 유지에 유용합니다. 클로저는 함수가 구현 세부 사항을 숨기면서 특정 동작을 노출할 수 있는 개인 변수와 같은 패턴을 지원합니다.

레고 비유

기능은 조립 설명서와 같습니다.
매개변수는 필수 구성 요소와 같습니다.
반환값은 완성된 구조와 같습니다.
클로저는 몇 개의 빌딩 블록이 영구적으로 포함된 밀봉된 빌딩 키트와 같습니다.

자바스크립트 구현

<code class="language-javascript">function buildHouse(floors, color) {
    const foundation = "concrete";

    return function addRoof(roofStyle) {
        return `${color} house with ${floors} floors and ${roofStyle} roof on ${foundation}`;
    };
}</code>

타입스크립트의 진화

<code class="language-typescript">// 带有类型的基本函数
interface House {
    floors: number;
    color: string;
    roofStyle: string;
    foundation: string;
}

// 为我们的搭建者添加类型安全
function buildHouse(
    floors: number,
    color: string
): (roofStyle: string) => House {
    const foundation = "concrete";

    return (roofStyle: string): House => ({
        floors,
        color,
        roofStyle,
        foundation
    });
}

// 真实世界的例子：组件工厂
interface ComponentProps {
    id: string;
    style?: React.CSSProperties;
    children?: React.ReactNode;
}

function createComponent<T extends ComponentProps>(
    baseProps: T
): (additionalProps: Partial<T>) => React.FC<T> {
    return (additionalProps) => {
        // 组件实现
        return (props) => <div></div>;
    };
}</code>

객체 및 프로토타입: 제작 팁

Building with TypeScript: A Lego-Based Guide

개념 정의

JavaScript의 개체는 관련 데이터 및 기능의 컨테이너 역할을 하는 기본 데이터 구조입니다. 이는 키-값 쌍으로 구성되며, 각 키(속성)는 함수(메서드)를 포함하여 유효한 JavaScript 유형일 수 있는 값에 매핑됩니다. 객체는 여러 가지 방법으로 생성할 수 있습니다:

객체 리터럴: const obj = {}
건축자: new Object()
Object.create()방법

프로토타입 시스템은 JavaScript에 내장된 상속 메커니즘입니다. 모든 개체에는 프로토타입이라고 하는 다른 개체에 대한 내부 링크가 있습니다. 객체에 존재하지 않는 속성에 액세스하려고 하면 JavaScript는 자동으로 프로토타입 체인에서 해당 속성을 찾습니다. 이 개체 체인은 null 프로토타입(보통 Object.prototype)이 있는 개체에 도달할 때까지 계속됩니다. 프로토타입을 이해하는 것은 다음을 위해 매우 중요합니다.

상속 구현
인스턴스 간 방법 공유
메모리 효율성 관리
객체 계층 구조 구축

레고 비유

다음과 같은 객체와 프로토타입을 생각해 보세요.

객체는 고유한 브릭과 설명서가 포함된 전용 LEGO 키트와 같습니다.
프로토타입은 여러 키트가 참조할 수 있는 마스터 템플릿과 같습니다.
상속은 고급 제품군을 만들 수 있는 기본 제품군을 갖는 것과 같습니다.
속성은 각 키트의 특정 빌딩 블록과 같습니다.
방법은 각 키트에 포함된 특별한 조립 팁과 같습니다.

자바스크립트 구현

<code class="language-javascript">// 全局搭建房间
const globalBricks = "每个人都可以使用这些";
function buildSection() {
    // 个人搭建桌
    var tableBricks = "仅供此搭建者使用";

    if (true) {
        // 特定区域
        let sectionBricks = "仅供此部分使用";
    }
}</code>

타입스크립트의 진화

<code class="language-typescript">// 为我们的搭建房间添加类型安全
type BrickType = "regular" | "special" | "rare";
const globalBricks: BrickType = "regular";

function buildSection(): void {
    // TypeScript确保我们只使用有效的积木类型
    const tableBricks: BrickType = "special";

    if (true) {
        // TypeScript阻止在此块之外使用sectionBricks
        let sectionBricks: BrickType = "rare";
    }
}

// 真实世界的例子：配置管理
interface AppConfig {
    readonly apiKey: string;
    environment: "dev" | "prod";
    features: Set<string>;
}

const config: AppConfig = {
    apiKey: "secret",
    environment: "dev",
    features: new Set(["feature1", "feature2"])
};</code>

비동기 프로그래밍: 팀 구성

Building with TypeScript: A Lego-Based Guide

개념 정의

비동기 함수 및 프로그래밍

비동기 함수는 비동기 작업을 처리하는 우아한 방법을 제공하는 JavaScript의 특수 함수 유형입니다. async 키워드로 선언하면 이러한 함수는 자동으로 Promise를 반환하고 본문에서 await 키워드를 사용할 수 있게 됩니다. await 연산자는 Promise가 해결되거나 거부될 때까지 함수 실행을 일시 중지하여 비동기 코드를 보다 동기적이고 읽기 쉬운 스타일로 작성할 수 있도록 합니다. 이 구문은 콜백의 복잡성을 효과적으로 줄이고 중첩된 Promise 체인의 필요성을 제거합니다. 예를 들어 async function fetchData() { const response = await fetch(url); }에서 함수는 실행을 계속하기 전에 fetch 작업이 완료될 때까지 기다리므로 기본 스레드가 차단되지 않은 상태로 유지되면서 코드 동작을 더 예측하기 쉽게 만듭니다. 이 패턴은 개발자가 성능 저하 없이 작업 순서를 명확하게 표현하는 코드를 작성할 수 있기 때문에 서로 의존하는 여러 비동기 작업을 처리할 때 특히 유용합니다.

약속

Promise는 현재 사용 가능하거나 미래에 사용 가능하거나 전혀 사용 가능하지 않은 값을 나타냅니다. 보류 중, 완료됨, 거부됨 등 세 가지 상태가 가능한 개체입니다. 비동기 작업을 처리하는 데 사용됩니다. Promise에는 결과에 따라 작업을 연결하는 .then(), .catch() 및 .finally()과 같은 메서드가 있습니다. 이는 중첩된 콜백에 대한 강력한 대안이 되어 코드 가독성과 오류 처리를 향상시킵니다.

레고 비유

비동기 기능은 팀 구성원이 서로 다른 부분을 작업하는 것과 같습니다.
약속은 완성된 부분을 전달하겠다는 약속과 같습니다.

자바스크립트 구현

<code class="language-javascript">// 全局搭建房间
const globalBricks = "每个人都可以使用这些";
function buildSection() {
    // 个人搭建桌
    var tableBricks = "仅供此搭建者使用";

    if (true) {
        // 特定区域
        let sectionBricks = "仅供此部分使用";
    }
}</code>

타입스크립트의 진화

<code class="language-typescript">// 为我们的搭建房间添加类型安全
type BrickType = "regular" | "special" | "rare";
const globalBricks: BrickType = "regular";

function buildSection(): void {
    // TypeScript确保我们只使用有效的积木类型
    const tableBricks: BrickType = "special";

    if (true) {
        // TypeScript阻止在此块之外使用sectionBricks
        let sectionBricks: BrickType = "rare";
    }
}

// 真实世界的例子：配置管理
interface AppConfig {
    readonly apiKey: string;
    environment: "dev" | "prod";
    features: Set<string>;
}

const config: AppConfig = {
    apiKey: "secret",
    environment: "dev",
    features: new Set(["feature1", "feature2"])
};</code>

최신 기능: 고급 건축 기술

Building with TypeScript: A Lego-Based Guide

개념 정의

해체

이것은 배열의 값이나 객체의 속성을 다른 변수로 추출하는 깔끔한 방법입니다. 배열 분해에서는 대괄호 []를 사용하고 객체 분해에서는 중괄호 {}를 사용합니다. 이 구문은 값을 변수에 직접 압축 해제하여 중복 코드의 필요성을 줄여 복잡한 데이터 구조를 더 쉽게 처리할 수 있도록 해줍니다. 예를 들어 const [a, b] = [1, 2]은 a에 1을 할당하고 b에 2를 할당하는 반면, const { name } = person는 person 객체에서 name 속성을 추출합니다.

확장 연산자

확산 연산자는 점 세 개(...)로 표시됩니다. 여러 요소나 키-값 쌍이 필요한 경우 배열이나 객체와 같은 반복 가능한 객체를 확장할 수 있습니다. 배열 요소를 함수 인수로 복사, 결합 또는 전달하는 데 사용할 수 있습니다. 예를 들어 const arr = [1, 2, ...anotherArray].

옵션 체인

옵셔널 체인은 ?.로 표현됩니다. 속성이 정의되지 않았거나 null인 경우 오류를 발생시키지 않고 깊게 중첩된 개체 속성에 액세스할 수 있는 안전한 방법을 제공합니다. 참조가 null이면 단락되고 즉시 정의되지 않은 상태가 반환됩니다. 예를 들어 user?.address?.street은 거리에 접근하기 전에 사용자와 주소가 존재하는지 확인합니다. 이 구문은 런타임 오류를 방지하고 특히 사용자 입력에 의존하는 API나 데이터에서 중첩된 데이터 구조를 더 깔끔하고 오류가 덜 발생하도록 작업합니다.

레고 비유

해체는 빌딩 블록을 용기에 분류하는 것과 같습니다.
스프레드 연산자는 모음 간에 빌딩 블록을 복사하는 것과 같습니다.
옵셔널 체이닝은 블록을 사용하기 전에 블록이 존재하는지 확인하는 것과 같습니다.

자바스크립트 구현

<code class="language-javascript">function buildHouse(floors, color) {
    const foundation = "concrete";

    return function addRoof(roofStyle) {
        return `${color} house with ${floors} floors and ${roofStyle} roof on ${foundation}`;
    };
}</code>

타입스크립트의 진화

<code class="language-typescript">// 带有类型的基本函数
interface House {
    floors: number;
    color: string;
    roofStyle: string;
    foundation: string;
}

// 为我们的搭建者添加类型安全
function buildHouse(
    floors: number,
    color: string
): (roofStyle: string) => House {
    const foundation = "concrete";

    return (roofStyle: string): House => ({
        floors,
        color,
        roofStyle,
        foundation
    });
}

// 真实世界的例子：组件工厂
interface ComponentProps {
    id: string;
    style?: React.CSSProperties;
    children?: React.ReactNode;
}

function createComponent<T extends ComponentProps>(
    baseProps: T
): (additionalProps: Partial<T>) => React.FC<T> {
    return (additionalProps) => {
        // 组件实现
        return (props) => <div></div>;
    };
}</code>

요약

Building with TypeScript: A Lego-Based Guide

JavaScript에서 TypeScript로의 전환은 마치 레고 조립 과정을 업그레이드하는 것과 같습니다.

JavaScript(기본 구성):
- 자유형 시공
- 빌딩 블록의 유연한 사용
- 런타임 오류 감지
TypeScript(전문적으로 제작됨):
- 자세하고 구체적인 지침
- 브릭 호환성 확인
- 시공 전 오류 방지

주요 전환 팁:

기본 유형 주석부터 시작하세요.
인터페이스와 유형 정의를 점진적으로 추가하세요.
컴파일러를 사용하여 오류를 조기에 포착하세요.
가능하면 유형 추론을 사용하세요.
엄격한 null 검사 및 기타 컴파일러 옵션이 점차 추가됩니다.

기억하세요: TypeScript는 기본적인 구축 프로세스를 변경하는 대신 JavaScript 지식을 기반으로 보안과 명확성을 추가합니다. 그렇긴 하지만, 제 조언은 여전히... JavaScript를 먼저 배우고 TypeScript를 배우라는 것입니다.

참고자료

https://www.php.cn/link/84b184211c5d929d9435a371eb505cad Mozilla(n.d.). 변수 — JavaScript
https://www.php.cn/link/646e69d6e105d351e4e31a2e02a69b0e

위 내용은 TypeScript로 구축하기: 레고 기반 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：일일 JavaScript 챌린지 #JS - 가장 자주 사용되는 요소 찾기다음 기사：일일 JavaScript 챌린지 #JS - 가장 자주 사용되는 요소 찾기