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

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

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

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

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

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

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

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

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)

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

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

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

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

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

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

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

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

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

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)

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)

01.TS常用类型/16.typeof运算符.ts

@@ -0,0 +1,14 @@
+// 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

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

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)

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)

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)

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)

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

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

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

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

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

02.TS高级类型/02.类型兼容性/02.函数类型兼容性(参数个数和类型).ts

@@ -0,0 +1,44 @@
+// 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
+
+// 参数少的可以赋值给参数多的，但是参数多的不可以赋值给参数少的

02.TS高级类型/02.类型兼容性/03.函数类型兼容性(返回值类型).ts

@@ -0,0 +1,20 @@
+// 返回值类型：只关注返回值类型本身
+
+// 返回值类型是原始类型：
+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

02.TS高级类型/02.类型兼容性/04.交叉类型.ts

@@ -0,0 +1,21 @@
+// 交叉类型：功能类似 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
+    }
+}

02.TS高级类型/03.泛型/01.泛型.ts

@@ -0,0 +1,17 @@
+// 使用泛型创建一个函数
+
+function id<Type>(value: Type) : Type {       // <Type> 相当于是一个占位符
+    return value
+}
+
+// 调用泛型函数：
+// 1.以 number 类型调用泛型函数
+const num = id<number>(10)
+
+// 2.以 string 类型调用泛型函数
+const str = id<string>('a')
+const ret = id<boolean>(false)
+
+// 泛型简写
+let num1 = id(100)        // number类型
+let str1 = id('abc')      // string类型

02.TS高级类型/03.泛型/02.泛型约束.ts

@@ -0,0 +1,32 @@
+// 泛型约束的两种方式：1.指定更加具体的类型  2.添加约束
+
+function id<Type>(value: Type) : Type {
+    // Type 是表示任意类型的，导致 value 没办法访问任何属性和方法
+    // console.log(value.length)          // length 会报错
+    return value
+}
+
+// 第一种：指定更加具体的类型
+// 将类型修改为 Type[] ( Type 类型的数组 )，因为只要是数组就一定存在 length 属性，所以可以访问
+function id2<Type>(value: Type[]) : Type[] {
+    console.log(value.length)
+    return value
+}
+
+
+// 第二种：添加约束
+interface ILength { length: number }
+
+// 这里的 extends 不是继承，而是表示 Type 要满足 ILength 中 length 属性的约束
+function id3 <Type extends ILength> (value: Type) : Type {
+    value.length
+    return value
+}
+
+// 只要满足 length 属性就可以
+id3(['a', 'x'])
+id3('abc')
+id3({length: 10, name: 'jack'})
+
+// 错误演示
+// id3(123)

02.TS高级类型/03.泛型/03.多个泛型变量情况.ts

@@ -0,0 +1,16 @@
+// 第二个类型变量受第一个类型变量约束
+
+// Key 受 Type 约束（Key 要满足 Type 中的属性）
+function getProp<Type, Key extends keyof Type>(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)

02.TS高级类型/03.泛型/04.泛型接口.ts

@@ -0,0 +1,14 @@
+interface IdFunc<Type> {
+    id: (balue: Type) => Type
+    ids: () => Type[]
+}
+
+// 需要指定显示类型
+let obj: IdFunc<number> = {    // 指定显示的类型为 number
+    id(value) {
+        return value
+    },
+    ids() {
+        return [1, 3, 5]
+    }
+}

02.TS高级类型/03.泛型/05.泛型类.ts

@@ -0,0 +1,24 @@
+// 第一种
+class GenericNumber<NumType> {
+    defaultValue: NumType
+    add: (x: NumType, y: NumType) => NumType
+}
+
+// 明确指定 <类型>
+const myNum = new GenericNumber<number>()
+myNum.defaultValue = 10
+
+
+// 第二种
+class GenericNumber2<NumType> {
+    defaultValue: NumType
+    add: (x: NumType, y: NumType) => NumType
+
+    constructor(value: NumType) {
+        this.defaultValue = value
+    }
+}
+
+// 省略类型
+const myNum2 = new GenericNumber()
+myNum.defaultValue = 10

02.TS高级类型/03.泛型/06.泛型工具类型(Partial).ts

@@ -0,0 +1,18 @@
+// 泛型工具类型：Partial<Type> 用来构造（创建）一个类型，将 Type 的所有属性设置为可选 
+
+interface Props {
+    id: string
+    children: number[]
+}
+
+// 使用 泛型工具 Partial
+type PartialProps = Partial<Props>
+
+// 没有用泛型工具，属性是必加的
+let p1: Props = {
+    id: '',
+    children: [1]
+}
+
+// 加入 PartialProps 后，属性可加可不加
+let p2: PartialProps = {}

02.TS高级类型/03.泛型/07.泛型工具类型(Readonly).ts

@@ -0,0 +1,17 @@
+// 泛型工具类型：Readonly<Type>  将 Type 的所有属性都设置为 readonly（只读）
+
+interface Props {
+    id: string
+    children: number[]
+}
+
+type ReadonlyProps = Readonly<Props>
+
+// 所有属性都是只读
+let p1: ReadonlyProps = {
+    id: '1',
+    children: [1, 3]
+}
+
+// 属性是只读，不能修改
+// p1.id = '2'

02.TS高级类型/03.泛型/08.泛型工具类型(Pick).ts

@@ -0,0 +1,10 @@
+// 泛型工具类型：Pick<Type, Keys>  从 Type 中选择一组属性来构造新类型
+
+interface Props{
+    id: string
+    title: string 
+    children: number[]
+}
+
+// 从 Props 中选择两个属性给 PickProps
+type PickProps = Pick<Props, 'id' | 'title'>    // PickProps 具有 Props 的 id 和 title 属性

