Browse Source

TypeScript

master
MYW 2 years ago
parent
commit
09e8148e38
  1. 11
      01.TS常用类型/01.原始类型.ts
  2. 4
      01.TS常用类型/02.数组类型.ts
  3. 6
      01.TS常用类型/03.联合类型.ts
  4. 5
      01.TS常用类型/04.类型别名.ts
  5. 22
      01.TS常用类型/05.函数类型.ts
  6. 6
      01.TS常用类型/06.void类型.ts
  7. 11
      01.TS常用类型/07.函数可选参数.ts
  8. 21
      01.TS常用类型/08.对象类型.ts
  9. 7
      01.TS常用类型/09.对象可选属性.ts
  10. 32
      01.TS常用类型/10.接口.ts
  11. 14
      01.TS常用类型/11.接口继承.ts
  12. 4
      01.TS常用类型/12.元组.ts
  13. 10
      01.TS常用类型/13.类型推论.ts
  14. 20
      01.TS常用类型/14..枚举类型.ts
  15. 12
      01.TS常用类型/15.字符串枚举.ts
  16. 14
      01.TS常用类型/16.typeof运算符.ts
  17. 12
      02.TS高级类型/01.class类/01.class基本使用.ts
  18. 13
      02.TS高级类型/01.class类/02.class的构造函数.ts
  19. 15
      02.TS高级类型/01.class类/03.class实例方法.ts
  20. 23
      02.TS高级类型/01.class类/04.class继承(extends).ts
  21. 18
      02.TS高级类型/01.class类/05.class继承(implements).ts
  22. 18
      02.TS高级类型/01.class类/06.class类的可见性修饰符(public).ts
  23. 28
      02.TS高级类型/01.class类/07.class类可见修饰符(protected).ts
  24. 32
      02.TS高级类型/01.class类/08.class类可见性修饰符(private).ts
  25. 27
      02.TS高级类型/01.class类/09.readonly只读修饰符.ts
  26. 23
      02.TS高级类型/02.类型兼容性/01.对象之间的类型兼容性.ts
  27. 44
      02.TS高级类型/02.类型兼容性/02.函数类型兼容性(参数个数和类型).ts
  28. 20
      02.TS高级类型/02.类型兼容性/03.函数类型兼容性(返回值类型).ts
  29. 21
      02.TS高级类型/02.类型兼容性/04.交叉类型.ts
  30. 17
      02.TS高级类型/03.泛型/01.泛型.ts
  31. 32
      02.TS高级类型/03.泛型/02.泛型约束.ts
  32. 16
      02.TS高级类型/03.泛型/03.多个泛型变量情况.ts
  33. 14
      02.TS高级类型/03.泛型/04.泛型接口.ts
  34. 24
      02.TS高级类型/03.泛型/05.泛型类.ts
  35. 18
      02.TS高级类型/03.泛型/06.泛型工具类型(Partial).ts
  36. 17
      02.TS高级类型/03.泛型/07.泛型工具类型(Readonly).ts
  37. 10
      02.TS高级类型/03.泛型/08.泛型工具类型(Pick).ts
  38. 16
      02.TS高级类型/03.泛型/09.泛型工具类型(Record).ts
  39. 21
      02.TS高级类型/04.索引签名类型.ts
  40. 20
      02.TS高级类型/05.映射类型.ts
  41. 21
      02.TS高级类型/06.索引查询类型.ts
  42. 26
      03.React中使用TS/01.函数组件的类型.tsx
  43. 27
      03.React中使用TS/02.函数默认值.tsx
  44. 37
      03.React中使用TS/03.事件绑定和事件对象.tsx
  45. 23
      03.React中使用TS/04.组件类型.tsx
  46. 27
      03.React中使用TS/05.组件的属性.tsx
  47. 33
      03.React中使用TS/06.组件状态和事件.tsx
  48. 1
      04.任务列表案例/todo_ts

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

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

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

6
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

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

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

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

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

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

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

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

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

32
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

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

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

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

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

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

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

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

14
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

12
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

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

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

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

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

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

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

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

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

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

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

20
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

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

17
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类型

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

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

14
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]
}
}

24
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

18
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 = {}

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

10
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 属性

16
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[]
}

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

20
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

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

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

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

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

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

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

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

1
04.任务列表案例/todo_ts

@ -0,0 +1 @@
Subproject commit a84df5e9d9ddde109fefb41f90e5d3e48a0c855a
Loading…
Cancel
Save