code

01.TS常用类型/01.原始类型.ts

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

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

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

01.TS常用类型/03.联合类型.ts

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

01.TS常用类型/04.类型别名.ts

@@ -1,5 +0,0 @@
-// 类型别名
-type CustomArray = (number | string)[]
-
-let arr: CustomArray = [1, 3, 5, 'a', 'b']
-let arr1: CustomArray = ['c', '6']

01.TS常用类型/05.函数类型.ts

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

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

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

01.TS常用类型/07.函数可选参数.ts

@@ -1,11 +0,0 @@
-// 函数的参数可传可不传，后面添加 ?
-// 可选参数只能出现在参数列表的最后，就是说可选参数后面不能再出现必选参数
-
-// start 和 end 参数可传可不传
-function mySlice(start?: number, end?: number): void {
-    console.log('起始索引：', start, '结束索引：', end)
-}
-
-mySlice()
-mySlice(1)
-mySlice(1, 3)

01.TS常用类型/08.对象类型.ts

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

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

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

01.TS常用类型/10.接口.ts

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

01.TS常用类型/11.接口继承.ts

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

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

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

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

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

01.TS常用类型/14..枚举类型.ts

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

01.TS常用类型/15.字符串枚举.ts

@@ -1,12 +0,0 @@
-enum Direction {
-    // 枚举中成员的值可以是字符串
-    // 字符串枚举没有自增行为，因此，字符串枚举的每个成员必须有初始值
-    Up = 'UP',
-    Down = 'DOWN',
-    Left = 'LEFT',
-    Right = 'RIGHT'
-}
-
-function changeDirection(direction: Direction) {}
-
-changeDirection(Direction.Up)

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

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

02.TS高级类型/01.class类/01.class基本使用.ts

@@ -1,12 +0,0 @@
-// class 类
-
-class Person {
-    age: number
-    gender = '男'
-    // gender: string = '男
-}
-
-const p = new Person()
-
-p.age
-p.gender

02.TS高级类型/01.class类/02.class的构造函数.ts

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

02.TS高级类型/01.class类/03.class实例方法.ts

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

02.TS高级类型/01.class类/04.class继承(extends).ts

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

02.TS高级类型/01.class类/05.class继承(implements).ts

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

02.TS高级类型/01.class类/06.class类的可见性修饰符(public).ts

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

02.TS高级类型/01.class类/07.class类可见修饰符(protected).ts

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

02.TS高级类型/01.class类/08.class类可见性修饰符(private).ts

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

02.TS高级类型/01.class类/09.readonly只读修饰符.ts

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

02.TS高级类型/02.类型兼容性/01.对象之间的类型兼容性.ts

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

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

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

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

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

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

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

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

@@ -1,17 +0,0 @@
-// 使用泛型创建一个函数
-
-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

@@ -1,32 +0,0 @@
-// 泛型约束的两种方式：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

@@ -1,16 +0,0 @@
-// 第二个类型变量受第一个类型变量约束
-
-// 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

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

@@ -1,24 +0,0 @@
-// 第一种
-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

@@ -1,18 +0,0 @@
-// 泛型工具类型：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

@@ -1,17 +0,0 @@
-// 泛型工具类型：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

@@ -1,10 +0,0 @@
-// 泛型工具类型：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

@@ -1,16 +0,0 @@
-// 泛型工具类型：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

@@ -1,21 +0,0 @@
-// 索引签名类型
-// 使用场景：无法确定对象中有哪些属性（或者对象中出现任意多个属性）  例：用户输入的内容
-
-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

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

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

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

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

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

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

@@ -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> {}
-
-// 无 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

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

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

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