Sun Zhenyang's Technology Notes

website·Indexed 29 days ago

https://sunzhenyang.github.io/

A collection of technical notes covering TypeScript data types and inference, ES6 features (Proxy, Modules, Classes, and ArrayBuffer), HTML elements, JavaScript basics, GitHub Actions workflow configuration, and Visual Studio Code usage guides including debugging and Git integration.

Tokens
284.3K
Snippets
1.7K
Records
2.1K
Agent score
75%

What's inside Sun Zhenyang's Notes

  1. Overview of TypeScript advantages

    TypeScript is a superset of JavaScript that adds optional type annotations and incorporates object-oriented programming concepts. Key advantages include:

    • Static Type Checking: Detects type mismatches during compilation to prevent low-level runtime errors.
    • Enhanced Intellisense: Provides clearer and more accurate automatic code completion.
    • Advanced Type System: Introduces generics and TypeScript-specific types.
    • Declaration Files (.d.ts): Provides a clear map of interfaces, types, classes, and functions for dependency libraries.
    • JS Compatibility: Easily compiles to JavaScript, often even if some errors exist in the TS source.
    • Flexibility: While strongly typed, it allows flexibility via the any type and as any assertions.
  2. Overview of WebAssembly (Wasm) in the JavaScript ecosystem

    Introduced by Mozilla in June 2015 as a successor to asm.js, WebAssembly is a binary intermediate code format (similar to Java bytecode) for JavaScript engines. It allows for significantly faster execution speeds (20x+) and enables languages other than JavaScript to be compiled and run in the browser. All mainstream browsers supported WebAssembly as of November 2017.
  3. Overview of the Geolocation API

    The Geolocation API is used to retrieve the user's geographical position. Due to privacy concerns, browsers will prompt the user for permission before sharing location data. This API is only available in secure contexts (HTTPS). The API is accessed via the navigator.geolocation property, which returns a Geolocation object.
  4. Introduction to TypeScript Decorators

    Decorators are a syntax used to modify the behavior of a class, method, property, or accessor at definition time. They are prefixed with the @ symbol and must be a function or an expression that evaluates to a function. A decorator can either return nothing (modifying the target in place) or return a new object to replace the decorated target.
    @Injectable 
    class A {}
  5. Overview of the Reflect API

    The Reflect object provides methods for intercepting JavaScript operations. It is not a constructor and all its properties and methods are static (similar to the Math object). Its primary purposes are to:

    1. Move internal language methods of Object to a dedicated API.
    2. Provide more reasonable return values for object operations.
    3. Turn object operations into function calls.
    4. Provide a 1:1 mapping to the traps defined in Proxy objects.
  6. Overview of JavaScript ecosystem milestones and influential technologies

    JavaScript's growth has been driven by the evolution of the web and browser engines. Key historical developments include:

    • Data Exchange: JSON was proposed by Douglas Crockford in 2001 as a replacement for XML for server-client data exchange.
    • Asynchronous Communication: The XMLHttpRequest interface (IE 5, 1999) and the subsequent 'Ajax' method (2005) enabled dynamic page updates without full reloads.
    • Performance & Engines: The V8 engine (Google, 2008) significantly increased JS execution speed, enabling more complex applications and the creation of Node.js.
    • Server-side JS: Node.js (2009) allowed JavaScript to be used for server-side programming, enabling full-stack development with a single language.
    • Language Extensions & Transpilers:
      • CoffeeScript (2009): A concise syntax that compiles to JS.
      • TypeScript (2012): A typed superset of JS designed for large-scale application development.
      • asm.js (2012): A strict subset of JS designed to be compiled efficiently into machine code.
    • Frameworks & Tooling: The era of frameworks began with Dojo (2004), followed by jQuery (2006) for DOM manipulation, and later Single Page Application (SPA) frameworks like AngularJS and Ember (2012). Modular development was furthered by NPM, BackboneJS, and RequireJS (2010).
  7. Introduction to ES6 Proxy

    The Proxy object is a meta-programming tool used to intercept and redefine the default behavior of a target object. It acts as a layer of 'interception' between the outside world and the target object, allowing developers to filter or rewrite access to properties and methods. To make a Proxy work, operations must be performed on the Proxy instance itself, not the original target object.
    // Basic syntax: new Proxy(target, handler)
    var target = {};
    var handler = {};
    var proxy = new Proxy(target, handler);
  8. Overview of UML Class Diagram Relationships

    UML (Unified Modeling Language) class diagrams use various relationship types to represent the hierarchy and interaction between classes. These are categorized into horizontal and vertical relationships, with a strength gradient for vertical relationships: Dependency < Association < Aggregation < Composition.
  9. Overview of async functions in JavaScript

    Introduced in ES2017, async functions are syntactic sugar for Generator functions. They simplify asynchronous code by providing a built-in executor, clearer semantics (async/await instead of */yield), and returning a Promise instead of an Iterator. Unlike Generator functions, async functions execute immediately when called without needing a helper like the co module.
  10. Overview of GitHub Actions

    GitHub Actions is an event-driven platform used to automate, customize, and execute software development workflows (such as CI/CD) directly within a GitHub repository. It allows developers to create their own actions or reuse existing actions from the GitHub Marketplace or community collections like 'awesome-actions' to build complex automation pipelines.
  11. Overview of Binary Data Interfaces in JavaScript

    JavaScript provides three primary interfaces for operating on binary data, collectively known as binary arrays. These are essential for high-performance tasks like WebGL, where data must be exchanged in binary format rather than text to avoid costly conversions.

    1. ArrayBuffer: Represents a raw segment of memory containing binary data. It cannot be read or written to directly; it requires a 'view'.
    2. TypedArray: A set of views used to read/write simple, uniform data types (e.g., all 8-bit integers).
    3. DataView: A flexible view used to read/write complex or mixed data formats (e.g., a mix of 8-bit and 32-bit values) and allows for custom endianness.