①TypeScript 介绍、安装和基本的数据类型

向右看齐 2022-11-22 05:17 98阅读 0赞

### TypeScript ###

*  TypeScript 简介
 *  TypeScript 安装
 *  TypeScript 简单使用
 *  TypeScript 数据类型

--------------------

**写下博客主要用来分享知识内容，并便于自我复习和总结。  
如有错误之处，请各位大佬指出。**

--------------------

对于文章后续的内容，推荐读者先学习JavaScript，再来学习TypeScript。

--------------------

# TypeScript 简介 #

1、TS是由微软在2012年正式发布的一款开源的编程语言。随着技术的发展，TS已经变成了前端必会的技能。

（对于笔者而言，之前学习了很久也没有选择学习TS，直到Vue3选择采用TS重写，让我才开始重新审视TS是否真的值得学习。为了阅读源码，TS的学习提上了日程）

2、TS是JS的超集，也就是说TS是建立在JS之上的，所有的TS代码最后都会被转化为JS代码。

（虽然TS最后会转为JS代码，但TS既然存在，那么它一定有比JS强的用法。通过之后的学习，希望各位可以感受到TS的优势）

3、TS更像后端java、C\#这样的面向对象语言，可以让JS开发大型企业项目。

（在面对大型企业项目的时候，真的，真的很有用！）

4、谷歌也在大力支持TS的推广，谷歌的angular2.x+就是基于TS语法。

5、最新的Vue、React也可以集成TS。

6、Nodejs框架Nestjs、midway中用的就是TS语法。  
![在这里插入图片描述][20201104092929674.png_pic_cnter]  
除此以外，TS的优缺点，推荐文章：[TS的优缺点][TS]

--------------------

# TypeScript 安装 #

首先，先去安装最新版的node.js（百度即可找到官网，找到链接直接下载即可）

然后在命令行输入代码：  
`npm install –g typescript`  
或者  
`cnpm install –g typescript`  
或者  
`yarn global add typescript`

以上几种方式，推荐使用cnpm和yarn。如果想要使用cnpm和yarn，需要安装：  
`npm install –g cnpm --registry=https://registry.npm.taobao.org`  
或者  
`npm install –g yarn`  
`cnpm install –g yarn`

--------------------

# TypeScript 简单使用 #

笔者使用WebStorm。

随便建一个项目，项目中创建一个TS文件 index.ts ：

console.log("helloworld")

但是浏览器不支持TS和ES6，所以在这里需要将其编译成ES5，打开终端输入：  
`tsc index.ts`

这时我们就可以发现，在文件夹中出现了index.js，现在浏览器就可以去解析index.js了。  
![在这里插入图片描述][20201104093436982.png_pic_cnter]  
需要注意的是，每当我们在ts中写下新的内容后，都需要重新tsc。为了解决这个问题，对于WebStorm只需要一步，打开自动编译即可：  
（IDEA的自动编译选项也在同样位置）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter]  
而对于VSCode，需要进行一些配置，根据这个文章步骤就可实现：[VSCode如何自动编译TS][VSCode_TS]

--------------------

简单看一下转变后的效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_enter]  
想要在控制台看到效果，就去建一个html页面，然后运行在浏览器即可。  
![在这里插入图片描述][20201104093619786.png_pic_cnter]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TypeScript测试</title>
        <script src="index.js"></script>
    </head>
    <body>
    
    </body>
    </html>

--------------------

# TypeScript 数据类型 #

在TS中，为了使编写的代码更规范，更有利于维护，增加了类型校验。使用的时候，只需要变量名后加上：并在它的后面写上数据类型即可（如果不这么写，它不会报错，同时也可以改变数据类型，和JS一样。但是只要这么写，在修改数据的时候，它的数据类型就不能改变，否则会报错）。同时需要注意，TS推荐使用let或const（使用var不会报错，但会有警告）。它有以下几种数据类型：

![在这里插入图片描述][20201104093723538.png_pic_enter]

