[翻译] Announcing TypeScript 5.1 ​

// ✅ fine - we inferred that 'f1' returns 'void' 
function f1() { 
	// no returns 
} 

// ✅ fine - 'void' doesn't need a return statement 
function f2(): void { 
	// no returns 
} 

// ✅ fine - 'any' doesn't need a return statement 
function f3(): any { 
	// no returns 
} 

// ❌ 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
});

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

// ❌ error!
// Argument of type '() => void' is not assignable to parameter of type '() => undefined'.
takesFunction(() => {
    return;
});

// ✅ works
takesFunction(() => {
    return undefined;
});

// ✅ works
takesFunction((): undefined => {
    return;
});

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

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

// ✅ Works in TypeScript 5.1!
takesFunction(function f() {
    //                 ^ return type is undefined
    // no returns
});

// ✅ Works in TypeScript 5.1!
takesFunction(function f() {
    //                 ^ return type is undefined
    return;
});

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

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());

box.value = box.value; // `string` extends `string | number | boolean`

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

class SafeBox { 
	#value: string | undefined; 
	
	// Only accepts strings! 
	set value(newValue: string) { } 
	
	// Must check for 'undefined'! 
	get value(): string | undefined { 
		return this.#value; 
	} 
}

import * as React from "react";

async function Foo() {
    return <div></div>;
}

let element = <Foo />;
//             ~~~
// 'Foo' cannot be used as a JSX component.
//   Its return type 'Promise<Element>' is not a valid JSX element.

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 = /*...*/;
}

import * as React from "react";

// Both of these are equivalent:
const x = <Foo a:b="hello" />;
const y = <Foo a : b="hello" />;

interface FooProps {
	"a:b": string;
}

function Foo(props: FooProps) {
	return <div>{props["a:b"]}</div>;
}

// In some library's code or in an augmentation of that library: 
namespace JSX { 
	interface IntrinsicElements { 
		["a:b"]: { prop: string }; 
	}
}

// In our code: 
let x = <a:b prop="hello!" />;