ts-axios

Author: csxiaoyaojianxian

18-TypeScript/01-入门.html

@@ -7,6 +7,7 @@
 
 <!--
 $ npm install -g typescript
+$ yarn global add typescript
 $ tsc helloworld.ts
 
 安装typescript插件

18-TypeScript/02-1-变量申明.ts

@@ -0,0 +1,5 @@
+// var
+// let
+// const
+// 解构
+// 展开

18-TypeScript/02-dataType.ts

@@ -3,37 +3,73 @@
  * Array Enum
  * Any Void
  */
-// Boolean Number String
-var bool:boolean = false;
-var num:number = 10;
-var str:string = "sunshine";
-
-// Array Enum
+// Boolean
+let isDone: boolean = false
+// Number
+let decLiteral: number = 20
+let hexLiteral: number = 0x14
+let binaryLiteral: number = 0b10100
+let octalLiteral: number = 0o24
+// String
+var nameStr: string = 'csxiaoyao'
+let sentence: string = `Hello, my name is ${ name }. I'm ${ decLiteral + 1 } years old.`
+// Array 两种方式
 var list1:number[] = [1,2,3];
 var list2:Array<string> = ["csxiaoyao","sunshine"];
 
-enum Color {Red,Green=5,Blue=2,Purple};
-var colorName1:string = Color[1]; // undefined
-var colorName2:string = Color[5]; // Green
-var colorName3:string = Color[2]; // Blue
-var colorName4:string = Color[3]; // Purple
-var colorName5:string = Color[0]; // Red
-var c1:Color = Color.Green; // 5
-var c2:Color = Color.Red // 0
-var c3:Color = Color.Purple // 3
-
-// Any Void
-var notSure:any = 10;
+// 【 Tuple 】 元祖，允许表示一个已知元素数量和类型的数组，各元素的类型不必相同
+let x: [string, number]
+x = ['hello', 10] // OK
+
+// Enum
+enum Color { Red, Green=5, Blue=2, Purple };
+var colorName0: string = Color[0]; // Red
+var colorName1: string = Color[1]; // undefined
+var colorName2: string = Color[2]; // Blue
+var colorName3: string = Color[3]; // Purple
+var colorName5: string = Color[5]; // Green
+
+var c1: Color = Color.Green; // 5
+var c2: Color = Color.Red // 0
+var c3: Color = Color.Purple // 3
+
+// Any
+var notSure: any = 10;
 notSure = "Hello";
 notSure = false;
-var list:any[] = [10,"hello",false];
+var list: any[] = [10, "hello", false];
 
