TypeScript
-
[TypeScript] 핸드북 정리(7) - ClassTypeScript 2023. 4. 19. 23:52
Class 타입스크립트는 자바스크립트의 여러가지 ES6 이후의 문법들을 지원합니다. 클래스 역시 타입스크립트에서 사용이가능합니다. class Person {} 기본적인 클래스 문법입니다. 현재는 빈 클래스입니다. class Person { name:string; age:number; } const choi = new Person(); choi.name = 'choi'; // 'choi':string; choi.name = 29; // error number는 string타입에 할당 할 수 없음 choi.age = 29; // 29:number; 클래스는 new 연산자와 함께 호출하여 인스턴스를 생성하고, 기본적인 필드를 정의할 수 있습니다. 필드의 타입은 필수는 아니지만, 따로 타입을 정의하지 않으면 a..
-
[TypeScript] 핸드북 정리(6) - [Contional, Mapped, Template]TypeScript 2023. 4. 16. 19:44
해당 포스트는 타입스크립트 핸드북을 보고 정리한 내용이며, 핸드북의 예제를 사용했습니다. Conditional Types 프로그래밍은 유저의 입력과 입력을 기반으로한 정해진 출력을 하는것입니다. 조건부 타입은 입력과 출력의 타입의 관계를 설명해줍니다. interface Animal { live(): void; } interface Dog extends Animal { woof(): void; } type Example1 = Dog extends Animal ? number : string; // number type Example2 = RegExp extends Animal ? number : string; // string 조건부타입은 자바스크립트의 삼항연산자 문법과 동일합니다. 위의 예제에서는 Do..
-
[TypeScript] 핸드북 정리(6) - Type Manipulation_[keyof, typeof, index access type]TypeScript 2023. 4. 15. 00:14
해당 포스트는 타입스크립트 핸드북을 보고 정리한 내용이며, 핸드북의 예제를 사용했습니다. keyof 연산자 type Point = { x: number; y: number }; type P = keyof Point; // 'x' | 'y' type Arrayish = { [n: number]: unknown }; type A = keyof Arrayish; // number type Mapish = { [k: string]: boolean }; type M = keyof Mapish; // string keyof 연산자는 객체의 key 값을 숫자 혹은 문자열 형태의 유니온으로 나타내며, 인덱스 시그니처에 접근하는 경우 인덱스 시그니처의 타입을 반환합니다. typeof 연산자 자바스크립트의 typeof 연..
-
[TypeScript] 핸드북 정리(6) - Type Manipulation_[Generic]TypeScript 2023. 4. 14. 23:26
해당 포스트는 타입스크립트 핸드북을 보고 정리한 내용이며, 핸드북의 예제를 사용했습니다. 본 포스팅에서는 제네릭, keyof 등등 다양한 타입스크립트의 문법을 알아보겠습니다. Generic 개발에 있어 재사용성과 유연한 코드는 굉장히 중요한 요소입니다. 타입스크립트에서 타입들을 여러 가지 타입들을 재사용하고 유연한 타입을 받는 제네릭에 대해 알아보겠습니다. function identity(arg: Type): Type { return arg; } identity('sdfsdf'); 제네릭은 타입 매개변수입니다 매개변수로 들어온 타입을 캡처합니다. 제네릭을 이용하여 string으로 들어온 타입을 캡처하여 매개변수에 사용하고, 반환타입으로 운반했습니다. any 타입을 받아 any타입을 반환하는 함수였다면, ..
-
[TypeScript] 핸드북 정리(5) - Object TypesTypeScript 2023. 4. 14. 22:47
해당 포스트는 타입스크립트 핸드북을 보고 정리한 내용이며, 핸드북의 예제를 사용했습니다. Object Types 자바스크립트에서 여러가지 값들을 담는 자료구조인 오브젝트의 타입을 타입스크립트에서는 어떻게 작성하는지 알아보겠습니다. Property Modifiers Optional Property interface PaintOptions { shape: Shape; xPos?: number; yPos?: number; } function paintShape(opts: PaintOptions) { // codes } const shape = getShape(); paintShape({ shape }); paintShape({ shape, xPos: 100 }); paintShape({ shape, yPos:..
-
[TypeScript] 핸드북 정리(4) - More on FunctionTypeScript 2023. 4. 12. 00:04
해당 포스트는 타입스크립트 핸드북을 보고 정리한 내용이며, 핸드북의 예제를 사용했습니다. More on Function 이번 포스팅에서는 핸드북에서 설명하는 함수에 대한 내용을 정리해 보겠습니다. 함수 타입 표현식 시그니처 함수의 반환타입을 지정하는 방법은 간단합니다. function functionReturnType(a: string): string { return a }; 함수의 매개변수를 묶는 그룹연산자 뒤에 반환할 타입을 명시해 주면 됩니다. function helper(s:string ,fn: (a: string) => void) { return fn(s); } const aa = helper('aaaa', function(a: string) { console.log(a) }); 함수가 매개변..
-
[TypeScript] 핸드북 정리(3) - NarrowTypeScript 2023. 3. 31. 23:52
해당 포스트는 타입스크립트 핸드북을 보고 정리한 내용이며, 핸드북의 예제를 사용했습니다. Narrow란 '좁은'이란 의미입니다. Type Narrow 라고 하면 좁은 타입, 즉 여러 개의 타입을 유니온과 같은 타입으로 받는 변수가 있다면 그 타입 중 가장 적절하고 명확한 타입을 유추해내는 것이라고 이해할 수 있습니다. function hasIndex(arr: Array, index: string | number) { if(typeof index === "number") { return arr.at(index) } return arr.at(Number(index)) } 함수 hasIndex는 배열과, 찾고자 하는 위치의 인덱스를 받아 받아온 배열에서 찾고자 하는 값의 위치를 반환해 주는 함수입니다. 딱히 ..
-
[TypeScript] 핸드북 정리(2) - EverydayTypesTypeScript 2023. 3. 30. 23:49
해당 포스트는 타입스크립트 핸드북을 보고 정리한 내용이며, 핸드북의 예제를 사용했습니다. 이번 포스팅에서는 핸드북에서 설명하는 타입스크립트의 타입들에 대해 살펴보겠습니다. 기본적으로 타입스크립트의 타입은 자바스크립트의 타입을 기반으로 합니다. 이는, 자바스크립트에서 typeof 연산자를 사용해 얻을 수 있는 타입들이라는 뜻입니다. const str = 'hello'; typeof str; // string 자바스크립트에는 대표적인 7가지 타입이 존재합니다. String Number Boolean Undefined Null Symbol Object 타입스크립트에도 위에 열거한 타입들이 존재하며, 추가적으로 지원하는 다양한 타입들이 있습니다. 이전 포스팅에서 다뤘던 내용들이 대부분이라 이번 포스팅에서는 타입..