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

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

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

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

개념 정의

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

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

레고 비유

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

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

자바스크립트 구현

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

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

타입스크립트의 진화

// 为我们的搭建房间添加类型安全
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"])
};

함수 및 클로저: 조립 지침

개념 정의

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

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

레고 비유

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

자바스크립트 구현

function buildHouse(floors, color) {
    const foundation = "concrete";

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

타입스크립트의 진화

// 带有类型的基本函数
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>;
    };
}

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

개념 정의

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

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

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

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

레고 비유

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

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

자바스크립트 구현

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

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

타입스크립트의 진화

// 为我们的搭建房间添加类型安全
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"])
};

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

개념 정의

비동기 함수 및 프로그래밍

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

약속

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

레고 비유

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

자바스크립트 구현

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

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

타입스크립트의 진화

// 为我们的搭建房间添加类型安全
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"])
};

최신 기능: 고급 건축 기술

개념 정의

해체

이것은 배열의 값이나 객체의 속성을 다른 변수로 추출하는 깔끔한 방법입니다. 배열 분해에서는 대괄호 []를 사용하고 객체 분해에서는 중괄호 {}를 사용합니다. 이 구문은 값을 변수에 직접 압축 해제하여 중복 코드의 필요성을 줄여 복잡한 데이터 구조를 더 쉽게 처리할 수 있도록 해줍니다. 예를 들어 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나 데이터에서 중첩된 데이터 구조를 더 깔끔하고 오류가 덜 발생하도록 작업합니다.

레고 비유

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

자바스크립트 구현

function buildHouse(floors, color) {
    const foundation = "concrete";

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

타입스크립트의 진화

// 带有类型的基本函数
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>;
    };
}

요약

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

1. JavaScript(기본 구성):

   • 자유형 시공
   • 빌딩 블록의 유연한 사용
   • 런타임 오류 감지

2. TypeScript(전문적으로 제작됨):

   • 자세하고 구체적인 지침
   • 브릭 호환성 확인
   • 시공 전 오류 방지

주요 전환 팁:

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

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

참고자료

2025년 1월 12일에 검색함,
• https://www.php.cn/link/84b184211c5d929d9435a371eb505cad Mozilla(n.d.). 변수 — JavaScript
, 2025년 1월 14일에 검색함.
• https://www.php.cn/link/646e69d6e105d351e4e31a2e02a69b0e

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