typescript18 [Typescript] Module System 이번 포스팅에서는 typescript의 module에 대해 가볍게 살펴보겠습니다. 즉, 하나의 파일에서 정의된 내용을 다른 파일에서 가져다 사용하는 방법에 대해 공유드리겠습니다. Default Export 하나의 module은 하나의 항목을 default로 export할 수 있습니다. // calc.ts const add = (x: number, y: number): number => { return x + y; }; export default add; 예제와 같이 add라는 함수를 default로 export 했습니다. 이제, 사용하는 부분을 살펴볼게요. // main.ts import myAdd from './calc'; console.log(myAdd(3, 4)); 보시는 대로 default로 ex.. 2023. 8. 9. [TypeScript] Indexed Access Types, Mapped Types, Conditional Types Indexed Access Type We can use Indexed Access Type to look up a specific property on another type. type Person = { age: number; name: string; alive: boolean }; let age: Person["age"] = 18; console.log(typeof age); // number The indexing type is itself a type, so we can use union, keyof, or other types entirely. type Person = { age: number; name: string; alive: boolean }; let person1: Person["age.. 2021. 7. 9. [TypeScript] Mixins Mixin is a way that building up classes by combining simpler partial classes. It is a kind of component reuse. Basics It relies on using Generic with class Inheritance to extend a base class. type Constructor = new (...args: any[]) => {}; class ExClass { constructor(public name: string) { } } function MixinGenerator(Base: T) { return class Example extends Base { _age = 1; setAge(age: number) { t.. 2021. 7. 9. [TypeScript] Generic Generic can create a component that can work over a variety of types rather than a single one. function identity(arg: T): T { return arg; } This generic function is the same as below. function identity(arg: number): number { return arg; } function identity(arg: string): string { return arg; } ... The T in the generic allows us to capture the type the user provides so that we can use that informa.. 2021. 7. 5. [TypeScript] Singleton Pattern Singleton is the most popular design pattern. It is a kind of creational design pattern and it ensures that only one instance. Code class Singleton { private static instance: Singleton; private constructor() { } public static getInstance(): Singleton { if (!Singleton.instance) { Singleton.instance = new Singleton(); } return Singleton.instance; } } We can get the same single instance using getIn.. 2021. 7. 5. [TypeScript] Class The class of TypeScript is similar to other languages. class Person { name: string; constructor(name: string) { this.name = name; } introduce() { console.log(`My name is ${this.name}`); } } let person = new Person('hoya'); person.introduce(); // My name is hoya Structural Type System TypeScript uses structural type system. That is, if the class has the same structure, they are compatible with ea.. 2021. 7. 4. [TypeScript] Basic Types TypeScript gives us some data types and it helps us a lot. Boolean It has a true/false value. let isSuccess: boolean = true; Number let binary: number = 0b0111; let octal: number = 0o765; let decimal: number = 7; let hex: number = 0xcafe; let big: bigint = 1234n; If you want to use bigint, you need to use ES2020 or later. String let familyName: string = 'kim' let givenName: string = "hoya" let m.. 2021. 7. 4. [Vue3] Getting Started with Vue3 + TypeScript + TailwindCSS In this posting, we will learn how to start with Vue3 + TypeScript + TailwindCSS. Prerequisite I will use the Vue CLI, so let's install it first. $ yarn global add @vue/cli Create a Project Once installed, let's create the project. $ vue create If you want to start with the default setting, just choose it. But, I will start with manual configuration for using TypeScript at this time. Select a Ty.. 2021. 6. 2. [TypeScript] Template Literal Types Template Literal Types build on string literal types, and have the ability to expand into many strings via unions. They have the same syntax as template literal strings in JavaScript, but are used in type positions. When used with concrete literal types, a template literal produces a new string literal type by concatenating the contents. type TypeA = "AAA"; type TypeBC = "BBB" | "CCC"; type Type.. 2021. 3. 21. [TypeScript] Utility Types TypeScript provides several utility types to facilitate common type transformations. ConstructorParameters type ConstructorParameters any> = T extends new (...args: infer P) => any ? P : never; Constructs a tuple or array type from the types of a constructor function type. It produces a tuple type with all the parameter types (or the type never if Type is not a function). Exclude type Exclude = .. 2021. 3. 21. Getting Started with React + Typescript + TailwindCSS In this posting, we will figure out to create a project with CRA(Create-React-App) with Typescript and TailwindCSS. CRA with Typescript Let's create a project first. $ npx create-react-app --template typescript Move on to the project folder. $ cd Let's run our app as a test. $ yarn start Add TailwindCSS Now, let's install TailwindCSS. $ yarn add tailwindcss postcss If you successfully installed .. 2020. 12. 10. [TypeScript] Type Inference TypeScript provides the type inference. const b = true; console.log(typeof b); // boolean const n = 3; console.log(typeof n); // number const f = 3.14; console.log(typeof f); // number const s = 'Hello'; console.log(typeof s); // string Best Common Type When a type inference is made from several expressions, the types of those expressions are used to calculate a 'best common type'. When no best .. 2020. 10. 25. 이전 1 2 다음
