【TypeScript篇】详解TypeScript常用数据类型

今天药忘吃喽~ 2024-04-17 06:42 76阅读 0赞

#### 文章目录 ####

*  ?什么是TypeScript
 *  ?入门案例
 *  ?TypeScript常用类型
 *   *  ⭐代码实现
     *   *  ?字符串，数字，布尔类型
         *  ?字面量类型
         *  ?接口(interface)类型

![在这里插入图片描述][8bc6e333125f4a05818bf6c1cb2bd785.png]

## ?什么是TypeScript ##

TypeScript是一种由微软开发的开源编程语言，它是JavaScript的一个超集，意味着它包含了所有JavaScript的语法和特性，并且可以运行在任何支持JavaScript的浏览器或者操作系统上。TypeScript的目标是通过引入静态类型、类、模块等面向对象编程的概念来增加JavaScript的可维护性和可扩展性，从而提高大型应用程序的开发效率。  
就是在js基础上加上了类型支持  
![请添加图片描述][6705a72f8c224fab869d12bec1a94a90.jpeg]

TypeScript的基本语法和JavaScript非常相似，但是它添加了一些新的关键字和语法来支持静态类型检查和面向对象编程，例如接口、类、泛型、枚举、命名空间和模块等。

TypeScript还提供了强大的编辑器支持，可以在编码过程中即时检查类型错误和代码风格问题，从而减少调试时间和开发成本。此外，TypeScript还可以通过编译器将TypeScript代码转换为JavaScript代码，以便在浏览器中运行。

总之，TypeScript是一种功能强大的编程语言，可以帮助开发人员编写更具可维护性和可扩展性的JavaScript代码，并且在大型应用程序的开发过程中提高开发效率和代码质量。

![请添加图片描述][f0ebd890af934ec49e3de0cb4350d3a9.jpeg]

## ?入门案例 ##

新建一个文件，后缀是ts  
![在这里插入图片描述][18b4e5ee2cd94075a5d98024f3aa18a6.png]  
在文件中写入下面的代码

//提供ts代码，指定函数的参数类型是string
    function hello(msg:string)
    {
        
    	console.log(msg)
    }
    
    //传入的参数类型为number
    hello(123)

`在命令行输入tsc hello.ts`，进行编译运行  
![在这里插入图片描述][171eaed4288d4998a8be8de137722fa1.png]  
我们`使用node hello.js`来执行一下编译出来的js文件  
![在这里插入图片描述][772696295951410cbae8df2b00a1536f.png]

## ?TypeScript常用类型 ##

![请添加图片描述][de3aa3de141649c8a465ace1a1940870.jpeg]

> 下面我们创建ts工程，注意要勾选ts这个选项  
> ![在这里插入图片描述][e1b9015c48d140a9840e4d973ccbcee1.png]

![请添加图片描述][e1fdc5f1d4bf4a7aae8259b63faf8cd6.jpeg]

### ⭐代码实现 ###

> 我们创建一个文件夹，专门用于我们练习ts  
> ![在这里插入图片描述][72282ad2e9de47ceaa401b0226b52ade.png]

写入下面的代码

#### ?字符串，数字，布尔类型 ####

//字符串类型
    let username: string='abc'
    
    //数字类型
    
    let age: number = 20
    
    //布尔类型
    let isTrue: boolean=true
    
    console.log(username)
    console.log(age)
    console.log(isTrue)

`进入ts_test文件夹`后，在终端输入tsc .\\TSDemo1.ts进行编译  
编译完成后，会发现出现了js文件  
![在这里插入图片描述][b6b1fc57ae974400bfa999c602420228.png]  
然后在终端输入node .\\TSDemo1.js来运行代码  
![在这里插入图片描述][3118bfe6b63a4f3ea3752e4ea361b833.png]

#### ?字面量类型 ####

![请添加图片描述][a4771a001cd447e69a312f2b3a25afd5.jpeg]  
下面我们来演示一下代码

function printText(s: string,alignment:'left'|'right'|'center')
    {
        
        console.log(s,alignment)
    }
    printText('hello','left')

![在这里插入图片描述][aa6e9f7d00974d3d92e6ce487811c5fa.png]

#### ?接口(interface)类型 ####

![请添加图片描述][d9e62612ecff47bdb61e5432c34784d1.jpeg]  
下面我们来演示一下

//定义接口
    interface Cat{
        
        name:String,
        age:number
    }
    
    //定义变量，并且指定为Cat类型
    const c:Cat={
        name:'小白',age:1}

![在这里插入图片描述][d1cb33d9bc764631a88ccf1d70a98729.png]

> 在技术的道路上，我们不断探索、不断前行，不断面对挑战、不断突破自我。科技的发展改变着世界，而我们作为技术人员，也在这个过程中书写着自己的篇章。让我们携手并进，共同努力，开创美好的未来！愿我们在科技的征途上不断奋进，创造出更加美好、更加智能的明天！

![在这里插入图片描述][7f0f8831c257424580f0b703e3a57042.png_pic_center]

[8bc6e333125f4a05818bf6c1cb2bd785.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/ccc62d50775a420dae944bbbd56227b7.png
[6705a72f8c224fab869d12bec1a94a90.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/663b1a005d4349b68653f871c3dc6b79.jpeg
[f0ebd890af934ec49e3de0cb4350d3a9.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/4c7715c8a96b4b5185c9445ffb8d7199.jpeg
[18b4e5ee2cd94075a5d98024f3aa18a6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/2cbda2bfafdb48b3a483d080c396914a.png
[171eaed4288d4998a8be8de137722fa1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/852ab88eaa0b4bc2a1f6f6b86ab30372.png
[772696295951410cbae8df2b00a1536f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/7049e040bcaf43cfa8f275ef9129f2bb.png
[de3aa3de141649c8a465ace1a1940870.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/902da15a6ab24881a8cb8a46f9d15b95.jpeg
[e1b9015c48d140a9840e4d973ccbcee1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/baa9d7e0adf84656b771b256a69b3206.png
[e1fdc5f1d4bf4a7aae8259b63faf8cd6.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/476fbad14fa7426da47765b240fdb9b9.jpeg
[72282ad2e9de47ceaa401b0226b52ade.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/ed30664b13524bb0b4c8e8001f87f134.png
[b6b1fc57ae974400bfa999c602420228.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/fe465accc2434d4b82a48593f34f4704.png
[3118bfe6b63a4f3ea3752e4ea361b833.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/961a3a826ffb4753a92bed978e63119f.png
[a4771a001cd447e69a312f2b3a25afd5.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/f8a1b71b5c73498995857e75390c7119.jpeg
[aa6e9f7d00974d3d92e6ce487811c5fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/7be1e96a8b694e9fb16db110253b83b9.png
[d9e62612ecff47bdb61e5432c34784d1.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/b809dd9a247d455bb081bea5492045d9.jpeg
[d1cb33d9bc764631a88ccf1d70a98729.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/dcbca0e5bdbf4bc8b7ad65d6d86915a4.png
[7f0f8831c257424580f0b703e3a57042.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/15/c26e03311af04b708a6889a552514b11.png