1
interface RefString {
2
  value: string
3
}
4

5
interface RefNumber {
6
  value: number
7
}
8

9
interface RefBoolean {
10
  value: boolean
11
}
12

13
const r1: RefString = { value: 'hello' }
14
const r2: RefNumber = { value: 123 }
15
const r3: RefBoolean = { value: true }

1
class User {
2
  _name: string;
3

4
  constructor(name: string) {
5
    this._name = name
6
  }
7

8
  get name() {
9
    return this._name
10
  }
11

12
  set name(name: string) {
13
    this._name = name
14
  }
15
}
16

17
const u = new User('张三')
18
console.log(u.name)
19
u.name = '李四'
20
console.log(u.name)

1
interface User {
2
  name: string
3
  study(course: string): void
4
}
5

6
class UserImpl implements User {
7
  name: string;
8
  constructor(name: string) {
9
    this.name = name
10
  }
11
  study(course: string) {
12
    console.log(`[${this.name}]正在学习[${course}]`)
13
  }
14
  foo() { }
15
}
16

17
const user: User = new UserImpl('张三')
18
user.study('Typescript')
19
user.foo() // 错误，必须是接口中定义的方法

1
interface Flyable {
2
  fly(): void
3
}
4

5
class Animal {
6
  name: string;
7
  constructor(name: string) {
8
    this.name = name
9
  }
10
}
11

12
class Bird extends Animal implements Flyable {
13
  fly() {
14
    console.log(`${this.name}在飞翔`)
15
  }
16
}
17

18
const b: Flyable & Animal = new Bird("小花")
19
b.fly()

1
class Father {
2
  study(): void {
3
    console.log(`father study`)
4
  }
5
}
6

7
class Son extends Father {
8
  study(): void {
9
    super.study()
10
    console.log(`son study`)
11
  }
12
}
13

14
const f: Father = new Son()
15
f.study()

1
import { defineConfig } from 'vite'
2
import vue from '@vitejs/plugin-vue'
3

4
// https://vitejs.dev/config/
5
export default defineConfig({
6
  plugins: [vue()],
7
  server: {
8
    port: 7070,
9
    proxy: {
10
      '/api': {
11
        target: 'http://localhost:8080',
12
        changeOrigin: true
13
      }
14
    }
15
  }
16
})

1
<script setup lang="ts">
2
import { ref, reactive } from 'vue'
3
const u1 = ref({ name: '张三' })
4
const u2 = reactive({ name: '张三' })
5

6
function test() {
7
  console.log(u1.value)
8
  console.log(u2)
9
}
10

11
test()
12
</script>
13

14
<template>
15
  <h2>{{u1.name}}</h2>
16
  <h2>{{u2.name}}</h2>
17
</template>

1
<script setup lang="ts">
2
import { ref } from 'vue'
3
const count = ref(0)
4
function dec() {
5
  count.value--
6
}
7
function inc() {
8
  count.value++
9
}
10
</script>
11

12
<template>
13
  <input type="button" value="-" @click="dec">
14
  <h2>{{count}}</h2>
15
  <input type="button" value="+" @click="inc">
16
</template>

1
<script setup lang="ts">
2
import { ref } from "vue";
3
const user = ref({
4
  name:'张三',
5
  age:18,
6
  sex:'男',
7
  fav:['游泳','打球']
8
})
9

10
function saveUser() {
11
  console.log(user.value)
12
}
13
</script>
14

15
<template>
16
  <div class="outer">
17
    <div>
18
      <label for="">请输入姓名</label>
19
      <input type="text" v-model="user.name"/>
20
    </div>
21
    <div>
22
      <label for="">请输入年龄</label>
23
      <input type="text" v-model="user.age"/>
24
    </div>
25
    <div>
26
      <label for="">请选择性别</label>
27
      男 <input type="radio" value="男" v-model="user.sex"/>
28
      女 <input type="radio" value="女" v-model="user.sex"/>
29
    </div>
30
    <div>
31
      <label for="">请选择爱好</label>
32
      游泳 <input type="checkbox" value="游泳" v-model="user.fav"/>
33
      打球 <input type="checkbox" value="打球" v-model="user.fav"/>
34
      健身 <input type="checkbox" value="健身" v-model="user.fav"/>
35
    </div>
36
    <div>
37
      <input type="button" value="保存" @click="saveUser">
38
    </div>
39
  </div>
40
</template>
41

42
<style scoped>
43
  div {
44
    margin-bottom: 8px;
45
  }
46
  .outer {
47
    width: 100%;
48
    position: relative;
49
    padding-left: 80px;
50
  }
51
  label {
52
    text-align: left;
53
    width: 100px;
54
    display: inline-block;
55
    position: absolute;
56
    left :0;
57
  }
58
</style>

1
<script setup lang="ts">
2
import { ref, computed } from 'vue'
3
const firstName = ref('三')
4
const lastName = ref('张')
5
const fullName = computed(() => {
6
  console.log('enter')
7
  return lastName.value + firstName.value
8
})
9
</script>
10

11
<template>
12
  <h2>{{fullName}}</h2>
13
  <h3>{{fullName}}</h3>
14
  <h4>{{fullName}}</h4>
15
</template>

1
<script setup lang="ts">
2
import { ref } from 'vue'
3
const firstName = ref('三')
4
const lastName = ref('张')
5
function fullName() {
6
  console.log('enter')
7
  return lastName.value + firstName.value
8
}
9
</script>
10

11
<template>
12
  <h2>{{fullName()}}</h2>
13
  <h3>{{fullName()}}</h3>
14
  <h4>{{fullName()}}</h4>
15
</template>

1
function get(url: string) {
2
  return new Promise((resolve, reject)=>{
3
    const xhr = new XMLHttpRequest()
4
    xhr.onload = function() {
5
      if(xhr.status === 200){
6
        resolve(xhr.response)
7
      } else if(xhr.status === 404) {
8
        reject(xhr.response)
9
      } // 其它情况也需考虑，这里简化处理
10
    }
11
    xhr.open('GET', url)
12
    xhr.responseType = 'json'
13
    xhr.send()
14
  })
15
}

1
export interface Student {
2
  id: number;
3
  name: string;
4
  sex: string;
5
  age: number;
6
}
7

8
// 如果后端出错，返回的对象格式
9
export interface ApiError {
10
  timestamp: string,
11
  status: number,
12
  error: string,
13
  message: string,
14
  path: string
15
}
16

17
// 如果后端成功，返回 list 情况
18
export interface ApiList<T> {
19
  data: T[],
20
  message?: string,
21
  code: number
22
}
23

24
// 如果后端成功，返回 page 情况
25
export interface ApiPage<T> {
26
  data: { list: T[], total: number },
27
  message?: string,
28
  code: number
29
}
30

31
// 如果后端成功，返回 string 情况
32
export interface ApiString {
33
  data: string,
34
  message?: string,
35
  code: number
36
}
37

38
import { AxiosResponse } from 'axios'
39
export interface AxiosRespError extends AxiosResponse<ApiError> { }
40
export interface AxiosRespList<T> extends AxiosResponse<ApiList<T>> { }
41
export interface AxiosRespPage<T> extends AxiosResponse<ApiPage<T>> { }
42
export interface AxiosRespString extends AxiosResponse<ApiString> { }