2023-01-30 Weekly Report

The first weekly report of 2023, this week mainly focuses on the release of TypeScript 5.0 Beta, as well as some other tech news.

January 23 - January 29#

This Week's Tech News#

TypeScript 5.0 Beta Released #

TypeScript has released the 5.0 beta version, which can be installed using the following command:

$ npm install typescript@beta

Here are a few important updates:

1. Decorators #

The EcmaScript decorator standard has entered Stage 3, which means decorators will become a standard feature of JavaScript.

In previous versions, TypeScript supported decorators but required manually enabling the experimentalDecorators compiler option. In version 5.0, decorators have become a formal feature and no longer require enabling the compiler option.

Here is a simple example of a decorator:

function loggedMethod(originalMethod: (...args: any[]) => any, context: ClassMethodDecoratorContext) {
  const methodName = String(context.name)

  return function(this: any, ...args: any[]) {
    console.log(`LOG: Entering method '${methodName}'.`)
    const result = originalMethod.call(this, ...args)
    console.log(`LOG: Exiting method '${methodName}'.`)
    return result
  }
}

class Person {
  name: string
  constructor(name: string) {
    this.name = name
  }

  @loggedMethod
  greet() {
    console.log(`Hello, my name is ${this.name}`)
  }
}

const p = new Person('Jack')
p.greet()

// Output:
//
//   LOG: Entering method.
//   Hello, my name is Jack.
//   LOG: Exiting method.

2. `const` Type Parameters #

TypeScript 5.0 supports const type parameters, which means you can use the const modifier to restrict the value of type parameters to constants.

const routes = <T>(routes: T[]) => {
  const addRedirect = (from: T, to: T) => {
    // ...
  }
  return {
    addRedirect,
  }
}

const router = routes(["/home", "/about", "/contact"])
router.addRedirect("/home", "/about") // Type is correct
router.addRedirect("/home", "/blog") // Type is correct

In the example above, router.addRedirect("/home", "/blog") will not throw an error because the type parameters for from and to are both string, but this code is incorrect because /blog is not a parameter of routes.

Using the const modifier can restrict the value of type parameters to constants, thus avoiding the error above.

const routes = <const T extends string>(routes: T[]) => {
  const addRedirect = (from: T, to: T) => {
    // ...
  }
  return {
    addRedirect,
  }
}

const router = routes(["/home", "/about", "/contact"])
router.addRedirect("/home", "/about") // Type is correct
router.addRedirect("/home", "/blog") // Type error: TS infers from and to types as "/home" | "/about" | "/contact"

3. All `Enum` Changed to `Union Enums`#

In 4.9:

enum LogLevel {
  DEBUG,
  WARN,
  ERROR,
}

const log = (level: LogLevel) => {
  // ...
}

log(LogLevel.DEBUG) // Type is correct
log(0) // Type is correct
log(123456) // Type is correct

In older versions of TypeScript, using enum as a type was unsafe; in the example above, log(123456) would not throw an error as long as it is a number.

In 5.0, all enums are Union enums, which means the values of enums can only be the members of the enum.

enum LogLevel {
  DEBUG,
  WARN,
  ERROR,
}

const log = (level: LogLevel) => {
  // ...
}

log(LogLevel.DEBUG) // Type is correct
log(0) // Type is correct
log(123456) // Type error

Additionally, note that:

enum LogLevel {
  DEBUG = 'debug',
  WARN = 'warn',
  ERROR = 'error',
}

const log = (level: LogLevel) => {
  // ...
}

log(LogLevel.DEBUG) // Type is correct
log('debug') // Type error: Note that numeric enums and string enums behave inconsistently

Editor's Note: The behavior of enums in TS is somewhat strange to accommodate JS, such as reverse mapping. There is much discussion online about whether to use enums; I personally prefer to avoid them if possible (in most cases, enums can be replaced with object as const and union types). If you need to use them, please be clear about your purpose and understand the potential issues.

4. Automatic Filling of `switch` Statement `case`#

The case statements can exhaust all possibilities and fill automatically.

5. Speed and Size Optimization#

