ts ===函数 约束

// 函数是javascript 的 一等公民

// ts中，一个函数会有 输入 和 输出；要在ts中 对 输入和输出 进行 限制；需要 都考虑

// 函数的 定义？

// 1. 函数声明法
// function fn1(x:number,y:number):void{
//     console.log(x+y)
//     return x + y
// }

// 语法 ：  function 函数名(参数1:数据类型,参数2:数据类型):输出的数据类型

// function fn1(x:number,y:number):string{
//     console.log(x+y)
//     return x + y + ''
// }

// fn1(1,10)




// 2. 表达式法
// var fn2 = function(){

// }

// let fn3:(x:number,y:number)=>number = function(x:number,y:number):number{
//     return x + y
// }
// console.log(fn2(1,2));

// 函数 约束

/**
 * 
 *      参数   => 返回值 
 *      
 * 
 */
// let fn2:(x:number,y:number)=>number;

// fn2 = function(x:number,y:number):number{
//     return x + y
// }



// let num:number = 10 // 直接定义好的类型

// let num1 = 10 依靠类型 推论 定义 num1的类型




// 接口约束函数

// let fn1:(x:number,y:number)=>number;
// fn1 = function(x:number,y:number):number{
//     return x + y
// }

// 接口 形式 约束 函数

interface IFun {
    (x: number, y: number): number
}

let fn1: IFun;
fn1 = function (x: number, y: number): number {
    return x + y
}

 什么是ts  添加了类型系统的js，适用于任何规模

         ts的特性： 类型系统 任何规模

        特征：

        ts的数据类型：

         number string boolean null undefined any void enum array tuple never..

         类型 推论

       没有制定类型；ts会自动推测出一个类型

==================================================================================================================================================

// 数组 元组  str  num  booolean .....
// 万物皆 对象
// [1,2,3,4,5,6]  [{},{},{}]

// 接口：在 ts中 ； 我们可以使用 接口 （interface）来 定义 或者约束 对象

// 面向对象的编程语言中，接口 是一个 很重要的概念；对行为进行抽象

// ts 可以 对 对象的 形状 进行 描述

// 定义了 一个 用户的接口；用这个 接口 来约束 每一个 用户

// 接口的 语法 ：

/****
 * 
 * interface 接口名字 {
 *  key: value,
 *  key1:value1
 *  
 * }
 * 
 * 
 */


/**
 * 定义用户接口 IUser {
 *  name:用户姓名，必须是字符串
 *  age: 用户年纪，必须是 数字类型
 *  
 * }
 * 
 */
// interface IUser {
//     name: string,
//     age: number,
// }

// let lily:IUser = {
//     name: '',
//     age: 10
// }

// let num:number = 1

// 接口 约束 对象 ；增加 变量 和 减少变量是不允许的；赋值的时候；对象的形状和 接口的形状必须保持一致
// lily.gender = '女'



// 2. 可选属性 约束类型的时候 添加一个 ？

// 定义一个 接口；并且用这个 接口去 约束 对象;用户的电话 号码  是 选填的
// interface IUser {
//     name: string,
//     age: number,
//     tel?: number
// }

// let tom:IUser = {
//     name: 'tom',
//     age: 10
// }
// //可选属性可以填写 也可以不填写
// tom.tel = 1

// 但是 不能添加 其他属性
// tom.gender = 'nan' // 报错



// 3. 任意 属性  

// 语法 [prop:string]: any

// 一旦添加了 任意类型，其他类型必须是 任意类型的 字类型

// interface IUser {
//     username: string,
//     password: string,
//     isgrow: boolean,
//     age: number,
//     [prop:string]: any
// }

// let user:IUser = {
//     username: '',
//     password: '',
//     isgrow: true,
//     age:10
// }
// user.weixin = 'ad'
// user.tel = '1'


// 只读 的 属性  在 接口变量   前 添加 readonly

interface IObj {
    readonly id: number,
    name: string,
    tel: number
}

let  user:IObj = {
    id: 1,
    name: '',
    tel: 1
}

// 只读 属性  约束的是 第一次 给 对象 赋值的时候；而不是 第一次 给 只读 属性 赋值的时候
// user.id = 1

user.name = 'ad'

// 用 接口 约束 ajax

// function ajax(params){
//     var xhr = new XMLHttpRequest()
//     xhr.open(params.method,params.url)
//     xhr.send(params.data)

//     xhr.onreadystatechange = function(){

//     }
// }

==================================================================================================================================================

封装AJAX

// 封装 一个 ajax,使用接口 约束  参数

//  定义一个接口 约束 ajax的传参数
// interface Iparams {
//     method: string,
//     url: string,
//     data?: any
// }

/***
 * params参数 必传 method
 * params参数 必传 url
 */

// function ajax(params:Iparams){
//     // 实例化 ajax的 核心对象；是因为这个核心 对象 是在 浏览器内 内置的
//     let xhr = new XMLHttpRequest()
//     // open  建立连接 （请求方式，）
//     // 请求 方式：  get post put  delete option head ...
//     xhr.open(params.method,params.url)

//     // 发送请求

//     xhr.send(params.data)

//     // 接收 ajax返回的数据

//     xhr.onreadystatechange = function(){
//         if(xhr.readyState==4 && xhr.status == 200){
//             console.log(xhr.response)
//         }
//     }
// }

// 别人调用 你封装的 ajax的时候
// ajax({method: 'get',url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'})




 // 2. 可索引的 接口  接口可以约束 对象/ 数组 了解的知识点  -- 用的不多

// interface IOBj {
//     [a:string]: string
// }

// let obj:IOBj = {
//     name:'',
//     age: '' 
// }

interface Iarr {
    [a:number]: string
}

// let arr:Iarr = ['','',1]// 报错






//自己的代码
// 接口  约束  ajax

// interface IUrldata {
//     url: string,
//     data?: any,
//     method: string
// }

// let params: IUrldata = {
//     url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
//     data: '',
//     method: 'get'
// }


// function ajax(params: IUrldata) {
//     //创建异步对象
//     var xhr = new XMLHttpRequest()
//     //设置请求行open()
//     xhr.open(params.method, params.url)
//     //发送请求
//     xhr.send(params.data)

//     xhr.onreadystatechange = function () {
//         if (xhr.readyState == 4 && xhr.status == 200) {
//             console.log(xhr.response);
//         }
//     }
// }
// ajax(params)

联合

// 联合 类型： 变量的取值 可以为 多个数据类型的 一种

// 想声明 一个 变量 ； 这个 变量 可以是 数字 或者 字符串类型；不能是其他类型

// let a:any = 1 // 不可以

// let a:string|number = 1

// a = 'hello'

// a = 10

// a = true // 错误的




// 元组  越界值 的时候；其他数据 需 符合联合 类型

// let arr:[string,number] = ['',1]

// arr.push(1)

// arr.push(true)