[Typescript] 19장 네임스페이스

1. 단일 파일 검사기타입스크립트는 기본적으로 하나의 파일로 작성된 네임스페이스를 지원하며, 이를 통해 네임스페이스 내의 모든 요소를 한번에 검사할 수 있습니다.namespace SingleFileNameSpace { export function greet(name: string) { console.log(`Hello, ${name}!`); }}SingleFileNameSpace.greet('John Doe'); // Hello, John Doe!2. 네임스페이스 적용하기네임스페이스를 사용하여 관련된 코드 조각을 그룹화할 수 있습니다. 예를 들어, 여러 함수와 클래스를 포함하는 네임스페이스를 만들 수 있습니다.namespace MathUtils { export function add(a: nu..

• format_list_bulleted Front-End/TypeScript
• · 2025. 4. 7.
• textsms

[TypeScript] 18장 모듈

1. Export = 선언 export 하기타입스크릡트에서 export = 구문을 사용하기 위해 모듈을 내보낼 수 있습니다, 이 방식은 CommonJS 스타일의 모듈을 만들 때 주로 사용되는 방식입니다.function myFunction() { console.log('Hello, World');}export = myFunction;2. Export 문 (Export statements)여러 가지 요소를 내보내는 방법으로 export문을 사용합니다.export const number = 42;export function sayHello() { console.log('Hello');}sayHello();3. Re-export 하기 (Re-exports)다른 모듈에서 내보낸 요소를 다시 내보내는 방법입니다..

• format_list_bulleted Front-End/TypeScript
• · 2025. 4. 1.
• textsms

[Typescript] 17장 믹스인

1. 믹스인타입스크립트에서 믹스인은 여러 클래스의 기능을 조합해 새로운 클래스를 만드는 패턴으로, 이를 통해 코드의 재사용성을 높여줍니다. 타입스크립트에서 믹스인을 구현하기 위해 먼저 함수를 정의합니다.function Mixin {}>(Base: T) { return class extends Base { mixinMethod() { console.log('Mixin method called'); } };}2. 믹스인 기본 클래스 정의먼저 믹스인이 결합될 기본 클래스를 정의해줍니다.class Robot { move() { console.log('Robot is moving!'); }} 다음은 믹스인을 적용해 새로운 클래스를 만들어줍니다. 믹스..

• format_list_bulleted Front-End/TypeScript
• · 2025. 3. 27.
• textsms

[Typescript] 16장 JSX

1. 기본 사용법 (Basic Usage)JSX는 Javascript XML의 약자로, Javascript 코드 안에 HTML과 유사한 구문을 사용할 수 있습니다. React에서는 UI를 정의할 때 주로 사용합니다. 기본적인 JSX의 예시는 다음과 같습니다.const element = Hello, world!;2. Typescript에서 JSX 설정먼저 Typescript에서 JSX를 사용하기 위해 Typescript를 설치합니다. npm install --save-dev typescript React와 관련된 타입 정의도 설치합니다.npm install --save react react-domnpm install --save-dev @types/react @types/react-dom tsconfig...

• format_list_bulleted Front-End/TypeScript
• · 2025. 3. 24.
• textsms

[Typescript] 15장 이터러블 타입

1. for..of 문 for..of문은 이터러블 객체(ex.배열, 문자열, 맵, 세트 등)의 각 요소에 대해 반복할 수 있는 구문으로, 이터러블 객체는 Symbol.iterator 메소드를 구현해야 합니다.const array = [1, 2, 3];for (const value of array) { console.log(value); // 1 2 3}2. for..of vs for..in 문for..of: 이터러블 객체의 값을 반복for..in: 객체의 속성 이름(키)을 반복const array = [1, 2, 3];console.log('for..of:');for (const value of array) { console.log(value); // 1,2,3}console.log('for..in:..

• format_list_bulleted Front-End/TypeScript
• · 2025. 3. 22.
• textsms

[TypeScript] 14장 유티릴티 타입

1. Partial Partial는 모든 속성을 선택적으로 만드는 타입입니다.interface User { id: number; name: string; email: string;}const updateUser = (userId: number, userUpdates: Partial) => { console.log(`Update User ${userId} with data:`, userUpdates);};updateUser(1, { name: 'James' }); // Update User 1 with data: { name: "James" }2. RequiredRequired는 모든 속성을 필수로 만드는 타입입니다.interface UserWithOptionalFields { id?: numbe..

• format_list_bulleted Front-End/TypeScript
• · 2025. 3. 20.
• textsms