TypeScript

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()

TypeScript/01.TS常用类型/02.数组类型.ts

@@ -0,0 +1,4 @@
+let numbers: number[] = [1, 3, 5]
+
+// 布尔值类型数组
+let boolean: boolean[] = [true, false]

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

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']

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))

TypeScript/01.TS常用类型/06.void类型.ts

@@ -0,0 +1,6 @@
+// 函数没有返回值，那么函数的返回值类型为 void
+function greet(name: string): void {
+    console.log('Hello', name)
+}
+
+greet('Ken')

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)

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) {}
+}

TypeScript/01.TS常用类型/09.对象可选属性.ts

@@ -0,0 +1,7 @@
+// 使用 axios({ ... }) 时，如果发送 get 请求， method 属性就可以省略
+function myAxios(config: { url: string; method?: string}) {}
+
+myAxios({
+    url: ''
+    // method 可填可不填
+})

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

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
+}

TypeScript/01.TS常用类型/12.元组.ts

@@ -0,0 +1,4 @@
+// 元组: 确切知道包含多少个元素，以及特定索引对应的类型
+
+// 规定数组只有两个元素，索引为 0 和 1 的元素类型是 number
+let position: [number, number] = [39, 114]

TypeScript/01.TS常用类型/13.类型推论.ts

@@ -0,0 +1,10 @@
+// 声明变量并立即初始化值，此时，可以省略类型注解
+let age = 20
+
+// 注意：如果声明变量但没有立即初始化值，此时，必须手动添加类型注解
+let a: number
+
+// 此时函数返回值类型可以省略
+function add(num1: number, num2: number) {
+    return num1 + num2
+}

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)

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)

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

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

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)

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)

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)

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)

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()

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()

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()

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'
+}

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()
+
+// 对象成员少的不能给对象多的