2023.06.11前端周刊本周前端资讯：1. 一个可以让.wasm文件在不支持WebAssembly的js环境下运行的

本专栏（FE weekly news）文章争取每周一更，但由于精力有限，每篇周报的内容可能不多，欢迎大家关注

1. 一个WebAssembly的polyfill被发布

该polyfill通过解析.wasm文件，将每个WebAssembly函数翻译成js函数，从而使.wasm文件可以在不支持WebAssembly的js环境下（比如Apple的Lockdown模式）运行。

补充介绍：

什么是WebAssembly？

一句话来说，通过WebAssembly可以在浏览器中执行使用Go、C、C++、Rust等语言编写的代码，除此之外，WebAssembly还具有强大的沙盒功能，可以将部分代码与外部隔离，这使得开发者可以开放一些功能，让用户自定义部分代码，却不必担心运行这些不受控的代码。这里有一篇介绍WebAssembly的文章，感兴趣的话可以看看

2.TypeScript 5.1发布了

在这里大概介绍下本次的更新内容

breaking-changes

1. ES2020 and Node.js 14.17 as Minimum Runtime Requirements

在此之后TS需要在Node.js14.17+的版本才能正常运行，否则可能会报错或无法安装（因为新增了ECMAScript 2020引入的js功能）

2. Explicit `typeRoots` Disables Upward Walks for `node_modules/@types`

更新前：如果在tsconfig.json中typeRoots选项指定的路径下没有找到对应的类型定义，会向递归向上逐级在各层路径中寻找node_modules/@types文件夹

更新后：如果在typeRoots指定的路径下找不到类型定义，就会直接报错。

新特性

1.Easier Implicit Returns for `undefined`-Returning Functions

更新前：只有声明了返回值类型为void和any的函数（哪怕undefined也不行），才可以no return

// ❌ error! 
// A function whose declared type is neither 'void' nor 'any' must return a value.
function f4(): undefined {
    // no returns 
}

declare function takesFunction(f: () => undefined): undefined;
// ❌ error!
// Argument of type '() => void' is not assignable to parameter of type '() => undefined'. 
takesFunction(() => {
      // no returns 
});

更新后：返回值类型为undefined的函数支持no return了

// ✅ Works in TypeScript 5.1! 
function f4(): undefined {
    // no returns
}

// ✅ Works in TypeScript 5.1! 
takesFunction((): undefined => {
    // no returns
});

更进一步，如果我们使用了--noImplicitReturns选项，返回值类型为undefined的函数，无需每个路径（single code path）都有显式的return。（也就是说，可以都no return，也可以都有return，也可以部分path有）

// ✅ Works in TypeScript 5.1 under '--noImplicitReturns'! 
function f(): undefined {
    if (Math.random()) {
        // do some stuff...
        return;
    }
}

2. Unrelated Types for Getters and Setters

更新前：get访问器指定的类型必须是set访问器的子类型

interface Serializer {
    set value(v: string | number | boolean);
    get value(): string;
}
declare let box: Serializer;
// Allows writing a 'boolean' 
box.value = true; // Comes out as a 'string' 
console.log(box.value.toUpperCase());

更新后： get和set访问器的类型可以是完全不相关的类型

interface CSSStyleRule {
    // ... 
    /** Always reads as a `CSSStyleDeclaration` */ 
    get style(): CSSStyleDeclaration; 
    /** Can only write a `string` here. */ 
    set style(newValue: string); // ... 
}

3. Decoupled Type-Checking Between JSX Elements and JSX Tag Types

更新前： ts在对JSX元素校验时，仅null|JSX.Element类型能通过校验，这大大限制了用户对组件和外部组件库的使用，比如在React中，组件的类型可以为number | string | Iterable<ReactNode> | undefined等

更新后： TS会去查找你的代码或外部组件库中定义的 JSX.ElementType，以JSX.ElementType来为JSX元素做类型校验，若没有找到对应的定义，则以null|JSX.Element进行校验。

关于JSX.ElementType的定义，文档中也给出了一个例子

namespace JSX {
    export type ElementType = 
        // All the valid lowercase tags 
        keyof IntrinsicAttributes 
        // Function components 
        (props: any) => Element 
        // Class components new (props: any) => ElementClass;
    export interface IntrinsictAttributes extends /*...*/ {} 
    export type Element = /*...*/;
    export type ClassElement = /*...*/; 
}

4.Namespaced JSX Attributes

5. `typeRoots` Are Consulted In Module Resolution

这两个更新点我能力有限没看懂orz.....，感兴趣的读者可以看看原文

6. Linked Cursors for JSX Tags

TS现在支持JSX标签的“linked editing”，就像视频中展示的：你可以一次性编辑一对标签

要支持该功能，需要你在vscode里做一些配置，具体配置方法可以看原文，本文就不细说了。

7. Snippet Completions for `@param` JSDoc Tags

支持了JSDOC中@param标签的片段补全功能

除此之外还有一些优化点，感兴趣的可以去看原文。

2023.06.11前端周刊