TS（基础）学习日记

1话不多说！直接开始！

首先在vscode里自动编译TS，终端创建 tsconfig.json 文件。因为刚开始学 TS 这样可以看到编译过后的 JS ，方便我们理解学习 TS。

tsc --init

在 tsconfig.json 中找到 "outDir": " '' 修改为 ./js，这样在创建 TS 文件的时候，会自动生成一个 JS 文件夹，在 html 中引入的时候找到生成的 JS 文件夹，引入 JS 文件中编译过后的 TS 文件即可（wabpack 或 vite 创建项目的请无视！）

"outDir": "./js", 

TS代码格式

(()=>{
 //代码内容
})()

1，TS 基础类型

（在TS中，给变量限制类型之后，该变量在 TS 的编译中只能按照 限制的类型给值，但是在 JS 中会编译成功）

布尔类型

let bool:boolean = true
    console.log(bool);

数值类型

let num:number = 429
    console.log(num);

字符串类型

let str:string = '哈喽'
    console.log(str);

null类型

let und:undefined = undefined
    console.log(und);

undefined类型

let nul:null = null
    console.log(nul);

2，数组

数组有两种方式可以定义，看自己喜欢那种就用那种

    //方式一
    let arr:number[] = [4,2,9]
    console.log(arr);
    // 方式二 
    let arrOne:Array<string> = ['你','好','TS']
    console.log(arrOne); 

3，元组

元组的意义就是，数据的类型在一开始就已经定义好了。后续的值需要和前面设置的类型位置一致！

let tuple:[number,string,boolean,undefined,number] = [4,'二九',true,undefined,429]
console.log(tuple);

4，any，unknown 类型

any和unknowm 类型属于偷懒行为！！！！

any

    //any类型可以储存任意类型
    let str:any = 429
    str = '四二九'
    str = null
    str = false
    str = undefined
    console.log(str);

unknown

unknown和any类型都可以储存任意类型，官方说辞更加安全

 //unknown类型也可以储存任意类型
    let unk:unknown = 999
    unk = '字符串'
    unk = true
    unk = undefined
    unk = null
    console.log(unk);

再次强调！！！any和unknown属于偷懒行为！！！

5，void类型

void代表该函数没有返回值，只可返回 null 及 undefined

//void类型代表该函数没有返回值
    function handel():void{
      console.log('void');
      return undefined //返回正常
      // return 429 //编译报错
    }
    console.log(handel());

6，对象类型

//对象类型
    function Obj(obj:object):object{
        console.log(obj);
        return {
            name:'里奥-梅西',
            age:34,
        }
    }
    console.log(Obj({name:'保罗-迪巴拉',age:26}));

7,TS函数

//小括号后面设置了类型一定要有返回值,返回值也一定要数值类型
    function handelFun(num:number,numOne:number):number {
        return num + numOne
    }
    const handel = handelFun(20,20)
    console.log(handel);
    
    const handelFun1 = (str:string,num:number):any => {
        return str + num
    }
    const handel1 = handelFun1('字符串',429)
    console.log(handel1);

8,函数可选参数-默认参数-剩余参数

默认参数-可选参数

//默认参数 name:string='你好' ,可选参数 listName?:string
    const handelFun = (fistName:string='你好TS',listName?:string):string =>{
         //如果传入 listName 打印 再见TS再见JS
        if(listName){
            return fistName + listName
        }else{ //如果没有传入打印 你好TS
            return fistName
        }
    }
    const handel = handelFun('再见TS','再见JS')
    // const handel = handelFun()
    console.log(handel);

剩余参数 语法: ... 必须放在最后

//剩余参数语法 ... 必须放在最后
    const handelFun = (str:string,str1:string,...arg:string[]):void => {
        console.log(str);//打印 A
        console.log(str1);// 打印 B
        console.log(arg);//打印数组 ["C","D","E","F","G"]
    }
    handelFun('A','B','C','D','E','F','G')

9,参数重载

顾名思义，当函数名字相同，函数参数及个数不同，就叫做重载

