TypeScript
-
이펙티브 타입스크립트 아이템 1~3TypeScript 2023. 6. 2. 15:38
아이템1: 타입스크립트와 자바스크립트의 관계 이해하기 TypeScript는 JavaScript의 상위 집합입니다. 따라서 main.js를 main.ts로 변경하여도 달라지는 것은 없습니다. 이것은 JavaScript를 TypeScript로 마이그레이션하는데 큰 도움을 줍니다. 다음 예제를 확인해보겠습니다. function greet(who: string) { console.log('Hello', who) } JavaScript는 who: string에 대해서 Unexcepted Token 에러를 발생시킵니다. function greet(who) { console.log('Hello', who) } 하지만 위의 예제를 TypeScript에서는 에러가 발생하지 않습니다. 따라서 JavaScript의 상위집합..
-
[TypeScript] 선언병합TypeScript 2022. 9. 23. 00:27
선언 병합 컴파일러가 같은 이름으로 선언된 두 개의 개별적인 선언을 하나의 정의로 병합하는 것을 뜻합니다. 인터페이스 병합 (Merging Interfaces) 가장 일반적이고 간단한 선언 병합 유형은 인터페이스 병합입니다. 가장 기본적인 수준에서, 병합은 각 선언의 멤버를 같은 이름의 인터페이스에 기계적으로 결합합니다. interface Box { height: number; width: number; } interface Box { scale: number; } let box: Box = {height: 5, width: 6, scale: 10}; 위 코드를 아래로 바꾸면 scale이 겹치는데 타입이 다르므로 에러가 발생합니다. interface Box { scale: string; width: nu..
-
[TypeScript] 고급타입 - 2TypeScript 2022. 9. 22. 00:26
타입 별칭(Type Aliases) 타입 별칭은 새로운 타입을 만드는게 아닌 그 타입을 나타내는 새로운 이름을 만드는 것 입니다. type Name = string; type NameResolver = () => string; type NameOrResolver = Name | NameResolver; function getName(n: NameOrResolver): Name { if (typeof n === "string") { return n; } else { return n(); } } 프로퍼티 내에 자기 자신을 참조할 수 있습니다. type Tree = { value: T; left: Tree; right: Tree; } 타입별칭은 제네릭이 될 수 있습니다. type Container = { va..
-
[TypeScript] 고급타입-1TypeScript 2022. 9. 21. 23:26
교차 타입(Intersection Types) 교차 타입은 여러 타입을 하나로 결합합니다. Person & Serializable & Loggable 은 Person, Serializable, Loggable 타입의 모든 멤버를 갖습니다. 아래는 믹스인을 만드는 간단한 예제입니다. function extend(first: First, second: Second): First & Second { const result: Partial = {}; for (const prop in first) { if (first.hasOwnProperty(prop)) { (result as First)[prop] = first[prop]; } } for (const prop in second) { if (second.has..
-
[TypeScript] 제네릭TypeScript 2022. 9. 17. 20:54
소개 (Introduction) 잘 정의되고 일관된 API뿐만 아닌 재사용 가능한 컴포넌트를 구축하는 것도 소프트웨어 엔지니어링에서의 주요한 부분입니다. 현재의 데이터와 미래의 데이터 모두를 다룰 수 있는 컴포넌트는 거대한 소프트웨어 시스템을 구성하는 데 있어 가장 유연한 능력을 제공할 것입니다. C#과 Java 같은 언어에서, 재사용 가능한 컴포넌트를 생성하는 도구상자의 주요 도구 중 하나는 제네릭입니다, 즉, 단일 타입이 아닌 다양한 타입에서 작동하는 컴포넌트를 작성할 수 있습니다. 사용자는 제네릭을 통해 여러 타입의 컴포넌트나 자신만의 타입을 사용할 수 있습니다. 제네릭의 Hello World (Hello World of Generics) 먼저 제네릭의 "hello world"인 identity 함..
-
[TypeScript] 열거형TypeScript 2022. 9. 16. 20:54
TypeScript는 숫자와 문자열을 기반으로 한 열거형을 제공합니다. 숫자 열거형 (Numeric enums) 열거형은 enum 키워드를 사용해 정의할 수 있습니다. enum Direction1 { Up = 1, Down, Left, Right, } enum Direction2 { Up, Down, Left, Right, } enum Direction3 { Up, // 0 Down, // 1 Left=3, // 3 Right, // 4 } enum E { Z, // 0 A = getSomeValue(), B, // 오류! 앞에 나온 A가 계산된 멤버이므로 초기화가 필요합니다. } //열거형에 접근하는 방법 console.log(Direction3.Right) Up을 1로 초기화한다면 Down = 2, ..
-
[TypeScript] 클래스TypeScript 2022. 9. 15. 20:53
클래스(FClasses) class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } let greeter = new Greeter("world"); C#이나 Java를 사용해봤다면 익숙한 구문일 것입니다. Greeter 클래스는 프로퍼티인 greeting , 생성자, 메서드인 greet 인 3개의 멤버로 이루어져 있습니다. 클래스의 멤버를 참조할 때 this. 을 앞에 붙여 멤버에 접근하는 것을 알 수 있습니다. new 를 사용하여 Greeter 클래스의 인스턴스를 생성할 수 있습니다. 이전에 작성한 생성자를 호출하..
-
[TypeScript] 유니언과 교차타입TypeScript 2022. 9. 10. 17:15
유니언 타입(Union Types) 유니언 타입은 여러 타입 중 하나가 될 수 있는 값을 의미합니다. 세로 막대(|) 로 각 타입을 구분합니다. number | string | boolean 은 타입이 number 또는 string 또는 boolean 이 될 수 있음을 뜻합니다. 공통 필드를 갖는 유니언(Unions with common Fields) // @errors: 2339 interface Bird { fly(): void; layEggs(): void; } interface Fish { swim(): void; layEggs(): void; } declare function getSmallPet(): Fish | Bird; let pet = getSmallPet(); pet.layEggs();..