Typescript

Typescript给Javascript带来了类型系统，带来了更智能的提示和丝滑的开发体验，Javascript中变量可以赋值任意类型的值，这在大型系统中会增加代码的维护难度，Typescript有点像三体人，每个变量的类型，每个函数的参数结构都对外清晰可见，是构建大型项目和框架的必备技术

Typescript是图灵完备的类型系统，类型可以写递归，初学者不要陷入复杂的类型体操，而是要专注功能的实现,我用代码演示几个使用场景, 这些代码搞明白就算入门了

// 1. 自己定义变量可以设置基本类型
let courseName:string = '玩转Vue3全家桶'
let price:number = 129
let isOnline:boolean = true
let courseSales:undefined
let me:[string,number] = ["大圣",18]
// 2. 对象类型
interface course {
    name:string,
    price:number[],
    avatar?:string|boolean,
    readonly address:string
}
//3 函数类型
type addType = (a:number,b:number)=>number
interface addType1{
    (a:number,b:number):number
}
let add2:addType  = function(x: number, y: number): number {
    return x + y;
}
// 4. 宿主环境的类型TS提供了
let w:Window = window
let ele:HTMLElement = document.createElement('div')
ele.addEventListener('click',function(e:MouseEvent){
    w.alert(1)
},false)

// 5 泛型 （难点）
// <T>就是<某种类型>的意思，就是定义了一个类型变量，通过extends控制类型

function test<某种类型>(args:某种类型):某种类型{
    return args
}
type ExtendsType<T> = T extends boolean ? "重学前端" : "玩转Vue3"
function getProperty<T, K extends keyof T>(o: T, name: K): T[K] {
    return o[name]
}
type ReturnType1<T> = T extends ()=>infer P ?P:never 

// 6. 用到框架中的源码
import {ref, Ref} from 'vue'
const props = defineProps<{ title: string value?: number}>()

interface Todo{
  title:string,
  done:boolean
}
let todos:Ref<Todo[]> = ref([{title:'学习Vue',done:false}])

const App: React.FC<IProps> = (props) => {
  const [count, setCount] = useState<number>(1)
  return (
    <div className="App">
      <h1>hello world</h1>
      <h2>{count}</h2>
    </div>
  );
}
// 7.网络接口的类型
// 限制前后端接口的Typescript类型，限制参数传递，前后端联调爽歪歪
import axios from 'axios'
function request<T extends keyof API>(url:T,obj:Api[T]){
    return axios.post(url,obj)
}
interface Api{
    '/course/buy':{
        id:number
    },
    '/course/comment':{
        id:number,
        message:string
    }
}
request('/course/buy',{id:1})
request('/course/comment',{id:1,message:'嘎嘎好看'})
request('/course/comment',{id:1}) //如果message必传 类型提醒缺少参数
request('/course/404',{id:1}) //接口不存在 类型报错

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

Typescript

技术文档

免费文章和教程

免费视频

书籍推荐

付费课程

# Typescript

# 技术文档

# 免费文章和教程

# 免费视频

# 书籍推荐

# 付费课程

Typescript

技术文档

免费文章和教程

免费视频

书籍推荐

付费课程