website·Indexed 29 days ago
https://yuan-yy.github.io/vuepress2.4/A comprehensive collection of technical notes and tutorials covering TypeScript basics and advanced features (generics, declaration merging, type inference), refactoring techniques (inheritance, extracting functions), and frontend development with Vue, CSS, and JavaScript.
$route object contains information about the current route. You can watch this object to trigger logic when the route changes.watch: {
'$route'(to, from) {
// Respond to route changes
console.log('Current route info:', to);
console.log('Previous route info:', from);
}
}// Recommended syntax (required in TSX/React)
const value = someValue as TargetType;
// Alternative syntax (not recommended for TSX)
const value = <TargetType>someValue;<meta> tags within the HTML head to provide metadata about the page for search engines and browsers.<!-- Describe page keywords -->
<meta name="keywords" content="keyword1, keyword2, keyword3">
<!-- Describe the page content -->
<meta name="description" content="HTML examples">Chrome uses a multi-process architecture to improve stability and security. Opening a single page typically requires at least four processes:
TypeScript is a statically typed, weakly typed language that adds a type system to JavaScript. Key characteristics include:
The JavaScript engine uses a Call Stack (a LIFO - Last In, First Out structure) to manage execution contexts.
Execution contexts are created and pushed onto the stack in these scenarios:
eval() calls: Compiles the code and creates a new execution context.If the number of pushed contexts exceeds the stack limit, a 'Stack Overflow' error occurs.
Refactoring serves as a tool to achieve several critical software engineering goals:
Use declare statements to tell the TypeScript compiler about variables that exist in the global scope (e.g., loaded via a <script> tag).
declare var or declare let: Defines a global variable that can be reassigned.declare const: Defines a global variable as a constant that cannot be reassigned.Note: Declaration statements must only define the type; they cannot contain the actual implementation.
// Allow reassignment
declare let jQuery: (selector: string) => any;
// Prevent reassignment (Recommended for most global libs)
declare const jQuery: (selector: string) => any;Convert an internal object from a reference object (where properties are updated in place) to a value object (where the entire object is replaced upon change). Value objects are immutable, making them easier to reason about, safer to pass around, and ideal for distributed or concurrent systems.
Steps to implement:
equals method) instead of relying on reference equality.// 1. Make the class immutable
class TelephoneNumber {
constructor(areaCode, number) {
this._areaCode = areaCode;
this._number = number;
}
get areaCode() { return this._areaCode; }
get number() { return this._number; }
// 2. Implement value-based equality
equals(other) {
if (!(other instanceof TelephoneNumber)) return false;
return this.areaCode === other.areaCode && this.number === other.number;
}
}
class Person {
constructor() {
this._telephoneNumber = new TelephoneNumber();
}
// 3. Replace the whole object instead of mutating properties
set officeAreaCode(arg) {
this._telephoneNumber = new TelephoneNumber(arg, this.officeNumber);
}
}
TypeScript improves code readability and maintainability by providing a type system that serves as living documentation. Key advantages include:
A web page requires at least four types of processes to function in Chrome: