TypeScript: The smooth transition from JavaScript to TypeScript is like upgrading your Lego building process!
“Do what you can, use what you have” – this is one of my mottos. This sentence also reflects part of the growth mindset. Most of us front-end or JavaScript developers have already started or completely migrated to TypeScript. But some people may still have difficulty understanding the concepts, or switching their mindset from JavaScript to TypeScript. To solve this problem, we're going to use one of my favorite tools: Legos. Let’s start here: “Think of JavaScript as a basic set of Lego bricks that you can build freely; TypeScript is the same set of bricks, but with detailed instructions and quality control checks.” For a more in-depth discussion of TypeScript, you can refer to here , here , and this video . This guide aims to show how each JavaScript concept translates to TypeScript, using Lego analogies to help you understand the concepts more easily.
Variable scope refers to the context in which variables can be accessed and used in a program. There are two main types of scope: local scope and global scope. A variable declared outside any function is in global scope, which means it can be accessed and modified anywhere in the code. On the other hand, variables declared inside a function are in local scope and can only be accessed within that function. JavaScript uses the var, let, and const keywords to declare variables, and each keyword has a different impact on the scope. Variables declared with let and const are block scoped, which means they can only be accessed within the nearest enclosing block {}. In contrast, var is function-scoped, making it available throughout the function in which it is declared. A clear understanding of variable scope helps avoid problems such as variable name conflicts and unexpected side effects in JavaScript programs.
Hoisting is the act of moving variable and function declarations to the top of their containing scope before the code is executed (compilation phase). This means that variables and functions can be used before they are declared. Function declarations are fully hoisted, allowing them to be called even before they are defined in the code. However, variables declared with var are hoisted but not initialized to their initial value, so accessing them before assignment will result in undefined. Variables declared with let and const are also hoisted but not initialized, which would result in ReferenceError if accessed before declaration. Understanding promotion helps developers avoid common pitfalls by constructing variable and function declarations correctly.
Think of scopes as different Lego rooms:
<code class="language-javascript">// 全局搭建房间
const globalBricks = "每个人都可以使用这些";
function buildSection() {
// 个人搭建桌
var tableBricks = "仅供此搭建者使用";
if (true) {
// 特定区域
let sectionBricks = "仅供此部分使用";
}
}</code><code class="language-typescript">// 为我们的搭建房间添加类型安全
type BrickType = "regular" | "special" | "rare";
const globalBricks: BrickType = "regular";
function buildSection(): void {
// TypeScript确保我们只使用有效的积木类型
const tableBricks: BrickType = "special";
if (true) {
// TypeScript阻止在此块之外使用sectionBricks
let sectionBricks: BrickType = "rare";
}
}
// 真实世界的例子：配置管理
interface AppConfig {
readonly apiKey: string;
environment: "dev" | "prod";
features: Set<string>;
}
const config: AppConfig = {
apiKey: "secret",
environment: "dev",
features: new Set(["feature1", "feature2"])
};</code>
Functions are reusable blocks of code designed to perform a specific task. This enhances modularity and code efficiency. They can be defined using the function keyword, followed by a name, brackets () and a block of code enclosed in curly brackets {}. Arguments can be passed into a function within parentheses or braces, which act as placeholders for the values provided when the function is called. JavaScript also supports anonymous functions (without names) and arrow functions (providing a cleaner syntax). Functions can use the return statement to return a value, or perform operations that do not return a value. Additionally, functions in JavaScript are first-class objects, which means they can be assigned to variables, passed as arguments, and returned from other functions, thus enabling the functional programming pattern.
Closures are a powerful feature that allow a function to remember and access its lexical scope even if the function executes outside that scope. Closures can be created when a function is defined inside a function and references variables in the outer function. Even after the outer function has finished executing, the inner function can still access these variables. This feature is useful for data encapsulation and maintaining state in environments such as event handlers or callbacks. Closures support patterns such as private variables, where functions can expose specific behavior while hiding implementation details.
<code class="language-javascript">function buildHouse(floors, color) {
const foundation = "concrete";
return function addRoof(roofStyle) {
return `${color} house with ${floors} floors and ${roofStyle} roof on ${foundation}`;
};
}</code><code class="language-typescript">// 带有类型的基本函数
interface House {
floors: number;
color: string;
roofStyle: string;
foundation: string;
}
// 为我们的搭建者添加类型安全
function buildHouse(
floors: number,
color: string
): (roofStyle: string) => House {
const foundation = "concrete";
return (roofStyle: string): House => ({
floors,
color,
roofStyle,
foundation
});
}
// 真实世界的例子：组件工厂
interface ComponentProps {
id: string;
style?: React.CSSProperties;
children?: React.ReactNode;
}
function createComponent<T extends ComponentProps>(
baseProps: T
): (additionalProps: Partial<T>) => React.FC<T> {
return (additionalProps) => {
// 组件实现
return (props) => <div></div>;
};
}</code>
Objects in JavaScript are basic data structures that serve as containers for related data and functionality. They consist of key-value pairs, where each key (property) maps to a value, which can be any valid JavaScript type, including functions (methods). Objects can be created in several ways:
const obj = {}
new Object()
Object.create()MethodThe prototype system is JavaScript’s built-in inheritance mechanism. Every object has an internal link to another object, called its prototype. When trying to access a property that doesn't exist on an object, JavaScript automatically looks for it in its prototype chain. This object chain continues until it reaches an object with the null prototype, usually Object.prototype. Understanding prototypes is critical to:
Think of objects and prototypes like this:
<code class="language-javascript">// 全局搭建房间
const globalBricks = "每个人都可以使用这些";
function buildSection() {
// 个人搭建桌
var tableBricks = "仅供此搭建者使用";
if (true) {
// 特定区域
let sectionBricks = "仅供此部分使用";
}
}</code><code class="language-typescript">// 为我们的搭建房间添加类型安全
type BrickType = "regular" | "special" | "rare";
const globalBricks: BrickType = "regular";
function buildSection(): void {
// TypeScript确保我们只使用有效的积木类型
const tableBricks: BrickType = "special";
if (true) {
// TypeScript阻止在此块之外使用sectionBricks
let sectionBricks: BrickType = "rare";
}
}
// 真实世界的例子：配置管理
interface AppConfig {
readonly apiKey: string;
environment: "dev" | "prod";
features: Set<string>;
}
const config: AppConfig = {
apiKey: "secret",
environment: "dev",
features: new Set(["feature1", "feature2"])
};</code>
Asynchronous functions are a special function type in JavaScript that provide an elegant way to handle asynchronous operations. When declared with the async keyword, these functions automatically return a Promise and enable the use of the await keyword in their body. The await operator pauses the execution of a function until the Promise is resolved or rejected, allowing asynchronous code to be written in a more synchronous and readable style. This syntax effectively reduces the complexity of callbacks and eliminates the need for nested Promise chains. For example, in async function fetchData() { const response = await fetch(url); }, the function waits for the fetch operation to complete before continuing execution, making the behavior of the code more predictable while ensuring that the main thread remains unblocked. This pattern is particularly useful when dealing with multiple asynchronous operations that depend on each other, because it allows developers to write code that clearly expresses the order of operations without sacrificing performance.
Promise represents a value that may be available now, available in the future, or never available. It is an object with three possible states: Pending, Completed, or Rejected. It is used to handle asynchronous operations. Promises have methods such as .then(), .catch() and .finally() for chaining actions based on the result. This makes them a powerful alternative to nested callbacks, improving code readability and error handling.
<code class="language-javascript">// 全局搭建房间
const globalBricks = "每个人都可以使用这些";
function buildSection() {
// 个人搭建桌
var tableBricks = "仅供此搭建者使用";
if (true) {
// 特定区域
let sectionBricks = "仅供此部分使用";
}
}</code><code class="language-typescript">// 为我们的搭建房间添加类型安全
type BrickType = "regular" | "special" | "rare";
const globalBricks: BrickType = "regular";
function buildSection(): void {
// TypeScript确保我们只使用有效的积木类型
const tableBricks: BrickType = "special";
if (true) {
// TypeScript阻止在此块之外使用sectionBricks
let sectionBricks: BrickType = "rare";
}
}
// 真实世界的例子：配置管理
interface AppConfig {
readonly apiKey: string;
environment: "dev" | "prod";
features: Set<string>;
}
const config: AppConfig = {
apiKey: "secret",
environment: "dev",
features: new Set(["feature1", "feature2"])
};</code>
This is a neat way to extract values from an array or properties from an object into different variables. Array destructuring uses square brackets [], while object destructuring uses curly brackets {}. This syntax reduces the need for duplicate code by unpacking values directly into variables, making it easier to handle complex data structures. For example, const [a, b] = [1, 2] assigns 1 to a and 2 to b, while const { name } = person extracts the name attribute from the person object.
The spread operator is represented by three dots (...). It allows iterable objects such as arrays or objects to be extended where multiple elements or key-value pairs are required. It can be used to copy, combine, or pass array elements as function arguments. For example, const arr = [1, 2, ...anotherArray].
Optional chains are represented by ?.. It provides a safe way to access deeply nested object properties without causing errors when the property is undefined or null. If the reference is nullish, it short-circuits and returns undefined immediately. For example, user?.address?.street checks if user and address exist before accessing street. This syntax prevents runtime errors and makes working with nested data structures cleaner and less error-prone, especially in APIs or data that relies on user input.
<code class="language-javascript">function buildHouse(floors, color) {
const foundation = "concrete";
return function addRoof(roofStyle) {
return `${color} house with ${floors} floors and ${roofStyle} roof on ${foundation}`;
};
}</code><code class="language-typescript">// 带有类型的基本函数
interface House {
floors: number;
color: string;
roofStyle: string;
foundation: string;
}
// 为我们的搭建者添加类型安全
function buildHouse(
floors: number,
color: string
): (roofStyle: string) => House {
const foundation = "concrete";
return (roofStyle: string): House => ({
floors,
color,
roofStyle,
foundation
});
}
// 真实世界的例子：组件工厂
interface ComponentProps {
id: string;
style?: React.CSSProperties;
children?: React.ReactNode;
}
function createComponent<T extends ComponentProps>(
baseProps: T
): (additionalProps: Partial<T>) => React.FC<T> {
return (additionalProps) => {
// 组件实现
return (props) => <div></div>;
};
}</code>
The transition from JavaScript to TypeScript is like upgrading your Lego building process:
JavaScript (basic construction):
TypeScript (professionally built):
Key transition tips:
Remember: TypeScript builds on your JavaScript knowledge, adding security and clarity, rather than changing the fundamental building process. That said, my advice is still... learn JavaScript first, then learn TypeScript.
The above is the detailed content of Building with TypeScript: A Lego-Based Guide. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
