From c547e3811b50c9a69a9978a469851a781e22daae Mon Sep 17 00:00:00 2001 From: MYW Date: Wed, 3 Aug 2022 10:24:44 +0800 Subject: [PATCH] TypeScript --- .../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 +++++++++++++ TypeScript/01.TS常用类型/06.void类型.ts | 6 ++++ .../07.函数可选参数.ts | 11 +++++++ .../01.TS常用类型/08.对象类型.ts | 21 ++++++++++++ .../09.对象可选属性.ts | 7 ++++ TypeScript/01.TS常用类型/10.接口.ts | 32 +++++++++++++++++++ .../01.TS常用类型/11.接口继承.ts | 14 ++++++++ TypeScript/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 | 13 ++++++++ .../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 +++++++++++++ 26 files changed, 407 insertions(+) create mode 100644 TypeScript/01.TS常用类型/01.原始类型.ts create mode 100644 TypeScript/01.TS常用类型/02.数组类型.ts create mode 100644 TypeScript/01.TS常用类型/03.联合类型.ts create mode 100644 TypeScript/01.TS常用类型/04.类型别名.ts create mode 100644 TypeScript/01.TS常用类型/05.函数类型.ts create mode 100644 TypeScript/01.TS常用类型/06.void类型.ts create mode 100644 TypeScript/01.TS常用类型/07.函数可选参数.ts create mode 100644 TypeScript/01.TS常用类型/08.对象类型.ts create mode 100644 TypeScript/01.TS常用类型/09.对象可选属性.ts create mode 100644 TypeScript/01.TS常用类型/10.接口.ts create mode 100644 TypeScript/01.TS常用类型/11.接口继承.ts create mode 100644 TypeScript/01.TS常用类型/12.元组.ts create mode 100644 TypeScript/01.TS常用类型/13.类型推论.ts create mode 100644 TypeScript/01.TS常用类型/14..枚举类型.ts create mode 100644 TypeScript/01.TS常用类型/15.字符串枚举.ts create mode 100644 TypeScript/01.TS常用类型/16.typeof运算符.ts create mode 100644 TypeScript/02.TS高级类型/01.class类/01.class基本使用.ts create mode 100644 TypeScript/02.TS高级类型/01.class类/02.class的构造函数.ts create mode 100644 TypeScript/02.TS高级类型/01.class类/03.class实例方法.ts create mode 100644 TypeScript/02.TS高级类型/01.class类/04.class继承(extends).ts create mode 100644 TypeScript/02.TS高级类型/01.class类/05.class继承(implements).ts create mode 100644 TypeScript/02.TS高级类型/01.class类/06.class类的可见性修饰符(public).ts create mode 100644 TypeScript/02.TS高级类型/01.class类/07.class类可见修饰符(protected).ts create mode 100644 TypeScript/02.TS高级类型/01.class类/08.class类可见性修饰符(private).ts create mode 100644 TypeScript/02.TS高级类型/01.class类/09.readonly只读修饰符.ts create mode 100644 TypeScript/02.TS高级类型/02.类型兼容性/01.对象之间的类型兼容性.ts diff --git a/TypeScript/01.TS常用类型/01.原始类型.ts b/TypeScript/01.TS常用类型/01.原始类型.ts new file mode 100644 index 0000000..ea62362 --- /dev/null +++ b/TypeScript/01.TS常用类型/01.原始类型.ts @@ -0,0 +1,11 @@ +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/TypeScript/01.TS常用类型/02.数组类型.ts b/TypeScript/01.TS常用类型/02.数组类型.ts new file mode 100644 index 0000000..b45024d --- /dev/null +++ b/TypeScript/01.TS常用类型/02.数组类型.ts @@ -0,0 +1,4 @@ +let numbers: number[] = [1, 3, 5] + +// 布尔值类型数组 +let boolean: boolean[] = [true, false] \ No newline at end of file diff --git a/TypeScript/01.TS常用类型/03.联合类型.ts b/TypeScript/01.TS常用类型/03.联合类型.ts new file mode 100644 index 0000000..fc03531 --- /dev/null +++ b/TypeScript/01.TS常用类型/03.联合类型.ts @@ -0,0 +1,6 @@ +// 添加小括号，表示 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/TypeScript/01.TS常用类型/04.类型别名.ts b/TypeScript/01.TS常用类型/04.类型别名.ts new file mode 100644 index 0000000..c4004d0 --- /dev/null +++ b/TypeScript/01.TS常用类型/04.类型别名.ts @@ -0,0 +1,5 @@ +// 类型别名 +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/TypeScript/01.TS常用类型/05.函数类型.ts b/TypeScript/01.TS常用类型/05.函数类型.ts new file mode 100644 index 0000000..6af2218 --- /dev/null +++ b/TypeScript/01.TS常用类型/05.函数类型.ts @@ -0,0 +1,22 @@ +// 单独指定参数和返回值的类型 +// 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/TypeScript/01.TS常用类型/06.void类型.ts b/TypeScript/01.TS常用类型/06.void类型.ts new file mode 100644 index 0000000..d6e9306 --- /dev/null +++ b/TypeScript/01.TS常用类型/06.void类型.ts @@ -0,0 +1,6 @@ +// 函数没有返回值，那么函数的返回值类型为 void +function greet(name: string): void { + console.log('Hello', name) +} + +greet('Ken') \ No newline at end of file diff --git a/TypeScript/01.TS常用类型/07.函数可选参数.ts b/TypeScript/01.TS常用类型/07.函数可选参数.ts new file mode 100644 index 0000000..bc35773 --- /dev/null +++ b/TypeScript/01.TS常用类型/07.函数可选参数.ts @@ -0,0 +1,11 @@ +// 函数的参数可传可不传，后面添加 ? +// 可选参数只能出现在参数列表的最后，就是说可选参数后面不能再出现必选参数 + +// 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/TypeScript/01.TS常用类型/08.对象类型.ts b/TypeScript/01.TS常用类型/08.对象类型.ts new file mode 100644 index 0000000..f6651c3 --- /dev/null +++ b/TypeScript/01.TS常用类型/08.对象类型.ts @@ -0,0 +1,21 @@ +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/TypeScript/01.TS常用类型/09.对象可选属性.ts b/TypeScript/01.TS常用类型/09.对象可选属性.ts new file mode 100644 index 0000000..da6e83a --- /dev/null +++ b/TypeScript/01.TS常用类型/09.对象可选属性.ts @@ -0,0 +1,7 @@ +// 使用 axios({ ... }) 时，如果发送 get 请求， method 属性就可以省略 +function myAxios(config: { url: string; method?: string}) {} + +myAxios({ + url: '' + // method 可填可不填 +}) \ No newline at end of file diff --git a/TypeScript/01.TS常用类型/10.接口.ts b/TypeScript/01.TS常用类型/10.接口.ts new file mode 100644 index 0000000..e06a66c --- /dev/null +++ b/TypeScript/01.TS常用类型/10.接口.ts @@ -0,0 +1,32 @@ +// 使用接口来描述对象的类型，达到复用的目的 + +// 接口：只能为对象指定类型 +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/TypeScript/01.TS常用类型/11.接口继承.ts b/TypeScript/01.TS常用类型/11.接口继承.ts new file mode 100644 index 0000000..68b350e --- /dev/null +++ b/TypeScript/01.TS常用类型/11.接口继承.ts @@ -0,0 +1,14 @@ +// 接口 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/TypeScript/01.TS常用类型/12.元组.ts b/TypeScript/01.TS常用类型/12.元组.ts new file mode 100644 index 0000000..c66e287 --- /dev/null +++ b/TypeScript/01.TS常用类型/12.元组.ts @@ -0,0 +1,4 @@ +// 元组: 确切知道包含多少个元素，以及特定索引对应的类型 + +// 规定数组只有两个元素，索引为 0 和 1 的元素类型是 number +let position: [number, number] = [39, 114] \ No newline at end of file diff --git a/TypeScript/01.TS常用类型/13.类型推论.ts b/TypeScript/01.TS常用类型/13.类型推论.ts new file mode 100644 index 0000000..3efa7f5 --- /dev/null +++ b/TypeScript/01.TS常用类型/13.类型推论.ts @@ -0,0 +1,10 @@ +// 声明变量并立即初始化值，此时，可以省略类型注解 +let age = 20 + +// 注意：如果声明变量但没有立即初始化值，此时，必须手动添加类型注解 +let a: number + +// 此时函数返回值类型可以省略 +function add(num1: number, num2: number) { + return num1 + num2 +} \ No newline at end of file diff --git a/TypeScript/01.TS常用类型/14..枚举类型.ts b/TypeScript/01.TS常用类型/14..枚举类型.ts new file mode 100644 index 0000000..031a4c8 --- /dev/null +++ b/TypeScript/01.TS常用类型/14..枚举类型.ts @@ -0,0 +1,20 @@ +// 定义一组枚举命名常量：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/TypeScript/01.TS常用类型/15.字符串枚举.ts b/TypeScript/01.TS常用类型/15.字符串枚举.ts new file mode 100644 index 0000000..7bd04d8 --- /dev/null +++ b/TypeScript/01.TS常用类型/15.字符串枚举.ts @@ -0,0 +1,12 @@ +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/TypeScript/01.TS常用类型/16.typeof运算符.ts b/TypeScript/01.TS常用类型/16.typeof运算符.ts new file mode 100644 index 0000000..6a3a1db --- /dev/null +++ b/TypeScript/01.TS常用类型/16.typeof运算符.ts @@ -0,0 +1,13 @@ +// js 中的 typeof +// console.log(typeof 'hello TS') + +// TS 中的 typeof + let p = { x: 1, y: 2 } +// function formatPoint(point: {x: number; y: number }) {} +// 使用 typeof + function formatPoint(point: typeof p ) {} + + formatPoint({ x: 1, y: 100 }) + +// 查看 p对象中属性 x +let num: typeof p.x diff --git a/TypeScript/02.TS高级类型/01.class类/01.class基本使用.ts b/TypeScript/02.TS高级类型/01.class类/01.class基本使用.ts new file mode 100644 index 0000000..209c44e --- /dev/null +++ b/TypeScript/02.TS高级类型/01.class类/01.class基本使用.ts @@ -0,0 +1,12 @@ +// 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/TypeScript/02.TS高级类型/01.class类/02.class的构造函数.ts b/TypeScript/02.TS高级类型/01.class类/02.class的构造函数.ts new file mode 100644 index 0000000..8ea37d4 --- /dev/null +++ b/TypeScript/02.TS高级类型/01.class类/02.class的构造函数.ts @@ -0,0 +1,13 @@ +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/TypeScript/02.TS高级类型/01.class类/03.class实例方法.ts b/TypeScript/02.TS高级类型/01.class类/03.class实例方法.ts new file mode 100644 index 0000000..8ec7168 --- /dev/null +++ b/TypeScript/02.TS高级类型/01.class类/03.class实例方法.ts @@ -0,0 +1,15 @@ +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/TypeScript/02.TS高级类型/01.class类/04.class继承(extends).ts b/TypeScript/02.TS高级类型/01.class类/04.class继承(extends).ts new file mode 100644 index 0000000..9f540e2 --- /dev/null +++ b/TypeScript/02.TS高级类型/01.class类/04.class继承(extends).ts @@ -0,0 +1,23 @@ +// 类的两种继承方式：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/TypeScript/02.TS高级类型/01.class类/05.class继承(implements).ts b/TypeScript/02.TS高级类型/01.class类/05.class继承(implements).ts new file mode 100644 index 0000000..ed938fc --- /dev/null +++ b/TypeScript/02.TS高级类型/01.class类/05.class继承(implements).ts @@ -0,0 +1,18 @@ +// 接口 +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/TypeScript/02.TS高级类型/01.class类/06.class类的可见性修饰符(public).ts b/TypeScript/02.TS高级类型/01.class类/06.class类的可见性修饰符(public).ts new file mode 100644 index 0000000..5974673 --- /dev/null +++ b/TypeScript/02.TS高级类型/01.class类/06.class类的可见性修饰符(public).ts @@ -0,0 +1,18 @@ +// 成员可见性：让父类的方法或属性让子类成员可以使用 +// 可见性修饰符: 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/TypeScript/02.TS高级类型/01.class类/07.class类可见修饰符(protected).ts b/TypeScript/02.TS高级类型/01.class类/07.class类可见修饰符(protected).ts new file mode 100644 index 0000000..77b28ee --- /dev/null +++ b/TypeScript/02.TS高级类型/01.class类/07.class类可见修饰符(protected).ts @@ -0,0 +1,28 @@ +// 可见修饰符：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/TypeScript/02.TS高级类型/01.class类/08.class类可见性修饰符(private).ts b/TypeScript/02.TS高级类型/01.class类/08.class类可见性修饰符(private).ts new file mode 100644 index 0000000..e2d527a --- /dev/null +++ b/TypeScript/02.TS高级类型/01.class类/08.class类可见性修饰符(private).ts @@ -0,0 +1,32 @@ +// 可见性修饰符：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/TypeScript/02.TS高级类型/01.class类/09.readonly只读修饰符.ts b/TypeScript/02.TS高级类型/01.class类/09.readonly只读修饰符.ts new file mode 100644 index 0000000..3bb523e --- /dev/null +++ b/TypeScript/02.TS高级类型/01.class类/09.readonly只读修饰符.ts @@ -0,0 +1,27 @@ +// 只读修饰符：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/TypeScript/02.TS高级类型/02.类型兼容性/01.对象之间的类型兼容性.ts b/TypeScript/02.TS高级类型/02.类型兼容性/01.对象之间的类型兼容性.ts new file mode 100644 index 0000000..5abcd90 --- /dev/null +++ b/TypeScript/02.TS高级类型/02.类型兼容性/01.对象之间的类型兼容性.ts @@ -0,0 +1,23 @@ +// 两个类的兼容性演示： +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