본문 바로가기

Web/JavaScript79

[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.
[Jest] JavaScript Code Unit Testing Jest is introduced on the homepage as "Jest is a delightful JavaScript Testing Framework with a focus on simplicity". In other words, Jest is used for testing JavaScript. As far as I know, Jest is based on Jasmine, so it is similar to Jasmine. Now, let's learn the fundamental of Jest. Installation Install Jest in your project folder. $ yarn add -D jest or $ npm i -D jest Configuration Now, add s.. 2020. 10. 1.
[JavaScript] Callback, Promise, Async/Await In the case of synchronous code, the code runs in blocking mode. In other words, the next statement can not be executed and waits until the previous statement is completed. So, we need to use the asynchronous code. If we use the asynchronous code, we can execute the next statement simultaneously and execute statements related to asynchronous code after the asynchronous code finishes. Now, Let's .. 2020. 9. 18.
[JavaScript] JSON (JavaScript Object Notation) JSON is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications. Initially, it was made for JavaScript, but many other languages have libraries to handle it as well. JSON Structure A JSON is a string whose format very much resembles JavaScript object literal format. Here is a simple example of .. 2020. 9. 17.
[React] useState Hooks Overview useState Hooks is used when managing a state value of React component. State value can be understood as something like a local variable of React component. Therefore, even if the same component is used, the internal state value is managed separately for each component. const [value, setValue] = useState(initialValue); The syntax is like the above code. The useState Hooks returns state v.. 2020. 9. 2.
[React] prop-types prop-types is the official react tool, runtime type checking for React props and similar objects. But, I think if you need this feature, TypeScript is a better choice. Installation You can install prop-types through yarn or npm. $ yarn add -D prop-types $ npm i -D prop-types Usage Example prop-types helps to improve readability and ease maintenance by clearly setting the information of type as t.. 2020. 9. 2.
[JavaScript] Object Destructuring Object destructuring is a grammar in which multiple properties of an object can be easily assigned as variables. Unordered Assignment const obj = { width: 20, height: 30 }; const { height, width } = obj; console.log(`width: ${width}, height: ${height}`); //=> Result // width: 20, height: 30 Aliasing const obj = { width: 20, height: 30 }; const { width: w, height: h } = obj; console.log(`width: $.. 2020. 9. 2.

티스토리툴바