// 布尔类型(boolean)
    
        let flag1:boolean = false
        let flag2:boolean = true
    
        // 正确写法：类型相同
        flag1 = true
        // 错误写法：ts报错
        // flag1 = 1
    
        /* * 可以在ts中使用js，不会报错（未指定数据类型） * let flag = true * flag = 1 * */
    
    // 数字类型(number)
    
        let a:number = 123
        // 带小数的数据也是number
        a = 12.3
        console.log(a)
    
    // 字符串类型(string)
    
        // string类型在ts里可以用 双引号 也可以用 单引号，不会报错
        // 推荐用 双引号
        let str:string = "this is ts"
    
    // 数组类型(array)
    
        // 1.第一种定义数组方式
        // 根据数据类型定义
        let arr:number[] = [7, 2200, 369, 4396]
    
        // 2.第二种定义数组方式
        // 使用泛型定义（暂时先记住，泛型在后面还会提到）
        let arr1:Array<number> = [7, 2200, 369, 4396]
    
    	// 我们还可以让数组中存放多种类型的数据
    	let arr2:(number | string)[] = [1, 'string', 3]	
    
    // 元组类型(tuple) 属于数组的一种，可存储多种数据类型
    
        let tup:[string, number, boolean] = ["xh", 2200, false]
    
    // 枚举类型(enum)
    /* * 随着计算机的不断普及，程序不仅只用于数值计算，还更广泛地用于处理非数值的数据。 * 例如：性别、月份、星期、颜色、单位名、学历、职业等，都不是数值数据。 * 在其它程序设计语言中，一般用一个数值来代表某一状态，这种处理方法不直观，易读性差。 * 如果能在程序中用自然语言中有相应含义的单词来代表某一状态，则程序就很容易阅读和理解。 * 也就是说，事先考虑到某一变量可能取的值，尽量用自然语言中含义清楚的单词来表示它的每一个值， * 这种方法称为枚举方法，用这种方法定义的类型称枚举类型。 * */
        // 如果赋值，则根据值来输出结果
        enum Flag { success = 1, error = -1}
        let f:Flag = Flag.error
        console.log(f)  // 输出：-1
    
        // 如果不赋值，输出结果默认为它的索引值
        enum Color { red, blue, orange}
        let c:Color = Color.blue
        console.log(c)  // 输出：1
    
        // 如果部分赋值，赋值前根据索引输出结果，赋值后以该值作为当前索引再输出结果
        enum Color2 { red, blue = 5, orange}
        let d:Color2 = Color2.orange
        console.log(d)  // 输出：6
    
    // 任意类型(any)
    
        // 数据类型随便换，不会报错
        let num:any = 123
        num = "str"
        num = true
        console.log(num)
    
        // 任意类型的用处
        // 比如：在html中，有这么一个标签：<div id="box">box</div>
        // 那我们想要在JS中获取标签，修改样式，需要这么做：
        let oBox = document.getElementById("box")
        oBox.style.color = "red"
        // 虽然以上内容已经对样式进行了修改，但是在VSCode里，这部分会有警告
        // 笔者WebStorm没有警告
        // 为了解决问题，只需要这么做即可：let oBox:any = document.getElementById("box")
    
    // null 和 undefined：其他(never类型)数据类型的子类型
    
        // 直接指定undefined：
        let num2:undefined
        // undefined类型，可以赋值undefined
        num2 = undefined
        console.log(num2) // 输出：undefined
    
        // 输出undefined 也可以设定数据类型，但不赋值
        let num3:number
        console.log(num3) // 输出：undefined
        // 但是对于上面这个用法，VSCode也许会有警告，而笔者的WebStorm不会
        // 为了解决VSCode警告问题，我们可以如下面这么用：
        // 即：如果赋值就是number，不赋值就是undefined
        let num4:number | undefined
        num4 = 123
        console.log(num4)
    
        // 直接指定null：
        let num5:null
        num5 = null
    
    // void类型：TypeScript中的void表示没有任何类型，一般用于定义方法的时候方法没有返回值。
    
        // 表示方法没有任何返回类型：
        function run():void{ 
            console.log("run")
        }
        run()
    
        // 有返回数据类型的方法：
        function run2():number{ 
            return 123
        }
        console.log(run2())
    
    // never类型：其他类型（包括null和undefined）的子类型，代表从不会出现的值。这意味着声明never的变量只能被never类型所赋值。
    
        let x:never
        // 不能为其赋值
        // x = 123
    
        // 虽然never看起来没什么用，但我们可以让它抛出异常
        x = (()=>{ 
            throw new Error("错误")
        })()

--------------------

除了这几种基本的数据类型以外，还有对象类型，之后的学习中还会遇到：

// 最基本的对象类型
    const test:{ 
        name:string,
        age:number
    } = { 
        name: '李四',
        age: 18
    }

还有更复杂一些的：

// age一定是个匿名函数，并返回number值
    const age:()=>number = ()=>{ return 20}

这里的class和interface之后还会提到，现在先混个脸熟，等学完再回来看就很轻松了。

