https://www.garamx.com/dokuwiki/ 2026-05-06T13:40:36+00:00 https://www.garamx.com/dokuwiki/ https://www.garamx.com/dokuwiki/lib/tpl/darkblue/images/favicon.ico text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:advanced_type&rev=1744711518&do=diff Advanced Type Table of contents * Intersection Types * Union Types * Type Guards and Differentiating Types * User-Defined Type Guards * Using type predicates * Using the in operator * typeof type guards * instanceof type guards text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:basic_types&rev=1744711518&do=diff Basic Types 프로그램을 유용하게 사용하려면 숫자, 문자열, 구조, 부울 값 등 가장 간단한 데이터 단위로 작업 할 수 있어야합니다. TypeScript에서는 자바 스크립트에서 기대할 수있는 것과 거의 같은 유형을 지원합니다. 편리한 열거 형을 사용하여 상황을 돕습니다. text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:cheat_sheet&rev=1744711518&do=diff Cheat Sheet Usage npm install typescript tsc Primitive types Primitive typesAny type (explicitly untyped) any void type (undefined or null, use for function returns only) void Undefined type undefined Null type nullnever type neverunknown type unknown text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:class&rev=1744711518&do=diff TypeScript Class 기존의 JavaScript는 재사용 가능한 component를 만들기 위해 함수와 prototype에 기반한 상속을 이용했습니다. 하지만 기존 객체지향에 익숙해 있는 개발자들에게는 상당히 생소한 개념이었죠. 그래서 ECMAScript 2015( ES6 )에서는 개발자들이 좀 더 쉽게 JavaScript Application을 구현할 수 있도록 전통적인 class 기반의 객체지향 개념을 도입했습니다. text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:datatype&rev=1744711518&do=diff TypeScript Data Type TypeScript는 data type을 체크합니다. 아래의 코드는 에러입니다. let myColorStr: string = Color.Green; boolean * boolean : primitive data type * Boolean : primitive wrapper object number * 정수와 실수를 구분하지 않습니다. 둘 다 floating point values입니다. text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:declaration_merging&rev=1744711518&do=diff Declaration Merging 소개 TypeScript의 고유한 개념 중 일부는 타입 레벨에서 JavaScript 객체의 형태를 설명합니다. 특히 TypeScript에서의 고유한 예로는 '선언 병합'이라는 개념이 있습니다. 이 개념을 이해하는 것은 기존 JavaScript를 사용할 때 이점을 제공할 것입니다. 또한 고급 추상화 개념에 대한 문을 열어줍니다. text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:decorator&rev=1744711518&do=diff Decorators 소개 TypeScript와 ES6의 클래스가 도입됨에 따라 클래스 및 클래스 멤버에 어노테이션 또는 변경을 지원하기 위해 추가적인 기능이 필요한 일부 상황이 있습니다. 데코레이터는 클래스 선언과 멤버에 대한 어노테이션과 메타-프로그래밍 구문을 모두 추가할 수 있는 방법을 제공합니다. 데코레이터는 JavaScript의 stage 2 제안이며 TypeScript의 실험적인 기능으로 사용할 수 있습니다.… text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:destructuring&rev=1744711518&do=diff Destructuring " 아래의 예제를 정상적으로 실행해보실려면 tsconfig.json에서 compilerOptions의 target 속성을 es6로 해 주셔야 합니다." 일반적으로 Destructuring Assignment(비구조할당)라고 하는데 쉽게 말하자면 배열의 요소나 객체의 속성을 배열 literal 혹은 객체 literal과 유사한 형태의 문법을 이용하여 변수에 할당하는 기법입니다. 잘 알아두면 코드를 좀 더 쉽게 작성할 수 있습니다. text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:enum&rev=1744711518&do=diff Enums Aspects to enums lookup object tsc는 enum Zoo { Cat, Tiger } 위의 코드를 var Zoo; (function (Zoo){ Zoo[Zoo["Cat"] = 0] = "Cat"; Zoo[Zoo["Tiger"] = 1] = "Tiger"; )(Zoo || (Zoo{})) 로 변경한다. lookup object를 참조한다고 할 수 있다. 이것의 목적은 두 가지입니다 : 문자열에서 숫자로의 매핑 역할을하는 것. Zoo.Cat 또는 Zoo[ 'Cat']를 쓸 때, 숫자에서 문자열로의 매핑 역할을 합니다. 역 매핑은 디버깅 또는 로깅 목적에 유용합니다. 종종 0 또는 1 값을 가지며 해당 문자열… text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:first&rev=1744711518&do=diff TypeScript 시작하기 * 설치 npm install -g typescript * 설치 목록 확인 macOS의 경우 /usr/local/lib/node_modules에 모듈이 설치되는 위치입니다. npm list -g npm root -g // 모듈설치위치 * tsconfig.json이 없는 경우 생성 할 때 text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:function&rev=1744711518&do=diff Functions Introduction JavaScript의 Function은 application의 기초적인 block을 만든다. 이 것을 통해서 abstraction, mimicking classes, information hiding, 그리고 modules의 layers를 만들게 하여 준다. TypeScript는 이러한 것들을 쉽게 만들도록 표준 JavaScript function에 새로운 능력을 추가한다. text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:generic&rev=1744711518&do=diff Generics JavaScript는 타입 선언이 필요하지 않고, 따라서 특정 타입을 위해 만들어진 클래스나 함수도 타입 에러를 런타임에서 일으킬 뿐이다. 코드를 실행시키기 전까지는 함수와 클래스가 모든 타입에 대응한다. 따라서 JavaScript에서는 제네릭이란 말을 듣지 못 했다. text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:home&rev=1744711518&do=diff TypeScript 타입스크립트(TypeScript)는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. C#의 리드 아키텍트이자 델파이, 터보 파스칼의 창시자인 Anders Hejlsberg가 개발에 참여한다.[1] 클라이언트 사이드와 서버 사이드를 위한 개발에 사용할 수 있다. text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:interface&rev=1744711518&do=diff TypeScript Interface interface는 우리가 알고 있는 Java의 interface와 문법적으로 유사합니다. 하지만 객체지향에서 말하는 interface와는 의미적으로 좀 차이가 있습니다. 그 부분은 예제 중간중간에 살펴보기로 하고 지금은 TypeScript의 interface 에 대해서만 살펴보도록 하겠습니다. text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:interfaces&rev=1744711518&do=diff Interfaces Introduction TypeScript의 핵심 원리 중 하나는 유형 검사가 값이 갖는 모양에 초점을 맞추는 것입니다. 이것은 때때로 “오리 타이핑 (duck typing)“또는 “구조적 하위 유형화 (structural subtyping) text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:iterator_generator&rev=1744711518&do=diff Iterators and Generators Iterables 객체가 Symbol.iterator 프로퍼티에 대한 구현을 가지고 있다면 Iterable로 간주됩니다. Array, Map, Set, String, Int32Array, Uint32Array 등과 같은 몇몇 내장 타입은 이미 구현된 Symbol.iterator text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:jsx&rev=1744711518&do=diff JSX 소개 JSX는 XML 같은 구문이 포함 가능합니다. 의미는 구현에 따라 다르지만 유효한 JavaScript로 변형되어야 합니다. JSX는 React에서 인기를 얻었으나 이후 다른 애플리케이션도 볼 수 있습니다. TypeScript는 JSX를 직접 JavaScript에 포함, 타입 검사 및 컴파일할 수 있도록 지원합니다. text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:mixins&rev=1744711518&do=diff Mixins 소개 전통적인 OO 계층 구조와 함께 재사용 가능한 컴포넌트로 클래스를 구축하는 또 다른 보편적인 방법은 더 간단한 부분의 클래스를 결합하여 클래스를 구축하는 것입니다. 여러분은 스칼라와 같은 언어에서의 믹스인이나 특성에 대한 사상에 익숙할 수 있으며 이 패턴은 JavaScript 커뮤니티에서도 인기를 얻고 있습니다. text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:module_resolution&rev=1744711518&do=diff Module Resolution "이 절에서는 모듈에 대한 몇 가지 기본 지식을 전제로합니다. 자세한 내용은 모듈 설명서를 참조하십시오." 모듈 resolution은 import가 무엇을 참조하는지 파악하기 위해 컴파일러가 사용하는 프로세스입니다. text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:module&rev=1744711518&do=diff Module "용어에 대한 노트: TypeScript 1.5에서 기록해둘 만큼 중요한 명명법 변경이 있었습니다. “내부 모듈(Internal modules)”은 “네임스페이스”가 되었습니다. “외부 모듈(External modules)”은 이제 간단하게 “모듈(modules)”이 되어 ECMAScript 2015의 용어와 맞췄습니다. ( text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:namespace_module&rev=1744711518&do=diff Namespaces and Modules "용어에 대한 노트: TypeScript 1.5에서 기록해둘 만큼 중요한 명명법 변경이 있었습니다. “내부 모듈(Internal modules)”은 “네임스페이스”가 되었습니다. “외부 모듈(External modules)”은 이제 간단하게 “모듈(modules)”이 되어 ECMAScript 2015의 용어와 맞췄습니다. (module X {는 namespace X {와 동일하며 후자가 선호됩니다.) text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:namespace&rev=1744711518&do=diff Namespace Table of contents * Introduction First steps * Validators in a single file * Namespacing * Namespaced Validators * Splitting Across Files * Multi-file namespace * Aliases * Working with Other JavaScript Libraries * text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:operator&rev=1744711518&do=diff Spread Operator Spread Operator의 주요 목적은 Array이나 Object의 요소를 퍼뜨리는 것이다. 이것은 예시로 가장 잘 설명된다. Apply 일반적인 사용 사례는 함수 인수에 배열을 퍼뜨리는 것이다. 이전에는 Function.prototype.apply 사용해야 합니다: text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:symbol&rev=1744711518&do=diff Symbol Introduction ECMAScript 2015에서부터 symbol은 number와 string과 같은 기본 데이타 타입(primitive data type)이 되었다. symbol값들은 Symbol이라는 생성자를 호출하여 생성된다. let sym1 = Symbol(); let sym2 = Symbol("key"); // string "key"는 optional입니다. text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:triple_slash&rev=1744711518&do=diff Triple-Slash Directives 트리플-슬래시 지시자는 단일 XML 태그가 포함된 한 줄 주석입니다. 주석의 내용은 컴파일러 지시자로 사용됩니다. 트리플-슬래시 지시자는 포함된 파일의 상단에서만 유효합니다. 트리플-슬래시 지시자는 다른 트리플-슬래시 지시자를 포함하여 한 줄 또는 여러 줄 주석 앞에 붙을 수 있습니다. 문 또는 선언 뒤에 나오는 경우 보통의 한 줄 주석으로 간주하며 특별한 의미는 없습니다.… text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:type_checking&rev=1744711518&do=diff Type Checking Javascript Files TypeScript 2.3 및 이후 버전에서는 --checkJs를 사용하여 .js 파일에서 타입 검사 및 오류 보고 모드를 지원합니다. 일부 파일에 // @ts-nocheck 주석을 추가하여 검사하는 것을 건너뛸 수 있습니다. 반대로 text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:type_compatibility&rev=1744711518&do=diff Type Compatibility Introduction TypeScript의 타입호환성은 구조적인 하위타입(structural subtyping)을 기반으로 합니다. structual typing은 멤버에게만 의존하여 Type을 연관시키는 방법입니다. 이는 일반적인 타입핑과는 대조적입니다. text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:type_inference&rev=1744711518&do=diff Type Inference(타입추론) let x = 3; x의 타입은 number로 유추된다. 이러한 종류의 추론은 변수와 멤버를 초기화하고, 매개변수 기본값을 설정하고, 함수 반환 타입을 결정할 때 발생합니다. 대부분의 경우 타입유추는 간단하지만 그 미묘한 차이를 알아보자! text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:utility&rev=1744711518&do=diff Utility Types Partial<T> Constructs a type with all properties of T set to optional. This utility will return a type that represents all subsets of a given type. Example interface Todo { title: string; description: string; } function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>) { return { ...todo, ...fieldsToUpdate }; } const todo1 = { title: 'organize desk', description: 'clear clutter', }; const todo2 = updateTodo(todo1, { description: 'throw out trash'… text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:variable_declarations&rev=1744711518&do=diff Variable Declarations var let const text/html 2025-04-15T10:05:18+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.garamx.com/dokuwiki/doku.php?id=typescript:variable&rev=1744711518&do=diff 변수선언 var var myVar = 100; function myFunc() { var message = "Hello World"; return message } JavaScript는 함수안에 다른 함수를 선언할 수 있습니다. 그러한 경우 내부 함수가 외부 함수가 가지고 있는 변수를 참조할 수 있습니다. 또한 JavaScript는 1급 함수(first-class function)를 지원합니다. 쉽게 말하면 JavaScript의 함수는 값의 의미로 사용될 수 있다는 것입니다. 함수가 값의 역할을 하다보니 다음과 같은 형태의 코드가 가능합니다.…