typescript 代码片段(with javascript)

typescript 代码片段(with javascript)
type DeepPartial<T> = T extends object
  ? {
      [P in keyof T]?: DeepPartial<T[P]>;
    }
  : T;
export type LocaleType = DeepPartial<typeof cn>;
export type RequiredLocaleType = typeof cn;

DeepPartial<T> 是一个泛型类型，它接受一个类型 T 作为参数。它的作用是将 T 类型的所有属性变为可选，并且递归地应用到嵌套对象上。

T extends object ? { [P in keyof T]?: DeepPartial<T[P]>; } : T; 这是一个条件类型（conditional type）的定义。它检查 T 是否是一个对象类型，如果是，则将对象的每个属性变为可选属性，并递归地应用 DeepPartial 类型到每个属性的值上；如果不是对象类型，则返回 T 自身。

export type LocaleType = DeepPartial<typeof cn>; 定义了一个类型别名 LocaleType，它使用 DeepPartial 类型将 cn 的类型（typeof cn）进行处理。这意味着 LocaleType 将拥有与 cn 类型相同的结构，但所有的属性都是可选的。

export type RequiredLocaleType = typeof cn; 定义了另一个类型别名 RequiredLocaleType，它直接将 cn 的类型（typeof cn）赋值给 RequiredLocaleType。这意味着 RequiredLocaleType 将拥有与 cn 类型相同的结构，并且所有属性都是必需的（非可选的）。

数组切片：let slice = fruits.slice(start, end);

Math.ceil() Math.floor() Math.round

这么写好吗……

function MyComponent() {
  const numOfElements = 5;
 
  return (
    <div>
      {Array.from({length: numOfElements}, (_, index) => (
        <div key={index}>This is item {index + 1}</div>
      ))}
    </div>
  );
}

Array.from()方法接受第二个参数，这个参数是一个映射函数（和map()函数的参数类似），它可以应用到新数组的每个元素上

export type { LocaleType, RequiredLocaleType } from "./cn";

如果键值不是固定的，你可以使用索引签名来在 TypeScript 中定义这种类型。索引签名表示对象可能有许多其他属性，并且它们的名称是任意的，但它们的类型必须是一致的。这对于定义如查找表、字典等结构非常有用。

type PriceMap = {
    [key: string]: number;
}

ES6模块是JavaScript在ES6（ECMAScript 2015）规范中引入的官方模块系统。之前，JavaScript并没有官方的模块系统，开发者通常使用CommonJS（Node.js使用的模块系统，如 module.exports 和 require()）或AMD等模块系统。

以下是ES6模块和CommonJS模块的一些主要区别：

  1. 静态与动态：ES6模块是静态的，这意味着你不能动态地导入或导出模块。这使得在编译时就能确定模块的依赖关系，有利于性能优化。例如，静态导入使得tree shaking（摇树优化） ↗成为可能，这是一种去除未使用代码的技术。相比之下，CommonJS模块是动态的，这意味着你可以在运行时导入或导出模块。
  2. 语法：ES6模块使用 import 和 export 关键字，而CommonJS模块使用 require() 和 module.exports。
  3. 作用域：在ES6模块中，顶级作用域是模块作用域，这意味着定义在模块内部的变量、函数和类在模块外部是不可见的，除非显式地导出它们。相比之下，CommonJS模块的顶级作用域是全局作用域。
  4. 兼容性：由于ES6模块是JavaScript的官方标准，因此它在现代浏览器中具有更好的原生支持。然而，CommonJS模块由于Node.js的广泛使用，仍然在服务器端JavaScript环境中广泛使用。

这就是ES6模块和CommonJS模块的一些主要区别。正如你所见，两者都各有优势，所使用的模块系统取决于你的具体需求和目标环境。

function sayHello(){
  alert('Hello I am Webpack');
}
 
export { sayHello };
// module.exports = sayHello

对于焦点离开文本框的事件，你可以使用 onBlur 事件

对于用户在文本框输入完成按回车的事件，你可以使用 onKeyDown 事件并检查按键是否是回车键

如果要判断数组中只要有一个元素满足条件就返回 true,可以使用 Array.prototype.some() 方法:

const array = [1, 2, 3];
 
const hasEvenNumber = array.some(num => num % 2 === 0);
// hasEvenNumber = true

Array.prototype.some() 会遍历数组中的所有元素,如果有任一元素满足测试条件就会返回 true。

与 some() 相对的是 Array.prototype.every(),它要求所有元素都满足条件才返回 true:

const allEven = array.every(num => num % 2 === 0);
// allEven = false

所以对于只要有一个满足条件的场景,应该使用 some() 方法。

另外,如果需要找到第一个满足条件的元素,可以使用 find() 方法:

const found = array.find(num => num % 2 === 0);
// found = 2

综上,常见的判断数组元素的方法有:

  • some() - 只要有一个元素满足条件就返回 true
  • every() - 所有元素都满足条件才返回 true
  • find() - 返回第一个满足条件的元素

flatMap 和 map 都是数组的方法，它们的主要区别在于处理方法返回的结果。

  • map 方法会使用你提供的函数（我们称之为映射函数）对数组的每个元素进行处理，然后返回一个新的数组，这个数组包含的是映射函数处理每个元素后的结果。如果映射函数返回的是数组，那么 map 方法返回的新数组的元素也会是数组。
  • flatMap 方法类似于 map，但是它有一个额外的步骤：扁平化结果。也就是说，如果映射函数返回的是数组，flatMap 会将这些数组合并为一个数组，然后返回。这就是为什么它被称为 "flatMap"：它先 "映射"（map），然后 "扁平化"（flatten）。
const arr = [1, 2, 3];
 
const resultWithMap = arr.map(x => [x, x * 2]);
console.log(resultWithMap); // [[1, 2], [2, 4], [3, 6]]
 
const resultWithFlatMap = arr.flatMap(x => [x, x * 2]);
console.log(resultWithFlatMap); // [1, 2, 2, 4, 3, 6]

& 符号用于表示一个交叉类型 (Intersection Types)。

交叉类型是将多个类型合并为一个类型。这意味着你可以将多个类型合并，从而得到一个包含所有类型所需属性的类型。

有两个类型 A 和 B

type A = {
    a: number;
};

type B = {
    b: string;
};

type C = A & B;

C同时拥有类型 A 和 B 的所有属性

const connectionString = process.env.DATABASE_URL
 
if (!connectionString) {
  throw new Error("DATABASE_URL is not defined");
}
 
const client = postgres(connectionString)

防止undefined

see all posts

Success!

Your comments has sent successfully(or not), reload this page to see it