// 对象数组
    let testPerson:{ name:string, age:number}[] = [
        { name: '李四', age: 18},
        { name: '王五', age: 28}
    ]
    
    // type：类型别名，方便之后反复使用
    type Lady = { name:string, age:number}
    let testPerson:Lady[] = [
        { name: '李四', age: 18},
        { name: '王五', age: 28}
    ]
    
    // 使用class和type都可以
    class Person{ }
    // per必须是类Person的实例
    const per:Person = new Person()
    
    class Person2{ 
    	name:string;
    	age:number;
    }
    // per必须是类Person的实例
    const per2:Person2 = { name: '李四', age: 18}
    
    interface Animal { 
        name:string,
        age:number
    }
    // cat必须实现接口中所有内容
    const cat:Animal = { 
        name: '阿愈',
        age: 7
    }

--------------------

在这里，我们用`：`去定义一个指定数据类型的变量，这个方式叫做类型注解。

但实际上，VSCode和WebStorm等编辑器，还能自行对未指定数据类型的变量进行类型判断：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 1]  
因此，对于类型注解的使用，我们可以这么考虑：如果TS能够自动分析变量类型，那我们就什么也不用补充。如果TS无法分析变量类型，那我们必须使用类型注解。

当然，对于类型注解在ts中一定要用吗，诸如此类的问题，还是要看个人习惯和公司规定，而且一定要说的是，类型注解确实能让编写的代码更规范，更有利于维护。那现在就来看例子：

当我们在ts中，写了一些很简单的，可以自动分析变量类型的用法，如果写类型注解，倒是挺麻烦的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter]

--------------------

那什么情况下，TS无法分析变量类型？

function getTotal(one, two){ 
        return one + two;
    }
    let total = getTotal(1,2);

很明显，在函数中，我们希望在它使用的时候传什么值，TS肯定是无法判断出来的，所以参数one和two在这里都会接收any类型。此时如果不加类型注解，就不利于维护和规范。  
![在这里插入图片描述][20201118215619538.png_pic_ceter]  
那此时，我们就可以这么做：

function getTotal(one:number, two:number){ 
        return one + two;
    }
    let total = getTotal(1,2);

total不需要指定，是因为TS自动判断其为number。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cener]  
但是这里，total的数据类型是自动判断的，我们稍微做一些修改，它的返回值类型就会变化：

function getTotal(one:number, two:number){ 
        return one + two + '';
    }
    let total = getTotal(1,2);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 2]  
那么这种结果显然不是我们想要的。所以，对于函数返回值类型的指定，还是很重要的，因为它可以避免在函数中做了某些操作，从而导致返回结果类型的差异：

function getTotal(one:number, two:number):number{ 
        return one + two;
    }
    let total = getTotal(1,2);

还有一种不是很好的方法，不如写在函数返回值上清晰：

function getTotal(one:number, two:number){ 
        return one + two;
    }
    let total:number = getTotal(1,2);

（更多函数的用法之后还会学到）

所以综上所述，有时我们可以考虑不指定类型注解，因为TS能自动分析变量类型。

--------------------

除此以外，对象中的数据类型也能自动分析出来。

let person = { 
        name: '李四',
        age: 15
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter 1]

[20201104092929674.png_pic_cnter]: /images/20221120/140ad1c85151431f9265c04c52c14ea5.png
[TS]: https://segmentfault.com/a/1190000019996860?utm_source=tag-newest
[20201104093436982.png_pic_cnter]: /images/20221120/3179db0fcdf24d7fb0ca2e9a29c6b426.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter]: /images/20221120/2197ef8f473b4cbca31e484eb07a68fd.png
[VSCode_TS]: https://blog.csdn.net/weixin_44999830/article/details/100769784
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_enter]: /images/20221120/8d3c000b5f974b8395d3be699ca60931.png
[20201104093619786.png_pic_cnter]: /images/20221120/9fa13c2728534077961e113e85cae7cd.png
[20201104093723538.png_pic_enter]: /images/20221120/499ea5a8dd7145f3965dac072064eb79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 1]: /images/20221120/f139796bbaac401187e3574bbdb8b58d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter]: /images/20221120/71f5f040034848a7bdff7f82439501ed.png
[20201118215619538.png_pic_ceter]: /images/20221120/b8a48076afd44dbea612d330692f45db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cener]: /images/20221120/43d6dc70185b4a3fa7f445144a1c39fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_cnter 2]: /images/20221120/3b8e772842bc4a93a6b60b06d39481e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_ceter 1]: /images/20221120/29feb720e2524ccf982de29e1f89e1b0.png