From b79ebd9106b8f3c1fe4930a8d0586e4310a3ec05 Mon Sep 17 00:00:00 2001 From: jaywcjlove Date: Wed, 28 Sep 2022 03:02:36 +0000 Subject: [PATCH] doc: update `typescript`. 5234cdc02429cf727bc2bbb989bf8d52ff8e7932 --- docs/javascript.html | 299 +++++++++++++++++++++++++------------------ docs/typescript.html | 110 ++++++++++------ 2 files changed, 244 insertions(+), 165 deletions(-) diff --git a/docs/javascript.html b/docs/javascript.html index fdad7d4e..38167bbc 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -142,12 +142,12 @@

Math

const pi = Math.PI; // 3.141592653589793
-Math.round(4.4);  // = 4 - 数字四舍五入
-Math.round(4.5);  // = 5
-Math.pow(2,8);    // = 256 - 2 的 8 次方    
-Math.sqrt(49);    // = 7 - 平方根
-Math.abs(-3.14);  // = 3.14 - 绝对，正值
-Math.ceil(3.14);  // = 4 - 返回 >= 最小整数
+Math.round(4.4); // = 4 - 数字四舍五入
+Math.round(4.5); // = 5
+Math.pow(2,8);   // = 256 - 2 的 8 次方    
+Math.sqrt(49);   // = 7 - 平方根
+Math.abs(-3.14); // = 3.14 - 绝对，正值
+Math.ceil(3.14); // = 4 - 返回 >= 最小整数
 // = 3 - 返回 <= 最大整数
 Math.floor(3.99);       
 // = 0 - 正弦
@@ -364,16 +364,31 @@
 }

JavaScript 范围

-

范围

+

范围

function myFunction() {
-  
-  var pizzaName = "Margarita";
-  // 这里的代码可以使用 PizzaName
-  
-}
-// 这里的代码不能使用 PizzaName
+  var pizzaName = "Margarita";
+  // 这里的代码可以使用 PizzaName
+  
+}
+// ❌ PizzaName 不能在这里使用
-

Block Scoped Variables

+

{ } 块内声明的变量

+
{
+  let x = 2;
+}
+// ❌ x 不能在这里使用
+
+{
+  var x = 2;
+}
+// ✅ x 能在这里使用
+
+
var x = 2;       // Global scope
+let x = 2;       // Global scope
+const x = 2;       // Global scope
+
+

ES6 引入了两个重要的新 JavaScript 关键字：let 和 const。这两个关键字在 JavaScript 中提供了块作用域。

+

块作用域变量

const isLoggedIn = true;
 if (isLoggedIn == true) {
   const statusMessage = 'Logged in.';
@@ -388,7 +403,8 @@
 function printColor() {
   console.log(color);
 }
-printColor(); // => blue
+
+printColor(); // => blue

let vs var

for (let i = 0; i < 3; i++) {
@@ -559,12 +575,10 @@

Break

for (let i = 0; i < 99; i += 1) {
-  if (i > 5) {
-     break;
-  }
-  console.log(i)
-}
-// => 0 1 2 3 4 5
+  if (i > 5) break;
+  console.log(i)
+}
+// => 0 1 2 3 4 5

Continue

for (i = 0; i < 10; i++) {
@@ -984,11 +998,44 @@
 console.log(myMath.multiply(6, 2)); // 12
 console.log(myMath.duplicate(5))    // 10
-

JavaScript Promises

-

Promise 状态

+

JavaScript Promises

+

Promise

+

创建 promises

+
new Promise((resolve, reject) => {
+  if (ok) {
+    resolve(result)
+  } else {
+    reject(error)
+  }
+})
+
+

使用 promises

+
promise
+  .then((result) => { ··· })
+  .catch((error) => { ··· })
+
+

Promise 方法

+
Promise.all(···)
+Promise.race(···)
+Promise.reject(···)
+Promise.resolve(···)
+
+

执行器函数

+
const executorFn = (resolve, reject) => {
+  resolve('Resolved!');
+};
+const promise = new Promise(executorFn);
+
+

setTimeout()

+
const loginAlert = () => {
+  console.log('Login');
+};
+setTimeout(loginAlert, 6000);
+
+

Promise 状态

const promise = new Promise((resolve, reject) => {
   const res = true;
-  // An asynchronous operation.
+  // 一个异步操作。
   if (res) {
     resolve('Resolved!');
   }
@@ -996,19 +1043,10 @@
     reject(Error('Error'));
   }
 });
-promise.then((res) => console.log(res), (err) => console.error(err));
-
-

执行器函数

-
const executorFn = (resolve, reject) => {
-  resolve('Resolved!');
-};
-const promise = new Promise(executorFn);
-
-

setTimeout()

-
const loginAlert = () =>{
-  console.log('Login');
-};
-setTimeout(loginAlert, 6000);
+promise.then(
+  (res) => console.log(res),
+  (err) => console.error(err)
+);

.then() 方法

const promise = new Promise((resolve, reject) => {    
@@ -1016,26 +1054,30 @@
     resolve('Result');
   }, 200);
 });