02.TS高级类型/03.泛型/09.泛型工具类型(Record).ts

@@ -0,0 +1,16 @@
+// 泛型工具类型：Record<Keys, type> 构造一个对象类型，属性键为 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[]
+}

02.TS高级类型/04.索引签名类型.ts

@@ -0,0 +1,21 @@
+// 索引签名类型
+// 使用场景：无法确定对象中有哪些属性（或者对象中出现任意多个属性）  例：用户输入的内容
+
+interface AnyObject {
+    // 字符串的键都可以出现在 AnyObject 对象中
+    [key: string] : number         // key 表示一个占位符（可以更改名字），number 表示属性的值的类型
+}
+
+let obj: AnyObject = {
+    a: 1,
+    abc: 123,
+}
+
+
+// 在数组中使用
+interface MyArray<Type> {
+    [index: number]: Type
+}
+
+let arr1 : MyArray<number> = [1, 3, 5]
+arr1[0]

02.TS高级类型/05.映射类型.ts

@@ -0,0 +1,20 @@
+// 映射类型：基于旧类型创建新类型
+
+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

02.TS高级类型/06.索引查询类型.ts

@@ -0,0 +1,21 @@
+type Props = { a: number; b: string; c: boolean }
+
+// 查看 Props 中 a 的类型
+type TypeA = Props['a']
+
+// 模拟 Partial 类型：
+type MyPartial<T> = {
+    [P in keyof T]?: T[P]        // p 相当于 key
+}
+
+type PartialProps = MyPartial<Props>
+
+
+// 索引其它查询方式：同时查询多个索引的类型
+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]

03.React中使用TS/01.函数组件的类型.tsx

@@ -0,0 +1,26 @@
+import ReactDOM from "react-dom";
+import { FC } from "react";
+
+// React 函数组件的类型以及组件的属性
+
+type Props = { name: string; age?: number}
+
+// 第一种：
+const Hello: FC<Props> = ( { name, age } ) => (
+  <div>我是：{name}, 我 { age } 岁</div>
+)
+
+// 第二种（简化）：
+const HI = ({ name, age }: Props) => (
+  <div>
+  我是：{name}, 我 { age } 岁
+  </div>
+)
+
+const App = () => <div>
+  {/* name 是必填的 */}
+  <Hello name="jack" age={ 30 }/>
+  <HI name="Ken" age={ 20 }/>
+</div>
+
+ReactDOM.render(<App />, document.getElementById('root'))

03.React中使用TS/02.函数默认值.tsx

@@ -0,0 +1,27 @@
+import ReactDOM from "react-dom";
+
+// 函数的默认值
+
+type Props = { name: string; age?: number}
+
+// const Hello: FC<Props> = ( { name, age } ) => (
+//   <div>我是：{name}, 我 { age } 岁</div>
+// )
+
+// 提供默认属性
+// Hello.defaultProps = {
+//   age: 18                     // age 是可选属性，当没给 age 的值时，默认 age 的值为 18
+// }
+
+
+// 简化写法
+const Hello = ( { name, age = 18 }: Props ) => (         // 给 age 添加默认值 18
+  <div>我是：{name}, 我 { age } 岁</div>
+)
+
+const App = () => <div>
+  {/* name 是必填的 */}
+  <Hello name="jack" />
+</div>
+
+ReactDOM.render(<App />, document.getElementById('root'))

03.React中使用TS/03.事件绑定和事件对象.tsx

@@ -0,0 +1,37 @@
+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<HTMLButtonElement>) => {
+    console.log('赞！', e.currentTarget)
+  }
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    console.log(e.target.value)
+  }
+
+  return (
+    <div>
+      我是：{name}, 我 { age } 岁
+      <button onClick={onClick}>点赞</button>
+      <input onChange={onChange} />
+      {/* 可以利用 TS 的类型推论来查看事件对象类型（将鼠标放在 e 上可以查看） */}
+      {/* <input onChange={ e => {} } /> */}
+      </div>
+  )
+}
+
+const App = () => <div>
+  {/* name 是必填的 */}
+  <Hello name="jack" />
+</div>
+
+ReactDOM.render(<App />, document.getElementById('root'))

03.React中使用TS/04.组件类型.tsx

@@ -0,0 +1,23 @@
+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> {}
+
+// 无 props，有 state
+class C3 extends React.Component<{}, State> {}
+
+// 有 props，有 state
+class C4 extends React.Component<Props, State> {}
+
+const App = () => <div></div>
+
+ReactDOM.render(<App />, document.getElementById('root'))

03.React中使用TS/05.组件的属性.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+// 组件的属性
+
+type Props = { name: string; age?: number }
+class Hello extends React.Component<Props> {
+  // 在类组件中给 age 添加默认属性
+  static defaultProps: Partial<Props> = {
+    age: 20
+  }
+
+  render() {
+    const { name, age } = this.props
+    return (
+      <div>我是：{name}, 我 { age } 岁</div>
+    )
+  }
+}
+
+
+
+const App = () => <div>
+  <Hello name="Ken"/>
+</div>
+
+ReactDOM.render(<App />, document.getElementById('root'))

03.React中使用TS/06.组件状态和事件.tsx

@@ -0,0 +1,33 @@
+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 (
+      <div>
+      计数器: {this.state.count}
+      <button onClick={this.handleCLick}>+1</button>
+    </div>
+    )
+  }
+}
+
+
+const App = () => <div>
+  <Counter/>
+</div>
+
+ReactDOM.render(<App />, document.getElementById('root'))

04.任务列表案例/todo_ts

@@ -0,0 +1 @@
+Subproject commit a84df5e9d9ddde109fefb41f90e5d3e48a0c855a