TS语法

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}) ###接口不存在 类型报错