From e16eaf83744adc7780e04459e2127c18c4171ccb Mon Sep 17 00:00:00 2001 From: MYW Date: Fri, 5 Aug 2022 22:55:33 +0800 Subject: [PATCH] code --- 01.TS常用类型/01.原始类型.ts | 11 ----- 01.TS常用类型/02.数组类型.ts | 4 -- 01.TS常用类型/03.联合类型.ts | 6 --- 01.TS常用类型/04.类型别名.ts | 5 --- 01.TS常用类型/05.函数类型.ts | 22 ---------- 01.TS常用类型/06.void类型.ts | 6 --- 01.TS常用类型/07.函数可选参数.ts | 11 ----- 01.TS常用类型/08.对象类型.ts | 21 --------- 01.TS常用类型/09.对象可选属性.ts | 7 --- 01.TS常用类型/10.接口.ts | 32 -------------- 01.TS常用类型/11.接口继承.ts | 14 ------ 01.TS常用类型/12.元组.ts | 4 -- 01.TS常用类型/13.类型推论.ts | 10 ----- 01.TS常用类型/14..枚举类型.ts | 20 --------- 01.TS常用类型/15.字符串枚举.ts | 12 ----- 01.TS常用类型/16.typeof运算符.ts | 14 ------ .../01.class类/01.class基本使用.ts | 12 ----- .../01.class类/02.class的构造函数.ts | 13 ------ .../01.class类/03.class实例方法.ts | 15 ------- .../01.class类/04.class继承(extends).ts | 23 ---------- .../01.class类/05.class继承(implements).ts | 18 -------- ...6.class类的可见性修饰符(public).ts | 18 -------- .../07.class类可见修饰符(protected).ts | 28 ------------ .../08.class类可见性修饰符(private).ts | 32 -------------- .../01.class类/09.readonly只读修饰符.ts | 27 ------------ .../01.对象之间的类型兼容性.ts | 23 ---------- ...类型兼容性(参数个数和类型).ts | 44 ------------------- ....函数类型兼容性(返回值类型).ts | 20 --------- .../02.类型兼容性/04.交叉类型.ts | 21 --------- 02.TS高级类型/03.泛型/01.泛型.ts | 17 ------- .../03.泛型/02.泛型约束.ts | 32 -------------- .../03.泛型/03.多个泛型变量情况.ts | 16 ------- .../03.泛型/04.泛型接口.ts | 14 ------ 02.TS高级类型/03.泛型/05.泛型类.ts | 24 ---------- .../06.泛型工具类型(Partial).ts | 18 -------- .../07.泛型工具类型(Readonly).ts | 17 ------- .../03.泛型/08.泛型工具类型(Pick).ts | 10 ----- .../09.泛型工具类型(Record).ts | 16 ------- 02.TS高级类型/04.索引签名类型.ts | 21 --------- 02.TS高级类型/05.映射类型.ts | 20 --------- 02.TS高级类型/06.索引查询类型.ts | 21 --------- .../01.函数组件的类型.tsx | 26 ----------- 03.React中使用TS/02.函数默认值.tsx | 27 ------------ .../03.事件绑定和事件对象.tsx | 37 ---------------- 03.React中使用TS/04.组件类型.tsx | 23 ---------- 03.React中使用TS/05.组件的属性.tsx | 27 ------------ .../06.组件状态和事件.tsx | 33 -------------- 04.任务列表案例/todo_ts | 1 - 48 files changed, 893 deletions(-) delete mode 100644 01.TS常用类型/01.原始类型.ts delete mode 100644 01.TS常用类型/02.数组类型.ts delete mode 100644 01.TS常用类型/03.联合类型.ts delete mode 100644 01.TS常用类型/04.类型别名.ts delete mode 100644 01.TS常用类型/05.函数类型.ts delete mode 100644 01.TS常用类型/06.void类型.ts delete mode 100644 01.TS常用类型/07.函数可选参数.ts delete mode 100644 01.TS常用类型/08.对象类型.ts delete mode 100644 01.TS常用类型/09.对象可选属性.ts delete mode 100644 01.TS常用类型/10.接口.ts delete mode 100644 01.TS常用类型/11.接口继承.ts delete mode 100644 01.TS常用类型/12.元组.ts delete mode 100644 01.TS常用类型/13.类型推论.ts delete mode 100644 01.TS常用类型/14..枚举类型.ts delete mode 100644 01.TS常用类型/15.字符串枚举.ts delete mode 100644 01.TS常用类型/16.typeof运算符.ts delete mode 100644 02.TS高级类型/01.class类/01.class基本使用.ts delete mode 100644 02.TS高级类型/01.class类/02.class的构造函数.ts delete mode 100644 02.TS高级类型/01.class类/03.class实例方法.ts delete mode 100644 02.TS高级类型/01.class类/04.class继承(extends).ts delete mode 100644 02.TS高级类型/01.class类/05.class继承(implements).ts delete mode 100644 02.TS高级类型/01.class类/06.class类的可见性修饰符(public).ts delete mode 100644 02.TS高级类型/01.class类/07.class类可见修饰符(protected).ts delete mode 100644 02.TS高级类型/01.class类/08.class类可见性修饰符(private).ts delete mode 100644 02.TS高级类型/01.class类/09.readonly只读修饰符.ts delete mode 100644 02.TS高级类型/02.类型兼容性/01.对象之间的类型兼容性.ts delete mode 100644 02.TS高级类型/02.类型兼容性/02.函数类型兼容性(参数个数和类型).ts delete mode 100644 02.TS高级类型/02.类型兼容性/03.函数类型兼容性(返回值类型).ts delete mode 100644 02.TS高级类型/02.类型兼容性/04.交叉类型.ts delete mode 100644 02.TS高级类型/03.泛型/01.泛型.ts delete mode 100644 02.TS高级类型/03.泛型/02.泛型约束.ts delete mode 100644 02.TS高级类型/03.泛型/03.多个泛型变量情况.ts delete mode 100644 02.TS高级类型/03.泛型/04.泛型接口.ts delete mode 100644 02.TS高级类型/03.泛型/05.泛型类.ts delete mode 100644 02.TS高级类型/03.泛型/06.泛型工具类型(Partial).ts delete mode 100644 02.TS高级类型/03.泛型/07.泛型工具类型(Readonly).ts delete mode 100644 02.TS高级类型/03.泛型/08.泛型工具类型(Pick).ts delete mode 100644 02.TS高级类型/03.泛型/09.泛型工具类型(Record).ts delete mode 100644 02.TS高级类型/04.索引签名类型.ts delete mode 100644 02.TS高级类型/05.映射类型.ts delete mode 100644 02.TS高级类型/06.索引查询类型.ts delete mode 100644 03.React中使用TS/01.函数组件的类型.tsx delete mode 100644 03.React中使用TS/02.函数默认值.tsx delete mode 100644 03.React中使用TS/03.事件绑定和事件对象.tsx delete mode 100644 03.React中使用TS/04.组件类型.tsx delete mode 100644 03.React中使用TS/05.组件的属性.tsx delete mode 100644 03.React中使用TS/06.组件状态和事件.tsx delete mode 160000 04.任务列表案例/todo_ts diff --git a/01.TS常用类型/01.原始类型.ts b/01.TS常用类型/01.原始类型.ts deleted file mode 100644 index ea62362..0000000 --- a/01.TS常用类型/01.原始类型.ts +++ /dev/null @@ -1,11 +0,0 @@ -let age: number = 20 - -let myName: string = 'Ken' - -let isLoading: boolean = false - -let a: null = null - -let b: undefined = undefined - -let s: symbol = Symbol() \ No newline at end of file diff --git a/01.TS常用类型/02.数组类型.ts b/01.TS常用类型/02.数组类型.ts deleted file mode 100644 index b45024d..0000000 --- a/01.TS常用类型/02.数组类型.ts +++ /dev/null @@ -1,4 +0,0 @@ -let numbers: number[] = [1, 3, 5] - -// 布尔值类型数组 -let boolean: boolean[] = [true, false] \ No newline at end of file diff --git a/01.TS常用类型/03.联合类型.ts b/01.TS常用类型/03.联合类型.ts deleted file mode 100644 index fc03531..0000000 --- a/01.TS常用类型/03.联合类型.ts +++ /dev/null @@ -1,6 +0,0 @@ -// 添加小括号，表示 arr 是数组，数组中既有 number 类型，也可以有 string 类型的元素 -let arr: (number | string)[] = [1, 3, 'a', 'b'] - -// 不添加小括号，表示 arr1 既可以是 number 类型，又可以是 string[] -let arr1: number | string[] = ['a', 'b'] -let arr2: number | string[] = 123 \ No newline at end of file diff --git a/01.TS常用类型/04.类型别名.ts b/01.TS常用类型/04.类型别名.ts deleted file mode 100644 index c4004d0..0000000 --- a/01.TS常用类型/04.类型别名.ts +++ /dev/null @@ -1,5 +0,0 @@ -// 类型别名 -type CustomArray = (number | string)[] - -let arr: CustomArray = [1, 3, 5, 'a', 'b'] -let arr1: CustomArray = ['c', '6'] \ No newline at end of file diff --git a/01.TS常用类型/05.函数类型.ts b/01.TS常用类型/05.函数类型.ts deleted file mode 100644 index 6af2218..0000000 --- a/01.TS常用类型/05.函数类型.ts +++ /dev/null @@ -1,22 +0,0 @@ -// 单独指定参数和返回值的类型 -// num1、num2、函数返回值都要为 number 类型 -function add(num1: number, num2: number) : number { - return num1 + num2 -} - -const sum = add(1, 2) -console.log(sum) - -// 箭头函数 -const add2 = (num3: number, num4: number) : number => { - return num3 + num4 -} - -console.log(add2(2, 3)) - - -// 同时指定参数、返回值的类型。只适用于函数表达式 -const add3: (num5: number, num6: number) => number = (num5, num6) => { - return num5 + num6 -} -console.log(add3(3, 4)) diff --git a/01.TS常用类型/06.void类型.ts b/01.TS常用类型/06.void类型.ts deleted file mode 100644 index d6e9306..0000000 --- a/01.TS常用类型/06.void类型.ts +++ /dev/null @@ -1,6 +0,0 @@ -// 函数没有返回值，那么函数的返回值类型为 void -function greet(name: string): void { - console.log('Hello', name) -} - -greet('Ken') \ No newline at end of file diff --git a/01.TS常用类型/07.函数可选参数.ts b/01.TS常用类型/07.函数可选参数.ts deleted file mode 100644 index bc35773..0000000 --- a/01.TS常用类型/07.函数可选参数.ts +++ /dev/null @@ -1,11 +0,0 @@ -// 函数的参数可传可不传，后面添加 ? -// 可选参数只能出现在参数列表的最后，就是说可选参数后面不能再出现必选参数 - -// start 和 end 参数可传可不传 -function mySlice(start?: number, end?: number): void { - console.log('起始索引：', start, '结束索引：', end) -} - -mySlice() -mySlice(1) -mySlice(1, 3) \ No newline at end of file diff --git a/01.TS常用类型/08.对象类型.ts b/01.TS常用类型/08.对象类型.ts deleted file mode 100644 index f6651c3..0000000 --- a/01.TS常用类型/08.对象类型.ts +++ /dev/null @@ -1,21 +0,0 @@ -let person: { name: string; age: number; sayHi(): void; greet(name: string) : void } = { - name: 'Ken', - age: 20, - sayHi() {}, - greet(name) {} -} - - -let person2: { - name: string - age: number - // sayHi: () => void - // 也可是使用箭头函数 - sayHi: () => void - greet(name: string): void -} = { - name: 'Ken', - age: 20, - sayHi() {}, - greet(name) {} -} \ No newline at end of file diff --git a/01.TS常用类型/09.对象可选属性.ts b/01.TS常用类型/09.对象可选属性.ts deleted file mode 100644 index da6e83a..0000000 --- a/01.TS常用类型/09.对象可选属性.ts +++ /dev/null @@ -1,7 +0,0 @@ -// 使用 axios({ ... }) 时，如果发送 get 请求， method 属性就可以省略 -function myAxios(config: { url: string; method?: string}) {} - -myAxios({ - url: '' - // method 可填可不填 -}) \ No newline at end of file diff --git a/01.TS常用类型/10.接口.ts b/01.TS常用类型/10.接口.ts deleted file mode 100644 index e06a66c..0000000 --- a/01.TS常用类型/10.接口.ts +++ /dev/null @@ -1,32 +0,0 @@ -// 使用接口来描述对象的类型，达到复用的目的 - -// 接口：只能为对象指定类型 -interface IPerson { - name: string - age: number - sayHi(): void -} - -// 对象使用接口 -let Iperson: IPerson = { - name: 'Ken', - age: 20, - sayHi() {} -} - - -// type（类型别名）：可以为对象指定类型，还可以任意类型指定别名 -type IPerson2 = { - name: string - age: number - sayHi(): void -} - -let Iperson2: IPerson2 ={ - name: 'Ken', - age: 20, - sayHi() {} -} - -// 任意类型指定别名 -type NumStr = number | string \ No newline at end of file diff --git a/01.TS常用类型/11.接口继承.ts b/01.TS常用类型/11.接口继承.ts deleted file mode 100644 index 68b350e..0000000 --- a/01.TS常用类型/11.接口继承.ts +++ /dev/null @@ -1,14 +0,0 @@ -// 接口 Point2D 和 Point3D 都具有 x、y 属性，重复两次，繁琐 -/* interface Point2D { x: number; y: number } -interface Point3D { x: number; y: number; z: number } */ - -// 使用接口继承，实现复用 -interface Point2D { x: number; y: number} -// Point3D 具有 Point2D 的 x、y 属性 -interface Point3D extends Point2D { z: number} - -let p3: Point3D = { - x: 20, - y: 30, - z: 40 -} \ No newline at end of file diff --git a/01.TS常用类型/12.元组.ts b/01.TS常用类型/12.元组.ts deleted file mode 100644 index c66e287..0000000 --- a/01.TS常用类型/12.元组.ts +++ /dev/null @@ -1,4 +0,0 @@ -// 元组: 确切知道包含多少个元素，以及特定索引对应的类型 - -// 规定数组只有两个元素，索引为 0 和 1 的元素类型是 number -let position: [number, number] = [39, 114] \ No newline at end of file diff --git a/01.TS常用类型/13.类型推论.ts b/01.TS常用类型/13.类型推论.ts deleted file mode 100644 index 3efa7f5..0000000 --- a/01.TS常用类型/13.类型推论.ts +++ /dev/null @@ -1,10 +0,0 @@ -// 声明变量并立即初始化值，此时，可以省略类型注解 -let age = 20 - -// 注意：如果声明变量但没有立即初始化值，此时，必须手动添加类型注解 -let a: number - -// 此时函数返回值类型可以省略 -function add(num1: number, num2: number) { - return num1 + num2 -} \ No newline at end of file diff --git a/01.TS常用类型/14..枚举类型.ts b/01.TS常用类型/14..枚举类型.ts deleted file mode 100644 index 031a4c8..0000000 --- a/01.TS常用类型/14..枚举类型.ts +++ /dev/null @@ -1,20 +0,0 @@ -// 定义一组枚举命名常量：enum + 名字 {命名常量} -/* enum Direction { - // 枚举成员是有值得，默认从 0 开始自增的数值 - Up, - Down, - Left, - Right -} */ - -enum Direction { - // 可以给枚举中的成员初始化值 - Up = 2, - Down = 4, - Left = 8, - Right = 16 -} - -function changeDirection(direction: Direction) {} - -changeDirection(Direction.Up) \ No newline at end of file diff --git a/01.TS常用类型/15.字符串枚举.ts b/01.TS常用类型/15.字符串枚举.ts deleted file mode 100644 index 7bd04d8..0000000 --- a/01.TS常用类型/15.字符串枚举.ts +++ /dev/null @@ -1,12 +0,0 @@ -enum Direction { - // 枚举中成员的值可以是字符串 - // 字符串枚举没有自增行为，因此，字符串枚举的每个成员必须有初始值 - Up = 'UP', - Down = 'DOWN', - Left = 'LEFT', - Right = 'RIGHT' -} - -function changeDirection(direction: Direction) {} - -changeDirection(Direction.Up) \ No newline at end of file diff --git a/01.TS常用类型/16.typeof运算符.ts b/01.TS常用类型/16.typeof运算符.ts deleted file mode 100644 index 6790b56..0000000 --- a/01.TS常用类型/16.typeof运算符.ts +++ /dev/null @@ -1,14 +0,0 @@ -// js 中的 typeof -// console.log(typeof 'hello TS') - -// TS 中的 typeof - let p = { x: 1, y: 2 } -// function formatPoint(point: {x: number; y: number }) {} - -// 使用 typeof，拿到对象 p 中的类型，实现简化书写的目的 - function formatPoint(point: typeof p ) {} - - formatPoint({ x: 1, y: 100 }) - -// 查看 p对象中属性 x -let num: typeof p.x diff --git a/02.TS高级类型/01.class类/01.class基本使用.ts b/02.TS高级类型/01.class类/01.class基本使用.ts deleted file mode 100644 index 209c44e..0000000 --- a/02.TS高级类型/01.class类/01.class基本使用.ts +++ /dev/null @@ -1,12 +0,0 @@ -// class 类 - -class Person { - age: number - gender = '男' - // gender: string = '男 -} - -const p = new Person() - -p.age -p.gender \ No newline at end of file diff --git a/02.TS高级类型/01.class类/02.class的构造函数.ts b/02.TS高级类型/01.class类/02.class的构造函数.ts deleted file mode 100644 index 8ea37d4..0000000 --- a/02.TS高级类型/01.class类/02.class的构造函数.ts +++ /dev/null @@ -1,13 +0,0 @@ -class Person { - age: number - gender: string - - constructor(age:number, gender: string) { - // this.age 指的是最上面的实例属性，age 指的是构造函数 constructor 中的参数age - this.age = age - this.gender = gender - } -} - -const p = new Person(18, '男') -console.log(p.age, p.gender) \ No newline at end of file diff --git a/02.TS高级类型/01.class类/03.class实例方法.ts b/02.TS高级类型/01.class类/03.class实例方法.ts deleted file mode 100644 index 8ec7168..0000000 --- a/02.TS高级类型/01.class类/03.class实例方法.ts +++ /dev/null @@ -1,15 +0,0 @@ -class Point { - x = 1 - y = 2 - - scale(n:number) { - this.x *= n - this.y *= n - } -} - -const p = new Point() - -p.scale(10) - -console.log(p.x, p.y) \ No newline at end of file diff --git a/02.TS高级类型/01.class类/04.class继承(extends).ts b/02.TS高级类型/01.class类/04.class继承(extends).ts deleted file mode 100644 index 9f540e2..0000000 --- a/02.TS高级类型/01.class类/04.class继承(extends).ts +++ /dev/null @@ -1,23 +0,0 @@ -// 类的两种继承方式：1.extends（继承父类） 2.implements（实现接口） - -// 父类 -class Animal { - move() { - console.log('666') - } -} -// 第一种：extends（继承父类） -// 子类 Dog 继承 父类 Animal，子类 Dog 具有父类 Animal 的属性和方法 -class Dog extends Animal { - // 子类自己的属性和方法 - name = 'Max' - brak() { - console.log('8888') - } -} - -// 实例化子类 Dog -const d = new Dog() -d.move() -d.brak() -console.log(d.name) diff --git a/02.TS高级类型/01.class类/05.class继承(implements).ts b/02.TS高级类型/01.class类/05.class继承(implements).ts deleted file mode 100644 index ed938fc..0000000 --- a/02.TS高级类型/01.class类/05.class继承(implements).ts +++ /dev/null @@ -1,18 +0,0 @@ -// 接口 -interface Singable { - sing(): void - name: string -} - -// 使用 implements 关键字让 class 实现接口 -// Person 类实现接口 Singable , 意思是 Person 类中必须提供 Singable 接口中指定的所有方法和属性 -class Person implements Singable { - name = 'jack' - sing() { - console.log('666666') - } -} - -const p = new Person() - -console.log(p.name) \ No newline at end of file diff --git a/02.TS高级类型/01.class类/06.class类的可见性修饰符(public).ts b/02.TS高级类型/01.class类/06.class类的可见性修饰符(public).ts deleted file mode 100644 index 5974673..0000000 --- a/02.TS高级类型/01.class类/06.class类的可见性修饰符(public).ts +++ /dev/null @@ -1,18 +0,0 @@ -// 成员可见性：让父类的方法或属性让子类成员可以使用 -// 可见性修饰符: public，表示公开的、公有的，公有成员可以被任何地方访问。public 是默认可见性，可以省略。 - -// 父类 -class Animal { - public move() { - console.log('123') - } -} - -// 子类 -class Dog extends Animal { - bark() { - console.log('88888') - } -} - -const d = new Dog() \ No newline at end of file diff --git a/02.TS高级类型/01.class类/07.class类可见修饰符(protected).ts b/02.TS高级类型/01.class类/07.class类可见修饰符(protected).ts deleted file mode 100644 index 77b28ee..0000000 --- a/02.TS高级类型/01.class类/07.class类可见修饰符(protected).ts +++ /dev/null @@ -1,28 +0,0 @@ -// 可见修饰符：protected 表示受保护的，仅对声明所在类和子类中（非实例对象）可见 - -// 父类 -class Animal { - // move 方法是受保护的 - protected move() { - console.log('123') - } - - run() { - console.log('789') - } -} - -const a = new Animal() -// 实例对象不能访问 move 方法 -// a.move() - -// 子类 -class Dog extends Animal { - bark() { - console.log('456') - } -} - -const d = new Dog() -// 子类的实例对象也不能访问 move 方法 -// d.move() diff --git a/02.TS高级类型/01.class类/08.class类可见性修饰符(private).ts b/02.TS高级类型/01.class类/08.class类可见性修饰符(private).ts deleted file mode 100644 index e2d527a..0000000 --- a/02.TS高级类型/01.class类/08.class类可见性修饰符(private).ts +++ /dev/null @@ -1,32 +0,0 @@ -// 可见性修饰符：private 表示私有的，只能在当前类中可见(只能在类内部使用)，对实例对象以及子类都是不可见的 - -// 父类 -class Animal { - // _run_ 方法是私有的 - private _run_ () { - console.log('321') - } - - // 受保护的 - protected move() { - this._run_() - console.log('654') - } - - // 公开的 - run() { - this._run_() - this.move() - console.log('gogogo') - } -} - -const a = new Animal() - -class Dog extends Animal { - bark() { - console.log('123') - } -} - -const d = new Dog() \ No newline at end of file diff --git a/02.TS高级类型/01.class类/09.readonly只读修饰符.ts b/02.TS高级类型/01.class类/09.readonly只读修饰符.ts deleted file mode 100644 index 3bb523e..0000000 --- a/02.TS高级类型/01.class类/09.readonly只读修饰符.ts +++ /dev/null @@ -1,27 +0,0 @@ -// 只读修饰符：readonly，表示使用 readonly 关键字修饰属性是只读的，只能修饰属性不能修饰方法 - -class Person { - // 只读属性 - // 注意：只要是 readonly 来修饰的属性，必须手动提供明确的类型，否侧会变成字面量类型 - // readonly age = 18 age 的类型为 18，字面量类型 - readonly age: number = 18 - - constructor(age: number) { - this.age = age - } - - setAge() { - // age 是只读属性，不能更改 - // this.age = 20 - } -} - -// 在接口中使用 readonly -interface Person { - readonly name: string -} - -// readonly 的作用是一样的，表示当前属性是只读的 -let obj: { readonly name: string } = { - name: 'jack' -} diff --git a/02.TS高级类型/02.类型兼容性/01.对象之间的类型兼容性.ts b/02.TS高级类型/02.类型兼容性/01.对象之间的类型兼容性.ts deleted file mode 100644 index 5abcd90..0000000 --- a/02.TS高级类型/02.类型兼容性/01.对象之间的类型兼容性.ts +++ /dev/null @@ -1,23 +0,0 @@ -// 两个类的兼容性演示： -class Point { - x: number - y: number -} - -class Point2D { - x: number - y: number -} - -const p: Point = new Point2D() - -class Point3D { - x: number - y: number - z: number -} - -// 对象成员多的可以赋值给对象成员少的，Point3D 的成员多过 Point，所以可以赋值。 -const p1: Point = new Point3D() - -// 对象成员少的不能给对象多的 \ No newline at end of file diff --git a/02.TS高级类型/02.类型兼容性/02.函数类型兼容性(参数个数和类型).ts b/02.TS高级类型/02.类型兼容性/02.函数类型兼容性(参数个数和类型).ts deleted file mode 100644 index 5156412..0000000 --- a/02.TS高级类型/02.类型兼容性/02.函数类型兼容性(参数个数和类型).ts +++ /dev/null @@ -1,44 +0,0 @@ -// 1.参数个数：参数少的可以赋值给参数多的 - -type F1 = (a: number) => void -type F2 = (a: number, b: number) => void - -let f1: F1 -let f2: F2 - -// 参数少的 f1 可以赋值给参数多的 f2 。 例： f2 = f1 -// 但是参数多的不能赋值给参数少的 - - - -// 2.参数类型：相同位置的参数类型要相同兼容 - -// 参数类型是原始类型 -type F3 = (a: number) => void -type F4 = (a: number) => void - -let f3: F3 -let f4: F4 - -// 相同位置和相同类型的参数，可以参数少的可以赋值给参数多的，也可以参数多的赋值给参数少的。 例：f3 = f4 f4 = f3 - - -// 参数类型是对象类型 -interface Point2D { - x: number - y: number -} - -interface Point3D { - x: number - y: number - z: number -} - -type F5 = (p: Point2D) => void // 相当于有两个参数 -type F6 = (p: Point3D) => void // 相当于有三个参数 - -let f5: F5 -let f6: F6 - -// 参数少的可以赋值给参数多的，但是参数多的不可以赋值给参数少的 \ No newline at end of file diff --git a/02.TS高级类型/02.类型兼容性/03.函数类型兼容性(返回值类型).ts b/02.TS高级类型/02.类型兼容性/03.函数类型兼容性(返回值类型).ts deleted file mode 100644 index 36ec426..0000000 --- a/02.TS高级类型/02.类型兼容性/03.函数类型兼容性(返回值类型).ts +++ /dev/null @@ -1,20 +0,0 @@ -// 返回值类型：只关注返回值类型本身 - -// 返回值类型是原始类型： -type F5 = () => string -type F6 = () => string - -let f5: F5 -let f6: F6 - -// 返回值类型一样，f5 和 f6 可以相互赋值。 例： f6 = f5 f5 = f6 - - -// 返回值类型是对象类型： -type F7 = () => { name: string } -type F8 = () => { name: string; age: number } - -let f7: F7 -let f8: F8 - -// 成员多的赋值给成员少的 f7 = f8 \ No newline at end of file diff --git a/02.TS高级类型/02.类型兼容性/04.交叉类型.ts b/02.TS高级类型/02.类型兼容性/04.交叉类型.ts deleted file mode 100644 index e911342..0000000 --- a/02.TS高级类型/02.类型兼容性/04.交叉类型.ts +++ /dev/null @@ -1,21 +0,0 @@ -// 交叉类型：功能类似 extends，用于组合多个类型为一个类型（常用于对象类型） - -interface Person { - name: string - say(): number -} - -interface Contact { - phone: string -} - -// PersonDetail 同时具有 Person 和 Contact 的属性和方法 -type PersonDetail = Person & Contact - -let obj: PersonDetail = { - name: 'jack', - phone: '123456', - say() { - return 1 - } -} \ No newline at end of file diff --git a/02.TS高级类型/03.泛型/01.泛型.ts b/02.TS高级类型/03.泛型/01.泛型.ts deleted file mode 100644 index c182948..0000000 --- a/02.TS高级类型/03.泛型/01.泛型.ts +++ /dev/null @@ -1,17 +0,0 @@ -// 使用泛型创建一个函数 - -function id(value: Type) : Type { // 相当于是一个占位符 - return value -} - -// 调用泛型函数： -// 1.以 number 类型调用泛型函数 -const num = id(10) - -// 2.以 string 类型调用泛型函数 -const str = id('a') -const ret = id(false) - -// 泛型简写 -let num1 = id(100) // number类型 -let str1 = id('abc') // string类型 \ No newline at end of file diff --git a/02.TS高级类型/03.泛型/02.泛型约束.ts b/02.TS高级类型/03.泛型/02.泛型约束.ts deleted file mode 100644 index 425179c..0000000 --- a/02.TS高级类型/03.泛型/02.泛型约束.ts +++ /dev/null @@ -1,32 +0,0 @@ -// 泛型约束的两种方式：1.指定更加具体的类型 2.添加约束 - -function id(value: Type) : Type { - // Type 是表示任意类型的，导致 value 没办法访问任何属性和方法 - // console.log(value.length) // length 会报错 - return value -} - -// 第一种：指定更加具体的类型 -// 将类型修改为 Type[] ( Type 类型的数组 )，因为只要是数组就一定存在 length 属性，所以可以访问 -function id2(value: Type[]) : Type[] { - console.log(value.length) - return value -} - - -// 第二种：添加约束 -interface ILength { length: number } - -// 这里的 extends 不是继承，而是表示 Type 要满足 ILength 中 length 属性的约束 -function id3 (value: Type) : Type { - value.length - return value -} - -// 只要满足 length 属性就可以 -id3(['a', 'x']) -id3('abc') -id3({length: 10, name: 'jack'}) - -// 错误演示 -// id3(123) \ No newline at end of file diff --git a/02.TS高级类型/03.泛型/03.多个泛型变量情况.ts b/02.TS高级类型/03.泛型/03.多个泛型变量情况.ts deleted file mode 100644 index 4f15848..0000000 --- a/02.TS高级类型/03.泛型/03.多个泛型变量情况.ts +++ /dev/null @@ -1,16 +0,0 @@ -// 第二个类型变量受第一个类型变量约束 - -// Key 受 Type 约束（Key 要满足 Type 中的属性） -function getProp(obj: Type, key: Key) { - return obj[key] -} - -getProp({ name: 'jack', age: 20}, 'age') // 第二个参数要满足第一个参数的属性，可以是 age 或 name -getProp({ name: 'jack', age: 20}, 'name') - -// 补充 -getProp(20, 'toFixed') // 20 是 number 类型，toFixed 是 number 类型能够访问的方法 -getProp('abc', 'split') -getProp('abc', 1) // 1表示索引，字符串像一个数组一样，可以通过数组的索引的方式来访问 -getProp(['a'], length) -getProp(['a'], 1000) \ No newline at end of file diff --git a/02.TS高级类型/03.泛型/04.泛型接口.ts b/02.TS高级类型/03.泛型/04.泛型接口.ts deleted file mode 100644 index f7b2e2b..0000000 --- a/02.TS高级类型/03.泛型/04.泛型接口.ts +++ /dev/null @@ -1,14 +0,0 @@ -interface IdFunc { - id: (balue: Type) => Type - ids: () => Type[] -} - -// 需要指定显示类型 -let obj: IdFunc = { // 指定显示的类型为 number - id(value) { - return value - }, - ids() { - return [1, 3, 5] - } -} \ No newline at end of file diff --git a/02.TS高级类型/03.泛型/05.泛型类.ts b/02.TS高级类型/03.泛型/05.泛型类.ts deleted file mode 100644 index 9f9c188..0000000 --- a/02.TS高级类型/03.泛型/05.泛型类.ts +++ /dev/null @@ -1,24 +0,0 @@ -// 第一种 -class GenericNumber { - defaultValue: NumType - add: (x: NumType, y: NumType) => NumType -} - -// 明确指定 <类型> -const myNum = new GenericNumber() -myNum.defaultValue = 10 - - -// 第二种 -class GenericNumber2 { - defaultValue: NumType - add: (x: NumType, y: NumType) => NumType - - constructor(value: NumType) { - this.defaultValue = value - } -} - -// 省略类型 -const myNum2 = new GenericNumber() -myNum.defaultValue = 10 \ No newline at end of file diff --git a/02.TS高级类型/03.泛型/06.泛型工具类型(Partial).ts b/02.TS高级类型/03.泛型/06.泛型工具类型(Partial).ts deleted file mode 100644 index 410e3c5..0000000 --- a/02.TS高级类型/03.泛型/06.泛型工具类型(Partial).ts +++ /dev/null @@ -1,18 +0,0 @@ -// 泛型工具类型：Partial 用来构造（创建）一个类型，将 Type 的所有属性设置为可选 - -interface Props { - id: string - children: number[] -} - -// 使用 泛型工具 Partial -type PartialProps = Partial - -// 没有用泛型工具，属性是必加的 -let p1: Props = { - id: '', - children: [1] -} - -// 加入 PartialProps 后，属性可加可不加 -let p2: PartialProps = {} \ No newline at end of file diff --git a/02.TS高级类型/03.泛型/07.泛型工具类型(Readonly).ts b/02.TS高级类型/03.泛型/07.泛型工具类型(Readonly).ts deleted file mode 100644 index e7ce55b..0000000 --- a/02.TS高级类型/03.泛型/07.泛型工具类型(Readonly).ts +++ /dev/null @@ -1,17 +0,0 @@ -// 泛型工具类型：Readonly 将 Type 的所有属性都设置为 readonly（只读） - -interface Props { - id: string - children: number[] -} - -type ReadonlyProps = Readonly - -// 所有属性都是只读 -let p1: ReadonlyProps = { - id: '1', - children: [1, 3] -} - -// 属性是只读，不能修改 -// p1.id = '2' \ No newline at end of file diff --git a/02.TS高级类型/03.泛型/08.泛型工具类型(Pick).ts b/02.TS高级类型/03.泛型/08.泛型工具类型(Pick).ts deleted file mode 100644 index f6fa975..0000000 --- a/02.TS高级类型/03.泛型/08.泛型工具类型(Pick).ts +++ /dev/null @@ -1,10 +0,0 @@ -// 泛型工具类型：Pick 从 Type 中选择一组属性来构造新类型 - -interface Props{ - id: string - title: string - children: number[] -} - -// 从 Props 中选择两个属性给 PickProps -type PickProps = Pick // PickProps 具有 Props 的 id 和 title 属性 \ No newline at end of file diff --git a/02.TS高级类型/03.泛型/09.泛型工具类型(Record).ts b/02.TS高级类型/03.泛型/09.泛型工具类型(Record).ts deleted file mode 100644 index 17df113..0000000 --- a/02.TS高级类型/03.泛型/09.泛型工具类型(Record).ts +++ /dev/null @@ -1,16 +0,0 @@ -// 泛型工具类型：Record 构造一个对象类型，属性键为 Keys, 属性类型为 Type - -type RecordObj = Record< 'a' | 'b' | 'c', string[]> // 表示属性键 a、b、c 都是 string 类型的数组 - -let obj: RecordObj = { - a: ['a'], - b: ['b'], - c: ['c'] -} - -// 不使用工具类型 Record -type RecordObj2 = { - a2: string[] - b2: string[] - c2: string[] -} \ No newline at end of file diff --git a/02.TS高级类型/04.索引签名类型.ts b/02.TS高级类型/04.索引签名类型.ts deleted file mode 100644 index 2429ed4..0000000 --- a/02.TS高级类型/04.索引签名类型.ts +++ /dev/null @@ -1,21 +0,0 @@ -// 索引签名类型 -// 使用场景：无法确定对象中有哪些属性（或者对象中出现任意多个属性） 例：用户输入的内容 - -interface AnyObject { - // 字符串的键都可以出现在 AnyObject 对象中 - [key: string] : number // key 表示一个占位符（可以更改名字），number 表示属性的值的类型 -} - -let obj: AnyObject = { - a: 1, - abc: 123, -} - - -// 在数组中使用 -interface MyArray { - [index: number]: Type -} - -let arr1 : MyArray = [1, 3, 5] -arr1[0] \ No newline at end of file diff --git a/02.TS高级类型/05.映射类型.ts b/02.TS高级类型/05.映射类型.ts deleted file mode 100644 index cd87f23..0000000 --- a/02.TS高级类型/05.映射类型.ts +++ /dev/null @@ -1,20 +0,0 @@ -// 映射类型：基于旧类型创建新类型 - -type PropKeys = 'x' | 'y' | 'z' // 联合类型 -type Type1 = { x: number; y: number; z: number } - -// 使用映射类型进行简化 -type Type2 = { [Key in PropKeys]: number } // key 表示 PropKeys 联合类型中的任意一个 - -// 映射类型只能在类型别名中使用，不能在接口中使用 -// 错误演示： -/* -* interface Type3 { -* [Key in PropKeys]: number -* } - */ - - -// 根据对象类型创建新类型 -type Props = { a: number; b: string; c: boolean } -type Type3 = { [key in keyof Props]: number } // key in 表示 key 可以是 Props 中所有个键名称中的任意一个，类型为 number diff --git a/02.TS高级类型/06.索引查询类型.ts b/02.TS高级类型/06.索引查询类型.ts deleted file mode 100644 index edfa7cd..0000000 --- a/02.TS高级类型/06.索引查询类型.ts +++ /dev/null @@ -1,21 +0,0 @@ -type Props = { a: number; b: string; c: boolean } - -// 查看 Props 中 a 的类型 -type TypeA = Props['a'] - -// 模拟 Partial 类型： -type MyPartial = { - [P in keyof T]?: T[P] // p 相当于 key -} - -type PartialProps = MyPartial - - -// 索引其它查询方式：同时查询多个索引的类型 -type TypeB = Props['a' | 'b'] - -type Props2 = { a: number; b: number; c: boolean } - -type TypeC = Props2['a' | 'b'] -// a 和 b 类型都是 number，TypeD 只显示一个 number，实现去重功能 -type TypeD = Props2[keyof Props] \ No newline at end of file diff --git a/03.React中使用TS/01.函数组件的类型.tsx b/03.React中使用TS/01.函数组件的类型.tsx deleted file mode 100644 index 4eefffc..0000000 --- a/03.React中使用TS/01.函数组件的类型.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import ReactDOM from "react-dom"; -import { FC } from "react"; - -// React 函数组件的类型以及组件的属性 - -type Props = { name: string; age?: number} - -// 第一种： -const Hello: FC = ( { name, age } ) => ( -
我是：{name}, 我 { age } 岁
-) - -// 第二种（简化）： -const HI = ({ name, age }: Props) => ( -
- 我是：{name}, 我 { age } 岁 -
-) - -const App = () =>
- {/* name 是必填的 */} - - -
- -ReactDOM.render(, document.getElementById('root')) \ No newline at end of file diff --git a/03.React中使用TS/02.函数默认值.tsx b/03.React中使用TS/02.函数默认值.tsx deleted file mode 100644 index cfae79f..0000000 --- a/03.React中使用TS/02.函数默认值.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import ReactDOM from "react-dom"; - -// 函数的默认值 - -type Props = { name: string; age?: number} - -// const Hello: FC = ( { name, age } ) => ( -//
我是：{name}, 我 { age } 岁
-// ) - -// 提供默认属性 -// Hello.defaultProps = { -// age: 18 // age 是可选属性，当没给 age 的值时，默认 age 的值为 18 -// } - - -// 简化写法 -const Hello = ( { name, age = 18 }: Props ) => ( // 给 age 添加默认值 18 -
我是：{name}, 我 { age } 岁
-) - -const App = () =>
- {/* name 是必填的 */} - -
- -ReactDOM.render(, document.getElementById('root')) \ No newline at end of file diff --git a/03.React中使用TS/03.事件绑定和事件对象.tsx b/03.React中使用TS/03.事件绑定和事件对象.tsx deleted file mode 100644 index bb6f8d8..0000000 --- a/03.React中使用TS/03.事件绑定和事件对象.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; - -// 事件绑定和事件对象 - -type Props = { name: string; age?: number} - -const Hello = ( { name, age = 18 }: Props ) => { - // const onClick = () => { - // console.log('赞！') - // } - - const onClick = (e: React.MouseEvent) => { - console.log('赞！', e.currentTarget) - } - - const onChange = (e: React.ChangeEvent) => { - console.log(e.target.value) - } - - return ( -
- 我是：{name}, 我 { age } 岁 - - - {/* 可以利用 TS 的类型推论来查看事件对象类型（将鼠标放在 e 上可以查看） */} - {/* {} } /> */} -
- ) -} - -const App = () =>
- {/* name 是必填的 */} - -
- -ReactDOM.render(, document.getElementById('root')) \ No newline at end of file diff --git a/03.React中使用TS/04.组件类型.tsx b/03.React中使用TS/04.组件类型.tsx deleted file mode 100644 index 7bb1455..0000000 --- a/03.React中使用TS/04.组件类型.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; - -// 组件的类型 - -type State = { count: number} -type Props = { message?: string} - -// 无 props, 无 state -class C1 extends React.Component {} - -// 有 props，无 state -class C2 extends React.Component {} - -// 无 props，有 state -class C3 extends React.Component<{}, State> {} - -// 有 props，有 state -class C4 extends React.Component {} - -const App = () =>
- -ReactDOM.render(, document.getElementById('root')) \ No newline at end of file diff --git a/03.React中使用TS/05.组件的属性.tsx b/03.React中使用TS/05.组件的属性.tsx deleted file mode 100644 index 171f566..0000000 --- a/03.React中使用TS/05.组件的属性.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; - -// 组件的属性 - -type Props = { name: string; age?: number } -class Hello extends React.Component { - // 在类组件中给 age 添加默认属性 - static defaultProps: Partial = { - age: 20 - } - - render() { - const { name, age } = this.props - return ( -
我是：{name}, 我 { age } 岁
- ) - } -} - - - -const App = () =>
- -
- -ReactDOM.render(, document.getElementById('root')) \ No newline at end of file diff --git a/03.React中使用TS/06.组件状态和事件.tsx b/03.React中使用TS/06.组件状态和事件.tsx deleted file mode 100644 index 81947ce..0000000 --- a/03.React中使用TS/06.组件状态和事件.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from "react"; -import ReactDOM from "react-dom"; - -// 组件状态和事件 - -type State = { count: number } -class Counter extends React.Component<{}, State> { - state: State = { - count: 0 - } - - handleCLick = () => { - this.setState({ - count: this.state.count + 1 - }) - } - - render() { - return ( -
- 计数器: {this.state.count} - -
- ) - } -} - - -const App = () =>
- -
- -ReactDOM.render(, document.getElementById('root')) \ No newline at end of file diff --git a/04.任务列表案例/todo_ts b/04.任务列表案例/todo_ts deleted file mode 160000 index a84df5e..0000000 --- a/04.任务列表案例/todo_ts +++ /dev/null @@ -1 +0,0 @@ -Subproject commit a84df5e9d9ddde109fefb41f90e5d3e48a0c855a