-function say():void {
+// Void
+function say(): void {
 	// body...
 }
-function tell():string {
+function tell(): string {
 	alert(list1[0]);
 	alert(list2[1]);
 	return "sunshine";
 }
-tell();
+tell();
+
+// null / undefined
+let u: undefined = undefined
+let n: null = null
+
+// never，返回never的函数必须存在无法达到的终点
+function error(message: string): never {
+	throw new Error(message)
+}
+function infiniteLoop(): never {
+	while (true) {
+	}
+}
+
+// object
+// object 表示非原始类型，即除 number，string，boolean，symbol，null或undefined 之外的类型
+declare function create(o: object | null): void
+create({ prop: 0 }) // OK
+create(null) // OK
+
+// 类型断言，两种方式
+let someValue: any = 'this is a string'
+let strLength1: number = (<string>someValue).length
+let strLength2: number = (someValue as string).length

18-TypeScript/axios/ts-axios-doc/.gitignore

@@ -0,0 +1,3 @@
+.idea/
+.DS_Store
+node_modules/

18-TypeScript/axios/ts-axios-doc/README.md

@@ -0,0 +1,25 @@
+# ts-axios-doc
+
+TypeScript 从零实现 axios 文档教材
+
+## 启动电子书
+
+首先 clone 本项目：
+
+```bash
+git clone https://git.imooc.com/coding-330/ts-axios-doc.git
+```
+
+进入 `ts-axios-doc` 目录后安装项目依赖：
+
+```bash
+npm install
+```
+
+安装依赖后运行电子书：
+
+```bash
+npm run dev
+```
+
+浏览器打开 `http://localhost:8080/ts-axios/` 即可。

18-TypeScript/axios/ts-axios-doc/docs/.vuepress/config.js

@@ -0,0 +1,65 @@
+module.exports = {
+  base: '/ts-axios/',
+  dest: 'dist',
+  title: 'TypeScript 从零实现 axios',
+  description: '学习使用 TypeScript 从零实现 axios 库',
+  themeConfig: {
+    editLinks: false,
+    docsDir: 'docs',
+    nav: [],
+    sidebar: [
+      {
+        title: '初识 TypeScript',
+        collapsable: false,
+        children: [
+          ['chapter1/', 'Introduction'],
+          'chapter1/install',
+          'chapter1/start'
+        ]
+      },
+      {
+        title: 'TypeScript 常用语法',
+        collapsable: false,
+        children: [
+          'chapter2/type',
+          'chapter2/declare',
+          'chapter2/interface',
+          'chapter2/class',
+          'chapter2/function',
+          'chapter2/generic',
+          'chapter2/inference',
+          'chapter2/advance'
+        ]
+      },
+      {
+        'title': 'ts-axios 项目初始化',
+        collapsable: false,
+        children: [
+          'chapter3/require',
+          'chapter3/init',
+          'chapter3/base'
+        ]
+      },
+      {
+        'title': 'ts-axios 基础功能实现',
+        collapsable: false,
+        children: [
+          'chapter4/url',
+          'chapter4/data',
+          'chapter4/header',
+          'chapter4/response',
+          'chapter4/response-header',
+          'chapter4/response-data'
+        ]
+      },
+      {
+        'title': 'ts-axios 异常情况处理',
+        collapsable: false,
+        children: [
+          'chapter5/error',
+          'chapter5/enhance'
+        ]
+      }
+    ]
+  }
+}

18-TypeScript/axios/ts-axios-doc/docs/.vuepress/public/interceptor.png

@@ -0,0 +1,6 @@
+---
+home: true
+heroImage: /ts-logo.png
+actionText: 开始学习 →
+actionLink: /chapter1/
+---

18-TypeScript/axios/ts-axios-doc/docs/.vuepress/public/ts-logo.png

@@ -0,0 +1,29 @@
+# 初识 TypeScript
+
+TypeScript 作为 JavaScript 语言的超级，它为 JavaScript 添加了可选择的类型标注，大大增强了代码的可读性和可维护性。同时，它提供最新和不断发展的 JavaScript 特性，能让我们建立更健壮的组件。
+
+## TypeScript 的特点
+
+TypeScript 主要有 3 大特点：
+
+- **始于JavaScript，归于JavaScript**
+
+TypeScript 可以编译出纯净、 简洁的 JavaScript 代码，并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3（或更高版本）的JavaScript 引擎中。
+
+- **强大的工具构建大型应用程序**
+
+类型允许 JavaScript 开发者在开发 JavaScript 应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构。
+
+类型是可选的，类型推断让一些类型的注释使你的代码的静态验证有很大的不同。类型让你定义软件组件之间的接口和洞察现有 JavaScript 库的行为。
+
+- **先进的 JavaScript**
+
+TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。
+
+这些特性为高可信应用程序开发时是可用的，但是会被编译成简洁的 ECMAScript3（或更新版本）的JavaScript。
+
+## 总结
+
+TypeScript 在社区的流行度越来越高，它非常适用于一些大型项目，也非常适用于一些基础库，极大地帮助我们提升了开发效率和体验。都 2019 年了，如果你还没有开始学习 TypeScript，那么你可能要落后了哟，所以还等什么，快来和我一起学习并使用 TypeScript 吧，来感受一下它为我们带来的奇妙体验。
+                                                                          
+