TypeScript - 앰비언트: 초보자 가이드

안녕하세요, 미래의 코딩 슈퍼스타! 오늘 우리는 TypeScript 앰비언트의 세계로 흥미로운 여정을 떠납니다. 코드를 한 줄도 작성해본 적이 없더라도 걱정하지 마세요 - 당신의 친절한 가이드로서 저와 함께 이 주제를 단계별로 탐구해보겠습니다. 그러면 가상의 배낭을 챙기고 시작해보세요!

TypeScript - Ambients

TypeScript에서 앰비언트는 무엇인가요?

들어가기 전에 기본 개념부터 시작해보겠습니다. 새로운 언어를 배우는 중에 누군가가 사전을 주었다고 상상해보세요. 이 사전은 아직 문장에서 사용하는 법을 배우지 않은 단어들을 이해하는 데 도움을 줍니다. TypeScript의 세계에서 앰비언트는 이와 비슷한 역할을 합니다.

TypeScript에서 앰비언트는 기존의 JavaScript 코드의 형태와 구조를 TypeScript에 설명해주는 선언문으로, 실제로 그 코드를 구현하는 것은 아닙니다. 이는 TypeScript에게 "이 코드가 어딘가에 존재하고, 이렇게 생겼다"고 알려주는 지도와 같습니다.

왜 앰비언트가 필요한가요?

"이 모든 번거로움을 겪는 이유는 무엇인가요?"라고 궁금해할 수도 있습니다. 그럼 이 작은 이야기를 들려드리겠습니다.

한때 JavaScript의 땅에 아lices라는 개발자가 살고 있었습니다. 아lices는 프로젝트에서 다양한 멋진 라이브러리를 좋아했습니다. 하지만 TypeScript로 전환한 후, TypeScript가 이러한 라이브러리에 대해 아무것도 몰라서 고생했습니다! 불행한 아lices는 TypeScript가 불평을 하지 않도록 하면서 자신의 사랑하는 도구를 사용할 수 없었습니다. 그때 그녀는 외부 라이브러리를 TypeScript에게 가르쳐주는 마법의 앰비언트를 발견했습니다.

앰비언트 정의하기

이제 앰비언트가 중요한 이유를 이해했으므로, 그 정의 방법을 배워보겠습니다. 몇 가지 방법이 있으므로 각각 나누어 설명하겠습니다:

1. 'declare' 키워드를 사용한 앰비언트 선언

가장 일반적인 방법은 declare 키워드를 사용하는 것입니다. 이는 TypeScript에게 "신뢰해줘, 이东西이 JavaScript 세계 어딘가에 존재한다"고 알려줍니다.

다음은 예제입니다:

declare var myGlobalVariable: number;

console.log(myGlobalVariable); // TypeScript는 이제 이东西이 존재한다고 인식합니다!

이 예제에서 우리는 myGlobalVariable이라는 이름의 전역 변수가 number 타입임을 TypeScript에게 알립니다. TypeScript는 이제 이 변수를 사용할 수 있도록 허용하지만, 실제로는 TypeScript 코드에서 정의하지 않습니다.

2. 앰비언트 모듈

occasionally, we want to describe entire modules. We can do this using ambient modules. Here's how it looks:

declare module 'my-cool-library' {
export function doSomethingAwesome(): void;
export const magicNumber: number;
}

Now, we can use this library in our TypeScript code:

import { doSomethingAwesome, magicNumber } from 'my-cool-library';

doSomethingAwesome();
console.log(magicNumber);

TypeScript now understands the shape of my-cool-library, even if it doesn't have access to its actual implementation.

3. 앰비언트 네임스페이스

네임스페이스는 TypeScript 특정 방법으로 코드를 조직하는 것입니다. 우리는 앰비언트 네임스페이스를 선언할 수도 있습니다:

declare namespace MyNamespace {
function myFunction(): void;
const myConstant: string;
}

MyNamespace.myFunction();
console.log(MyNamespace.myConstant);

이는 TypeScript에게 MyNamespace의 구조를 알려주어, 그成员을 오류 없이 사용할 수 있도록 합니다.

고급 앰비언트 기술

이제 기본적인 내용을 다루었으므로, 더 고급 기술을 살펴보겠습니다. 처음에는 복잡해 보일 수 있지만, 연습하다 보면 자연스러워질 것입니다!

선언 합치기

TypeScript는 기존 선언에 추가할 수 있도록 합니다. 이를 선언 합치기라고 합니다:

// 기존 선언
declare namespace MyNamespace {
const x: number;
}

// 기존 선언에 추가
declare namespace MyNamespace {
const y: string;
}

// 이제 MyNamespace는 x와 y 둘 다 가지고 있습니다
console.log(MyNamespace.x, MyNamespace.y);

앰비언트 열거형

열거형은 숫자 값에 더 친절한 이름을 주는 방법입니다. 우리는 앰비언트 열거형을 선언할 수도 있습니다:

declare enum Color {
Red,
Green,
Blue
}

let myFavoriteColor: Color = Color.Blue;

와일드카드 모듈 선언

occasionally, we want to declare an entire group of modules. We can use wildcards for this:

declare module "mylib/*" {
export function doSomething(): void;
}

import { doSomething } from "mylib/something";
doSomething(); // 이제 이 작업이 가능합니다!

앰비언트 사용에 대한 좋은 관행

마무리하기 전에 몇 가지 좋은 관행에 대해 이야기해보겠습니다:

선언 파일 사용: 앰비언트 선언을 .d.ts 파일에 넣는 것이 좋습니다. 이렇게 하면 실제 코드와 분리됩니다.
'any' 사용 주의: 'any'를 사용하는 것이 유혹적이지만, 선언에서 가능한 한 구체적으로 하세요.
최신 상태 유지: 설명하는 라이브러리가 변경되면 앰비언트 선언을 업데이트하세요!
기존 선언 파일 사용: 많은 인기 있는 라이브러리는 이미 선언 파일이 있습니다. 자신이 작성하기 전에 확인하세요!

결론

축하합니다! TypeScript 앰비언트의 세계로 첫 걸음을 뗐습니다. 우리는 많은 내용을 다루었고, 기본 선언에서 고급 기술까지 다양한 내용을 배웠습니다. 기억하시라, 새로운 기술을 배우는 것은 연습이 필요합니다. 처음에는 어렵게 보일 수 있지만, 꾸준히 하면 곧 프로처럼 앰비언트를 작성하게 될 것입니다!

마무리로, 주요 방법을 요약한 표를 제공합니다:

방법	설명	예제
declare var	전역 변수 선언	`declare var myGlobal: number;`
declare function	전역 함수 선언	`declare function myFunc(): void;`
declare module	모듈 선언	`declare module 'my-module' { ... }`
declare namespace	네임스페이스 선언	`declare namespace MyNS { ... }`
declare enum	열거형 선언	`declare enum Color { ... }`

기억하시라, TypeScript 앰비언트는 당신의 친구입니다. 기존의 JavaScript 코드를 TypeScript 프로젝트에서 사용할 수 있도록 도와줍니다. 그러므로 나아가고 탐구하며, 행복하게 코딩하세요!

Credits: Image by storyset