• TS初体验

    一、TS初体验

    1.1.什么是Typescript?

    1.Typescript 是JavaScript 的一个超集，支持ECMAScript 6标准。 2.Typescript 由微软开发的自由和开源的编程语言。 3.TypeScript 设计目标是开发大型应用，它可以编译成纯JavaScript，编译出来的JavaScript可以运行在任何浏览器上 4.TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

    1.2. JS 与TS的区别

    1. TypeScript是JavaScript 的超集，扩展了JavaScript的语法，因此现有的JavaScript代码可与TypeScript一起工作无需任何修改，TypeScript通过类型注解提供编译时的静态类型检查。 2TypeScript可处理已有的JavaScript代码，并只对其中的TypeScript代码进行编译。

    1.3.搭建开发环境

    1.安装VSCode

    2.安装Node.js：使用命令node -v来检测node.js的版本

    3.安装TypeScript编译器：npm i typescript -g

    4.tsc --init 生成配置文件

    5.使用tsc命令来转换TS为JS tsc 文件名

    6.自动编译 tsc --watch

    1.4. ts初体验

    1. function text(msg:string) {
    2.     console.log(msg.length)
    3. }
    4. text("随机数")
    5. text("嗯嗯嗯")
    6. 使用export default{}//可以避免作用域污染

    二、TS基础数据类型

    2.1.基础数据类型

    数值类型、布尔类型、字符串类型

    1. export default{}
    2. // 数值型
    3. let num:Number;
    4. num=100
    5. // num ="11"
    6. num=3.14
    7. console.log(num)
    8. // 布尔类型
    9. let flage:boolean;
    10. flage=true
    11. flage=false
    12. ​
    13. // 字符串
    14. let beauty:String;
    15. beauty="张三";
    16. let str=`我的律师是${beauty}`
    17. console.log(str)

    2.2.数组

    数组分为：数组的基本使用、联合类型、任意类型

    联合类型可以同时写多个类型的

    1. export default{}
    2. // 数组的基本使用
    3. // 方式一
    4. let beautyArr:string[];
    5. beautyArr=["张三","李四","王五","周六"]
    6. // beautyArr=["张三","李四","王五","周六",100]//报错
    7. console.log(beautyArr)
    8. // 方法二
    9. let numArr:Array<number>;
    10. numArr=[1,2,3,45,6]
    11. // numArr=[1,2,3,45,6,"sss"]//报错
    12. ​
    13. // 联合类型
    14. let myBeauty:(number|string|boolean)[]
    15. myBeauty=[12,"张三",true,10,"李四"]
    16. console.log(myBeauty)
    17. // 任意类型
    18. let test:any[]
    19. test=[12,"张三",true,10,"李四"]

    2.3.元组

    1.元祖类型Tuple

    2. TS中的元祖类型其实就是数组类型的扩展

    3.元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同

    1. export default{}
    2. let tup:[string,number,boolean]
    3. tup=["张三",15,true]
    4. // tup=["张三",true,15]//报错
    5. // tup=["张三",15,true,"单词"]//超过长度报错
    6. console.log(tup)
    7. ​

    2.4. any和void

    1. any表示任意类型，当我们不清楚某个值的具体类型时候我们就可以使用any

    2.在TS中任何数据类型的值都可以赋值给any类型

    使用场景一、变量的值会动态改变时，比如来自用户输入，任意值类型可以让这些变量跳过编译阶段的类型检查

    1. let temp:any
    2. temp="lksm"
    3. temp=15
    4. temp=true

    使用场景二、 储存各种类型数据的数组时

    1. let arr:any[]=["张三",18,true]
    2. console.log(arr[0])

    void类型

    1.从某种程度上来讲，void类型与any类型相反，他表示没有任何类型

    2.当一个函数没有返回值时，你通常会见到其返回值类型是void

    3.在TS中只有null和undefined可以赋值个void

    1. function text():void{
    2.     console.log("sdcscsdcsdcdscdscdscds")
    3.     console.log("sdcscsdcsdcdscdscdscds")
    4. ​
    5. }
    6. text()
    7. // 在TS中只有null和undefined可以赋值个void
    8. let test:void;
    9. // test="sssc"
    10. // test=18
    11. // test=true
    12. test=null
    13. test=undefined

    2.5.undefined与null

    1.TS里 ，undefined与null两这都有自己的数据类型分别是undefined与null

    2.和void相似，他们的本身的类型用处不是很大

    1. export default{}
    2. ​
    3. ​
    4. // TS里 ，undefined与null两这都有自己的数据类型分别是undefined与null
    5. //  和void相似，他们的本身的类型用处不是很大
    6. ​
    7. let x:undefined=undefined
    8. let y:null=null
    9. // 他不能赋值其他类型
    10. // x="sscd"
    11. // x=111
    12. // y="scsdc"
    13. // y=10
    14. ​
    15. let mon:number=100;
    16. mon=null
    17. mon=undefined

    2.6.never与object

    Never类型

    1.never类型表示的是那些用不存在的值的类型

    2.例如：never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型

    3.变量也可能是never类型，当他被永远不为真的类型保护所约束

    1. function error(message:string):never{
    2.     throw new Error(message)
    3. }
    4. // error("报错")
    5.  
    6.  
    7. // 推断的返回值类型为never
    8. // function fali(){
    9. //     return error("ggg")
    10. // }
    11. // fali()
    12.  
    13. // 返回never的函数必须在无法到达的终点
    14. function loop():never{
    15. while(true){
    16.  
    17. }
    18. }

    obj类型

    1.表示一个对象

    2.定义了一个只能保存对象的变量

    1. let godess:object;
    2. // godess=true
    3. // godess="zzhas"
    4. // godess=18
    5. godess={name:"暂时",age:15}
    6. console.log(godess)

    2.7.枚举

    ts中的枚举类型和普通的js对象本质上没有区别，只是对于开发者来说，相较于直接使用值类型去做判断，枚举类型更易读，能够提升代码的可读性和易维护性

    1. export default{}
    2.  enum Gender{
    3.      Male,//男
    4.      Femal//女
    5.  }
    6.  let gender:Gender;
    7.  gender=Gender.Male
    8.  console.log(gender)
    9. // // 可以赋值数字
    10. gender=10
    11. 2.7.1.如果手动指定了前面枚举
    12.  
    13.  enum Gender{
    14.      Male=1,
    15.     Femal
    16.  }
    17.  console.log(Gender.Male)
    18.  console.log(Gender.Femal);

    注意：TS中的枚举的取值，默认是从上到下从0开始递增的

    1.虽然默认是从0开始递增的，但我们也可以手动的指定枚举的取值的值

    2.注意点：如果手动指定了前面枚举的取值，那后面的值会根据前面的值递增

    2.7.2.如果手动指定了后面枚举

    注意点：如果手动指定了后面枚举的取值，那前面的不受影响

    1.  enum Gender{
    2.      Male,
    3.      Femal=20
    4.  }
    5.  console.log(Gender.Male)
    6.  console.log(Gender.Femal);

    2.7.3.如果同时修改多个

    我们可以同时使用多个枚举的值，如果同时修改多个，那么修改什么就是什么

    1. enum Gender{
    2.     Male=200,
    3.     Femal=20
    4. }
    5. console.log(Gender.Male)
    6. console.log(Gender.Femal);
    7. 2.7.4.根据索引取值，值取索引
    8.  
    9.  enum Gender{
    10.     Male,
    11.     Femal
    12.  }
    13.  console.log(Gender.Femal)
    14.  console.log(Gender[0])

    2.7.5函数赋值

    根据函数的赋值更改值

    1.  const getNum=()=>200
    2. let gender:Gender;
    3. gender=Gender.Femal
    4. gender=100
    5. gender=getNum() 
    6. console.log(gender)

    2.7.6.字符串枚举

    字符串的枚举和数字的有区别不能直接赋值字符串和函数

    1. enum Direction{
    2.      Up="UPa",
    3.      Dow="Dowe"
    4.  }
    5.  console.log(Direction.Up)
    6.  console.log(Direction.Dow)
    7.  console.log(Direction[0])
    8.  console.log(Direction["Dow"])

    2.7.7.异构枚举

    查找的时候只能是数字不能是字符串

    1. enum Gender{
    2.     Male=1,
    3.     Femal="女"
    4.  
    5. }
    6. console.log(Gender.Male)
    7. console.log(Gender.Femal)
    8. console.log(Gender[1])
    9. console.log(Gender["女"])
    10. // 只能是数字不能是字符串

    2.8.bigint和symbol

    2.8.1.bigint

    bigint 数据类型是用来表示那些已经超出了 number 类型最大值的整数值，对于总是被诟病的整数溢出问题，使用了 bigint 后将完美解决

    1. export default{}
    2. let hun:bigint=BigInt(100);
    3. let hun2:bigint=100n;
    4. console.log(hun)
    5. console.log(hun2)

    注：BigInt()只有在你的json配置危机中es的版本改为2020才不会报错

    2.8.2.Symbol

    表示独一无二的值

    1. let firstName=Symbol("name")
    2. let seciondName=Symbol("name")
    3. // console.log(firstName)
    4. // console.log(seciondName)
    5. if(firstName===seciondName){
    6.     console.log("我们一样")
    7. }else{
    8.     console.log("我们不一样")//输出
    9.  
    10. }

    注：虽然他们的Symbol("name")都是一样的但是他们的地址是不一样的

    2.9.解构赋值

    2.9.1 数组解构赋值

    1.基本解构

    1. let arr=["张三","李四"]
    2. let [fister,name]=arr
    3. console.log(fister)
    4. console.log(name)

    2.扩展运算符（注：rect输出的是数组）

    1. let arr_1=["张三","李四","王五","赵六"]
    2. let [name1,...rect]=arr_1
    3. console.log(name1)
    4. console.log(rect)

    3.只输出自己想要的

    1. let arr_1=["张三","李四","王五","赵六"]
    2. let [,name,,rxt]=arr_1
    3. console.log(name)
    4. console.log(rxt);

    2.9.2.对象的解构赋值

    1. let obj={
    2.     uname:"张三",
    3.     age:18,
    4.     sex:"女"
    5. }
    6. let {uname,age,sex}=obj
    7. console.log(uname)
    8. console.log(age)
    9. console.log(sex)

    2.10.类型断言

    语法一、<类型>值

    1. let str="世界上最遥远的距离就是，你是if我是else，似乎一直相伴但又永远相离"
    2. let len=(<string>str).length
    3. console.log(len)

    语法二、值 as 类型

    1. let str="世界上最遥远的距离就是，你是if我是else，似乎一直相伴但又永远相离"
    2. let num=(str as string).length
    3. console.log(num);

    进阶，把他们放到一个函数里面传入多个值，做判断

    1. function typeArr(x:number|string){
    2.     // let len=(x as string).length
    3.     // console.log(len);
    4.     if(typeof x=="string"){
    5.         let len=(x as string).length
    6.     console.log(len);
    7.     }else{
    8.         console.log(x)
    9.     }
    10. }
    11. typeArr("世界上最遥远的距离就是，你是if我是else，似乎一直相伴但又永远相离")
    12. typeArr(100)

    2.11.type别名

    2.11.1.类型别名的基本使用

    1. type beautys="张三"|"李四"|"王五"|"赵六"
    2. let on:beautys
    3. // on="sac"//报错只能是beautys里面定义的
    4. on="张三"

    2.11.2.函数的使用

    1. type myFun=(a:number,b:number)=>number//箭头函数a和b都是数字类型返回值也是数字类型
    2. // 声明函数
    3. let fun:myFun=(a:number,b:number)=>a+b
    4. // 调用
    5. console.log(fun(1,2))

    2.11.3.对象的使用

    1. // 对象
    2. type myGooda={
    3.     uname:string,
    4.     age:number
    5.     sex:boolean
    6. }
    7. // 第一并使用他
    8. let yifi:myGooda={
    9.     uname:"sss",
    10.     age:18,
    11.     sex:true
    12. }
    13. let {uname,age,sex}=yifi
    14. console.log(uname)
    15. console.log(age)
    16. console.log(sex)

    注：type起完别名之后就和使用number之类的一样使用

    三、接口

    3.1接口的基本使用

    interface关键字

    1. export default{}
    2. // interface关键字
    3. interface IfullName{
    4.     uname:string
    5.     age:number
    6. }
    7. let good:IfullName={
    8.     uname:"张三",
    9.     age:20
    10. }
    11. console.log(good.uname)
    12. console.log(good.age)
    13.  
    14. //在函数中使用
    15. function say({uname,age}:IfullName):void{
    16.     console.log(`我叫${uname}，今年${age}岁了`)
    17. }
    18. say(good)

    3.2可选属性和只读属性

    3.2.1. 可选属性

    直接加?问号就行

    1. interface IfullName{
    2.     uname:string
    3.     sex:string
    4.     age?:number
    5. }
    6. let gooda:IfullName={
    7.     uname:"展示",
    8.     sex:"男"
    9. }

    3.2.2只读属性

    关键字readonly

    1. interface IInof{
    2.     readonly name:string
    3.    readonly sex:string
    4.    readonly age:number
    5. }
    6. let ine:IInof={
    7.    name:"王瑞利",
    8.     sex:"女",
    9.     age:60
    10. }

    注: readonly和const区别

    1.最简单的判断该用readonly还是const的方法是看要把他做成为变量使用还是作为一个属性

    2.作为变量使用的话是：const

    3.若作为属性则使用readonly

    3.3索引签名

    解决参数可多可少问题

    我们可以用前面学过的知识解决一下

    3.3.1使用可选参数

    1. interface IfullName{
    2.     fistrName:string
    3.     lastName:string
    4.     age?:number
    5. }
    6. let goddass1:IfullName={fistrName:"zhamgs",lastName:"lis",age:20}
    7. let goddass2:IfullName={fistrName:"zhamgs",lastName:"lis"}
    8. 3.3.2.使用变量（使用变量赋值方法）
    9.  
    10. let info={fistrName:"杨",lastName:"密",age:20,song:"挨打的"}
    11. let goddass3:IfullName=info
    12. console.log(goddass3)

    3.3.3.使用类型断言

    1. let goddass4:IfullName=({fistrName:"杨",lastName:"密",age:20,song:"挨打的",tv:"手机号传送的"})as IfullName
    2. console.log(goddass4)

    3.3.4.索引签名

    语法：[props:类型]:类型 如：[props:string]:string

    1. interface IBeatuy{
    2.     [props:string]:string
    3. }
    4. let goddass5:IBeatuy={name1:"李易峰",name2:"王入力",name3:"zhangs"}
    5. console.log(goddass5)
    6. interface IAge{
    7.     [props:string]:number
    8. }
    9. let goddass6:IAge={age1:20,age2:30,age3:40}
    10. console.log(goddass6)

    配合使用

    1. interface  IMyFullName{
    2.     fistrName:string
    3.     lastName:string
    4.     [props:string]:string
    5. } 
    6. let goddass7:IMyFullName={fistrName:"杨",lastName:"密",song:"挨打的",tv:"手机号传送的"}
    7. let goddass8:IMyFullName={fistrName:"杨",lastName:"密",song:"挨打的"}

    注：使用的时候一定要和定义的类型相同否则会报错

    3.4 函数接口

    1. export default{}
    2.  
    3.  
    4.  
    5. //定义函数接口
    6. interface IMakeMoney{
    7.     (salary:number,rewary:number):number
    8. } 
    9. let sum:IMakeMoney=function(x:number,y:number):number{
    10.     return x+y
    11. }
    12. let src=sum(1,2)
    13. console.log(src)

    3.5接口继承

    1. 3.5.1.单继承
    2.  
    3. // 单继承
    4. interface IPerson{
    5.     age:number
    6. }
    7. interface INme extends IPerson{
    8.     name :string
    9. }
    10. let person:INme={
    11.     name:"zhangs",
    12.     age:20
    13. }

    3.5.2.多继承

    1. // 多继承
    2. interface IFatherMoney{
    3.     m1:number
    4. }
    5. interface IMonththerMoney{
    6.     m2:number
    7. }
    8. interface ISon extends IFatherMoney,IMonththerMoney{
    9.     s1:number
    10. }
    11. let person2:ISon={
    12.     s1:1,
    13.     m1:2,
    14.     m2:3
    15. }
    16. console.log(`总共${person2.s1+person2.m1+person2.m2}`)

    注：1.不管是多继承还是单继承都是前面的继承后面的（前面为子后面的为父）

    2.多继承被继承的用逗号隔开

    3.6接口与类型别名的异同

    3.6.1.相同点

    1.都可以描述属性或方法

    1. type WomanStr={
    2.     name:string
    3.     age:number
    4.     show():void
    5. }
    6. interface IWomanStr{
    7.     name:string
    8.     age:number
    9.     show():void
    10. }

    2.都可以有类型别名

    1. let star1:WomanStr={
    2. name:"展示",
    3. age:20,
    4. show(){
    5.     console.log("加油")
    6. }
    7. }
    8. let star2:IWomanStr={
    9.     name:"lis",
    10.     age:80,
    11.     show(){
    12.         console.log("加油!!!!!!!!")
    13.     }
    14.     }
    15.     console.log(star1)
    16.     console.log(star2

    注意：第二个是接口W前面有一个I

    3.都可以扩展

    1.   type money1={
    2.         x1:number
    3.     }
    4.     type money2=money1&{
    5.         x2:number
    6.     }
    7.     let money:money2={
    8.         x1:50,
    9.         x2:20
    10.     }
    11.     console.log(money)
    12.  
    13.     interface IStar1{
    14.         name:string
    15.     }
    16.     interface IStar2 extends IStar1{
    17.         age:number
    18.     }
    19.     let star:IStar2={
    20.         name:"范冰冰",
    21.         age:20
    22.     }
    23.     console.log(star)

    3.6.2.不同点

    1.type可以声明基本数据类型，联合类型，数组等

    interface只能声明变量

    1. type t1=number
    2.     type t2=string
    3.     type t3=number[]
    4.     type t4=[number|boolean]
    5.  
    6.      interface s=string//报错

    2.当出现使用type和interface声明同名变量时

    type会直接报错

    interface会进行组合

    1.   type Name={
    2.         name:string
    3.     }
    4.     type Name={
    5.         name:string
    6.     }//报错
    7.  
    8.     interface IName{
    9.         name1:string
    10.     }
    11.     interface IName{
    12.         name1:string
    13.         age:number
    14.     }
    15.     let Name:IName={
    16.         name1:"zhas",
    17.         age:20
    18.     }
    19.     console.log(Name)

  • 相关阅读:
    Vue3使用Svgaplayer进行.svga动画的播放
    Cpp(Python)和MATLAB差动驱动ROS Raspberry Pi全功能机器人原型
    基于python-django协同过滤豆瓣电影推荐系统
    sealos 离线安装k8s
    MySQL高频面试题
    Linux下安装lrzsz/JDK/Tomcat/MySQL/Git/Maven/Redis
    install Oracle JDK in Linux:安装oracle JDK in linux
    LabVIEW通过VISA读取或写入时出现超时错误-1073807339
    IDEA2020.3无法输入中文问题解决
    【后端】Java学习笔记（二周目-1）
  • 原文地址：https://blog.csdn.net/sh2001824/article/details/126775505