본문 바로가기

Web109

[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.
[Next] Getting Started (with TypeScript, TailwindCSS) Next is an awesome framework. The homepage represents "The React Framework for Production" as its motto. It supports TypeScript with React. In addition, it also supports easy SSR, zero-configuration, SEO friendly, and routing based on the folder structure. Now, let's start !! Create a Project $ npx create-next-app my_next_app --example with-typescript $ cd my_next_app $ yarn dev Now, access our .. 2021. 1. 9.
[Jest] Testing with Error Return Source Code Let's create a function to test. const funcWithError = (): void => { throw new Error("My Error") } Test Code Now, let's test our function. describe("Test With Error", () => { it("tests a function with an error return", () => { try { calculator.funcWithError(); } catch (err) { expect(err).toEqual(new Error("My Error")); } }); }); I tested with a try...catch statement. Yay~ It works we.. 2020. 12. 28.
[React] Get Keyboard Input (TypeScript) Recently, I wanted to get keyboard input on the React application. I thought there is maybe someone like me. So let's figure out this. Create a Test Project $ npx create-react-app react-test --template typescript Implement I tried many things to implement this. Like onKeyDown, onKeyPress in div tag or, addEventListener to window or document in useEffect. Finally, I found the key point !! import .. 2020. 12. 28.
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.
[TypeScript] Decorators Decorators are a stage 2 proposal for JavaScript and are available as an experimental feature of TypeScript. So you should set the feature in your tsconfig.js. { "compilerOptions": { "target": "es5" "experimentalDecorators": true ... } } A decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. Decorators use the form @exp.. 2020. 10. 24.
[TypeScript] Iterators and Generators Iterator is a behavioral design pattern that allows sequential traversal through a complex data structure without exposing its internal details. Generator is a lazy iterator. Iterables An object is deemed iterable if it has an implementation for the Symbol.iterator property. Some built-in types like Array, Map, Set, String, Int32Array, Uint32Array, etc. have their Symbol.iterator property alread.. 2020. 10. 23.
[TypeScript] Interface TypeScript's type checking focuses on the shape that values have. This is called 'duck typing' or 'structural subtyping'. In TypeScript, interfaces fill the role of naming these types and are a powerful way of defining contracts within code as well as contracts with code outside of the project. interface IToDoItem { text: string; isCompleted: boolean } function addItem(item: IToDoItem) { console.. 2020. 10. 17.
[TypeScript] Destructuring and Spread Array Destructuring let input = [1, 2]; let [first, second] = input; console.log(`${first}, ${second}`); // 1, 2 Multiple values of an array can be easily assigned as variables. function f([first, second]: [number, number]) { console.log(`${first}, ${second}`); } f([1, 2]) // 1, 2 It can be also applied in the parameters of a function. let [first, ...rest] = [1, 2, 3, 4]; console.log(first); // .. 2020. 10. 16.
[TypeScript] Variable Declaration (var, let, const) var Declarations Declaring a variable in JavaScript has always traditionally been done with the var keyword. (ES5) var num = 7; Scoping Rules It is not an error to declare the same variable multiple times with var. var num = 7; var num = 3; let Declarations let differs from var in point of semantics. let say = "Hello"; Block Scoping Unlike variables declared with var whose scopes leak out to the.. 2020. 10. 15.
[TypeScript] Dev. Environment Configuration with VS Code TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It offers classes, modules, and interfaces to help you build robust components. Installation NPM Module If you want to use TypeScript compiler wherever, install it globally. $ yarn globally add typescript or $ npm i -g typescript If you want to use TypeScript only in a specific project, you can install it locally. $ .. 2020. 10. 12.

티스토리툴바