-promise.then((res) => {
-  console.log(res);
-}, (err) => {
-  console.error(err);
-});
-
-

.catch() 方法

-
const promise = new Promise((resolve, reject) => {  
-  setTimeout(() => {
-    reject(Error('Promise Rejected Unconditionally.'));
-  }, 1000);
-});
-promise.then((res) => {
-  console.log(value);
-});
-promise.catch((err) => {
+
+promise.then((res) => {
+  console.log(res);
+}, (err) => {
   console.error(err);
 });
-

Promise.all()

+

.catch() 方法

+
const promise = new Promise(
+  (resolve, reject) => {  
+  setTimeout(() => {
+    reject(Error('Promise 无条件拒绝。'));
+  }, 1000);
+});
+
+promise.then((res) => {
+  console.log(value);
+});
+
+promise.catch((err) => {
+  console.error(err);
+});
+
+

Promise.all()

const promise1 = new Promise((resolve, reject) => {
   setTimeout(() => {
     resolve(3);
@@ -1051,7 +1093,24 @@
   console.log(res[1]);
 });
-

避免嵌套的 Promise 和 .then()

+

链接多个 .then()

+
const promise = new Promise(
+  resolve => 
+    setTimeout(() => resolve('dAlan'),100)
+);
+
+promise.then(res => {
+  return res === 'Alan' 
+    ? Promise.resolve('Hey Alan!')
+    : Promise.reject('Who are you?')
+})
+.then((res) => {
+  console.log(res)
+}, (err) => {
+  console.error(err)
+});
+
+

避免嵌套的 Promise 和 .then()

const promise = new Promise((resolve, reject) => {  
   setTimeout(() => {
     resolve('*');
@@ -1069,24 +1128,8 @@
 // 将它们链接在一起
 promise.then(twoStars).then(oneDot).then(print);
-

创建

-
const executorFn = (resolve, reject) => {
-  console.log('The executor function of the promise!');
-};
-const promise = new Promise(executorFn);
-
-

链接多个 .then()

-
const promise = new Promise(resolve => setTimeout(() => resolve('dAlan'), 100));
-promise.then(res => {
-  return res === 'Alan' ? Promise.resolve('Hey Alan!') : Promise.reject('Who are you?')
-}).then((res) => {
-  console.log(res)
-}, (err) => {
-  console.error(err)
-});
-

JavaScript Async-Await

-

异步

+

异步

function helloWorld() {
   return new Promise(resolve => {
     setTimeout(() => {
@@ -1094,16 +1137,21 @@
     }, 2000);
   });
 }
-const msg = async function() { // 异步函数表达式
-  const msg = await helloWorld();
-  console.log('Message:', msg);
-}
-const msg1 = async () => { // 异步箭头函数
-  const msg = await helloWorld();
-  console.log('Message:', msg);
-}
-msg(); // Message: Hello World! <-- 2 秒后
-msg1(); // Message: Hello World! <-- 2 秒后
+
+// 异步函数表达式
+const msg = async function() {
+  const msg = await helloWorld();
+  console.log('Message:', msg);
+}
+
+// 异步箭头函数
+const msg1 = async () => {
+  const msg = await helloWorld();
+  console.log('Message:', msg);
+}
+
+msg(); // Message: Hello World! <-- 2 秒后
+msg1(); // Message: Hello World! <-- 2 秒后

解决 Promises

let pro1 = Promise.resolve(5);
@@ -1131,13 +1179,15 @@
 msg(); // Message: Hello World! <-- 2 秒后

错误处理

-
let json = '{ "age": 30 }'; // 数据不完整
-try {
-  let user = JSON.parse(json); // <-- 没有错误
-  console.log( user.name ); // no name!
-} catch (e) {
-  console.error( "Invalid JSON data!" );
-}
+
// 数据不完整
+let json = '{ "age": 30 }';
+
+try {
+  let user = JSON.parse(json); // <-- 没有错误
+  console.log( user.name );    // no name!
+} catch (e) {
+  console.error( "Invalid JSON data!" );
+}

异步等待运算符

function helloWorld() {
@@ -1176,21 +1226,25 @@
 };
 req.send();
-

POST

-
const data = {
-  fish: 'Salmon',
-  weight: '1.5 KG',
-  units: 5
-};
-const xhr = new XMLHttpRequest();
-xhr.open('POST', '/inventory/add');
-xhr.responseType = 'json';
-xhr.send(JSON.stringify(data));
+

POST

+
const data = { weight: '1.5 KG' };
+const xhr = new XMLHttpRequest();
+// 初始化一个请求。
+xhr.open('POST', '/inventory/add');
+// 一个用于定义响应类型的枚举值
+xhr.responseType = 'json';
+// 发送请求以及数据。
+xhr.send(JSON.stringify(data));
+// 请求成功完成时触发。
 xhr.onload = () => {
   console.log(xhr.response);
-};
+}
+// 当 request 遭遇错误时触发。
+xhr.onerror = () => {
+  console.log(xhr.response);
+}
-

fetch api

+

fetch api

fetch(url, {
     method: 'POST',
     headers: {
@@ -1198,32 +1252,29 @@
       'apikey': apiKey
     },
     body: data
-  }).then(response => {
-    if (response.ok) {
-      return response.json();
-    }
-    throw new Error('Request failed!');
-  }, networkError => {
-    console.log(networkError.message)
-  })
-}
+}).then(response => {
+  if (response.ok) {
+    return response.json();
+  }
+  throw new Error('Request failed!');
+}, networkError => {
+  console.log(networkError.message)
+})

JSON 格式

fetch('url-that-returns-JSON')
-.then(response => response.json())
-.then(jsonResponse => {
-  console.log(jsonResponse);
-});
+  .then(response => response.json())
+  .then(jsonResponse => {
+    console.log(jsonResponse);
+  });

promise url 参数获取 API

fetch('url')
-.then(
-  response  => {
-    console.log(response);
-  },
- rejection => {
-    console.error(rejection.message);
-);
+  .then(response  => {
+    console.log(response);
+  }, rejection => {
+    console.error(rejection.message);
+  });

Fetch API 函数

fetch('https://api-xxx.com/endpoint', {
@@ -1231,16 +1282,16 @@
   body: JSON.stringify({id: "200"})
 }).then(response => {
   if(response.ok){
-	  return response.json();  
+    return response.json();  
   }
-	throw new Error('Request failed!');
+  throw new Error('Request failed!');
 }, networkError => {
   console.log(networkError.message);
 }).then(jsonResponse => {
   console.log(jsonResponse);
 })
-

async await 语法

+

async await 语法

const getSuggestions = async () => {
   const wordQuery = inputField.value;
   const endpoint = `${url}${queryParams}${wordQuery}`;
diff --git a/docs/typescript.html b/docs/typescript.html
index ad92ab88..deb5ba9c 100644
--- a/docs/typescript.html
+++ b/docs/typescript.html
@@ -19,10 +19,11 @@
   
  • TypeScript 官网
    •

    内置类型基元

    -
    boolean, string, number,
-undefined, null,
-any, unknown, never,
-void, bigint, symbol
+
    any, void,
+boolean, string, number,
+undefined, null,
+unknown, never,
+bigint, symbol

    常见的内置 JS 对象

    Date, Error,
@@ -258,7 +259,7 @@
 //   name: string
 // }
    -

    使用 as const 缩小类型

    +

    👇 使用 as const 缩小类型 👇

    const data2 = {
   name: "Zagreus"
 } as const
@@ -326,7 +327,24 @@
 
 res // SuccessResponse
    -

    Class

    +

    in 操作符

    +
    interface A {
+  x: number;
+}
+interface B {
+  y: string;
+}
+
+function doStuff(q: A | B) {
+  if ('x' in q) {
+    // q: A
+  } else {
+    // q: B
+  }
+}
+
    +

    操作符可以安全的检查一个对象上是否存在一个属性，它通常也被作为类型保护使用

    +

    Class

    创建类实例

    class ABC { ... }
 const abc = new ABC()
@@ -776,7 +794,7 @@

    as 运算符

    const foo = <foo>bar;
-// 不允许在 .tsx 👆 文件中使用尖括号类型断言。
+// ❌ 不允许在 .tsx 👆 文件中使用尖括号类型断言。
 
 const foo = bar as foo;
    @@ -833,9 +851,9 @@ side: JSX.Element | string; } -function Dog(prop: HomeProps): JSX.Element; -function Dog(prop: SideProps): JSX.Element; -function Dog(prop: CeProps): JSX.Element { +function Dog(prop:HomeProps): JSX.Element; +function Dog(prop:SideProps): JSX.Element; +function Dog(prop:CeProps): JSX.Element { // ... }     @@ -855,29 +873,10 @@ Menu.Item = MenuItem; Menu.SubMenu = SubMenu; -<Menu.Item /> // ok -<Menu.SubMenu /> // ok +<Menu.Item /> // ✅ ok +<Menu.SubMenu /> // ✅ ok     -

    类组件

    -
    class MyComponent {
-  render() {}
-}
-// 使用构造签名
-const myComponent = new MyComponent();
-// element class type => MyComponent
-// element instance type => { render: () => void }
-
-function MyFactoryFunction() {
-  return {
-    render: () => {},
-  };
-}
-// 使用调用签名
-const myComponent = MyFactoryFunction();
-// element class type => MyFactoryFunction
-// element instance type => { render: () => void }
-
    -

    元素实例类型很有趣，因为它必须可以分配给JSX。ElementClass，否则将导致错误。默认情况下，JSX。ElementClass 是 {}，但可以对其进行扩展，以将JSX的使用限制为仅限于符合适当接口的类型。

    +

    有效组件

    declare namespace JSX {
   interface ElementClass {
     render: any;
@@ -889,15 +888,44 @@
 function MyFactoryFunction() {
   return { render: () => {} };
 }
-<MyComponent />; // ok
-<MyFactoryFunction />; // ok
-
-class NotAValidComponent {}
-function NotAValidFactoryFunction() {
-  return {};
-}
-<NotAValidComponent />; // ❌ error
-<NotAValidFactoryFunction />; // ❌ error
+<MyComponent />;       // ✅ 有效类组件
+<MyFactoryFunction />; // ✅ 有效函数组件
+
    +

    元素实例类型必须可以分配给 JSX.ElementClass，否则将导致错误。

    +
    class NotAValidComponent {}
+function NotAValidFactoryFunction() {
+  return {};
+}
+<NotAValidComponent />; // ❌ error
+<NotAValidFactoryFunction />; // ❌ error
+
    +

    默认情况下，JSX.ElementClass 是 {}，但可以对其进行扩展，以将 JSX 的使用限制为仅限于符合适当接口的类型。

    +

    类组件

    +
    type Props = {
+  header: React.ReactNode;
+  body: React.ReactNode;
+};
+
+class MyComponent extends React.Component<Props, {}> {
+  render() {
+    return (
+      <div>
+        {this.props.header}
+        {this.props.body}
+      </div>
+    );
+  }
+}
+
+<MyComponent header={<h1>Header</h1>} body={<i>body</i>} />
+
    +

    泛型组件

    +
    // 一个泛型组件
+type SelectProps<T> = { items: T[] };
+class Select<T> extends React.Component<SelectProps<T>, any> {}
+
+// 使用
+const Form = () => <Select<string> items={['a', 'b']} />;