TypeScript 5.0 has some performance optimizations, as shown in the comparison with 4.9 below:

Vite 4.1.0 beta Released#

Vite 4.1.0 beta has been released, mainly with some bug fixes.

Let's review the development history of Vite:

1. Vite 1#

The main goal of Vite 1 was to provide a fast development experience for Vue components, based on the browser's native ES Module implementation.

2. Vite 2#

Vite 2 completely refactored the code to support any framework, delegating all framework-specific support to plugins.
Vite 2 provided SSR support.
Supported older versions of browsers.

3. Vite 3#

Built a new documentation site using Vuepress.
Supported templates.
Reduced build size.
Migrated unit tests and E2E tests to Vitest.

At the same time, the Vite team decided to release at least one major version each year to align with Node.js's EOL.

4. Vite 4#

Upgraded to Rollup 3.
Used a new React plugin with SWC during development.
- @vitejs/plugin-react is a plugin that uses esbuild and Babel.
- @vitejs/plugin-react-swc is a new plugin that uses esbuild during the build process but uses SWC instead of Babel during development, resulting in faster cold starts and HMR speeds.

Meituan 2022 Technology Yearbook #

Click to view the front-end yearbook PDF

I personally enjoy the functional programming section, but this yearbook leans more towards theory, especially regarding Monads, which is quite mathematical. I prefer this Zhihu article that explains it in a more accessible way.

Since React became popular in the front-end, the functional programming philosophy it advocates has also gained traction, but few people delve deeply into the theoretical knowledge of functional programming. In fact, functional programming is very useful in the front-end, especially as we constantly deal with side effects.

Understanding functional programming allows us to consciously control side effects, reduce code bugs, and deepen our understanding of React, leading to better React code.

The Pens of 2022 on CodePen #

CodePen's popular codes of 2022. There are many interesting animations that can be added to your own projects.

Other News#

GitHub User Count Reaches 100 Million#

GitHub has added an animation on the web to celebrate reaching 100 million users.

You can click here to check it out.

ChatGpt API Coming Soon #

ChatGpt is a chatbot from OpenAI that can act as a personal assistant.

You can currently apply for the waitlist while waiting for it to open.

According to the information released on Twitter, we can know its pricing:

Additionally, there are rumors that Microsoft is considering integrating ChatGpt into Bing search. Perhaps this is an opportunity to overtake Google.

Several Projects Using OpenAI#

readpilot

Input a link, and AI helps you read the article and summarize it in a Q&A format.

This project is fully open source: https://github.com/forrestchang/readpilot

email-helper

Let AI help you write emails.

Open source: https://github.com/shengxinjing/email-helper

Some Thoughts#

Recently, more and more projects using GPT-3 are emerging, which feels like a sign of a new era. I saw an interesting saying:

Computers use binary language, humans use natural language, and the programmer's job is to use programming languages to translate human ideas to computers.

And GPT-3 allows these two languages to convert into each other. In this way, future computers could communicate with humans in natural language.

I recently read a book called "Heart of the Galaxy," where one branch of humanity consists of Iron Men, whose body cells are all nanobots. In a sense, such humans are close to being gods; with the aid of computers, they can achieve almost omniscience and omnipotence, and AI is the first step in this evolution.

Article Recommendations#

Open Source Software Guide #

An open-source software guide produced by GitHub, covering how to create, maintain, and participate in open-source projects, among other topics.

Tool Recommendations#

OSS Insight #

OSS Insight is an analysis tool for open-source projects that can analyze contributors, code volume, code quality, code duplication rate, code coverage, code security, and more.

It comes with some Collections, such as rankings of popular JS bundlers and popular UI libraries, and you can also create your own Collections.

YouGlish #

YouGlish is an English learning website that allows you to learn English through videos.

On YouGlish, you can input a piece of English text, and it will search for related videos on YouTube, highlighting the position of your input text in the video.

You can use this site to learn English pronunciation or grammar.

QuickReference #

Quick reference for various technology stack documentation.

vhs #

Record terminal command line operations in a scripted manner to generate GIF images.

You can see the specific effect in this demo recorded by mht-cli