//函数重载声明
    function add(x: number, y: number): number
    function add(x: string, y: string): string
     //接收两个string类型,也可以接收number类型
    function add(x:string|number,y:string|number):string|number {
        if(typeof x === 'string' && typeof y === 'string'){
            return x+y //返回 梅西梅西
        }else if(typeof x === 'number' && typeof y === 'number'){
            return x+y //返回 30
        }
     }
    console.log(add('梅西','梅西'));
    console.log(add(10,20));

10，TS 联合类型，类型断言

联合类型可以定义多种基础类型

//此时 unite 这个变量可以赋值 数值-字符串-布尔
    let unite:number|boolean|string = '字符串'
    console.log(unite);

类型断言在不确定一个值是什么类型的时候去使用这个值，就需要使用断言

function getRes(srt:number|string):number{
        //<string>当前就是字符串类型
        //传进来的字符串走这个方法
        if((<string>srt).length){
            //语法方式一
            // return (<string>srt).length
            //语法方式二
            return (srt as string).length
        }else{
            //如果传进来的是数值，那么就走这个方法，转换成字符串
            return srt.toString().length
        }
    }
    console.log(getRes(429));
    console.log(getRes('字符串'));

11，接口

TS接口语法 ：interface 变量名 { key：value类型 }

//设置接口限制类型
    interface IPerson {
        //readonly属性,表示name这个值是只读
        readonly name : string,
        age:number,
        //sex后面的?,表示 sex 这个key可有可无
        sex?:string
    }
    //绑定 IPerson 所以这里使用的key:value类型要与 IPerson 一致
    let person:IPerson = {
        //name,age 为必填项
        name:'梅西', //只读属性
        age:34,
        //sex 可有可无,因为接口设置了非必填
        sex:'男'
    }
    console.log(person);

12，接口函数类型

 //接口函数类型
    interface IFun {
        (x:number,y:number):boolean
    }
    const funJson:IFun = (x:number,y:number):boolean => {
        //x > y = true x < y = false
        return x > y 
    }
    const num = funJson(20,10)
    console.log(num);

13，泛型

泛型在TS中也是相当主要的一环，我这里只写基础。ps：难的不会

泛型的意义：定义函数,接口,类的时候,不能预先确定使用的类型,而是在使用的时候才能确定数据的类型

//泛型基础使用
    //<K> 是定义即将传来的数据类型
    function getArr1<K>(value: K, count: number): K[] {
        //根据数据和数量产生数组
        const arr: K[]  = []
        for (let i = 0; i < count; i++) {
            arr.push(value)
        }
        return arr
    }
    // getArr1<string> 定义数据类型
    const arr2 = getArr1<string>('梅西',9)
    console.log(arr2);//打印 九个梅西

    //多个参数泛型
    function getArr3<K,V>(name:K,age:V):[K,V] {
        return [name,age]
    }
    const arr3 = getArr3<boolean,number>(true,22)
    console.log(arr3); //打印 true,22


    const handel = <K,T>(name:K,age:T ):[K,T] => {
        return [name , age]
    }
    const res = handel<string,number>('梅西',34)
    console.log(res); 

14，泛型接口约束

interface ILength {
        //约束 length 必须是数字
        length:number
    }

    // <K extends ILength> extends 绑定约束的接口
    function add<K extends ILength>(x:K):number{
        return x.length
    }
    const add1 = add<string>('2022世界杯')
    console.log(add1);

15，TS类型

关键词 type

//联合类型限制
    type Ref = string | number
    let res:Ref = '字符串'
    res = 429
    console.log(res);
    //对象类型限制
    type State = {
        name:string,
        age:number
    }
    let obj:State = {
        name:'字符串',
        age:999
    }
    console.log(obj);

我这里没有写关于类的，因为目前技术栈没有用到 TS ，所以先写一些基础的语法。慢慢转换到TS，建议大家有精力的还有多去看一下类，就是写一下自己的笔记，帮大家快速学习基础。看文档的话一天也就差不多上手了。基础业务这些应该差不多够用了