「TypeScript」入门基础(一)---安装与基础数据类型

​​​​

前言????

• 虽然之前有学过​​TypeScript​​​但是平时业务上面都还是用​​JavaScript​​​来开发导致逐渐对​​TypeScript​​生疏了。
• 借此更文活动的机会再来一起学习一下​​TypeScript​​的知识吧。

关于TypeScript????️

• 对于​​TypeScript​​​最开始的印象还是在​​angular​​​项目中，那时候我身边的人都还是习惯于使用​​JavaScript​​。
• 但渐渐地​​Vue 3.0​​​支持了​​TypeScript​​​之后，我身边很多的​​Vue​​技术栈开发者也使用了起来。
• ​​TypeScript​​的两个最重要的特性——类型系统、适用于任何规模。
• 关于​​TypeScript​​​的介绍在​​这篇文章​​​中已经讲得很详细了我也就不细谈了，接下来主要分享一下​​TypeScript​​的使用和基础

TypeScript的安装????️

node的安装

• 在安装​​TypeScript​​​之前要先检查一下​​node​​​是否安装，因为命令行的​​TypeScript​​​编译器是使用​​npm​​包管理器来安装。

全局安装TypeScript

npm install -g typescript

• 安装完之后可以用​​tsc -v​​验证一下是否安装成功

编译ts文件

• 我们都知道在我们开发的项目中，​​ts​​​文件都会被编译成​​js​​文件,我们可以来尝试一下。
• 在文件夹中建立一个​​helloTs.ts​​​的文件，命令行执行​​tsc helloTs.ts​​

• 会发现​​ts​​​文件就编译成​​js​​文件了，当然我们如果每次都执行命令来手动编译就没这么方便了
• 我们可以使用​​vscode​​​来设置自动编译,命令行执行​​tsc --init​​​初始化​​tsconfig.json​​配置文件

• 我们可以在​​vscode​​​上面终端选项中的运行任务选择​​typescript​​

• 选择监视​​tsconfig.json​​配置文件

• 我们在ts文件编辑的时候就会自动编译到js文件去啦，这样我们就可以愉快的学习了。
• 当然如果不想用编译器来练习的同学也可以使用线上的​​Playground​​ 来学习。

TypeScript原始数据类型????️

• 在​​JavaScript​​​中的基础类型有​​布尔值​​​、​​数值​​​、​​字符串​​​、​​null​​​、​​undefined​​。
• 这五种类型当然在​​TypeScript​​​中可以使用，但跟​​JavaScript​​使用的最大区别就是需要在创建变量或者常量时需要给他定义相关的类型,增加了类型校验使开发者的代码更加规范。

布尔类型（boolean）

• 在​​JavaScript​​的写法

let xl = true

• 在​​TypeScript​​的写法

let xl:boolean=true

• 我们可以发现如果我们指定类型与定义的值不属于相同类型或者不属于那个类型的子集时​​TypeScript​​会立马提示你，这样我们就可以在编写代码的时候第一时间发现错误并加以改正。

数字类型（number）

• 在​​JavaScript​​的写法

let xl = 5201314

• 在​​TypeScript​​的写法

let xl:number=5201314

字符串类型（string）

• 在​​JavaScript​​的写法

let xl = '5201314'

• 在​​TypeScript​​的写法

let xl:string='5201314'

Null 和 Undefined

• 在​​JavaScript​​的写法

let xl = undefined
let xm = nul

• 在​​TypeScript​​的写法

let xl: undefined = undefined
let xm: null = null

空值（void）

• 在​​JavaScript​​​中没有​​void​​​的概念，在​​TypeScript​​​中，可以用​​void​​ 表示没有任何返回值的函数
• 在​​JavaScript​​的写法

function returnNone() {
    console.log(returnNone);
}

• 在​​TypeScript​​的写法

function returnNone(): void {
  console.log(returnNone)
}

• 值得一提的是，如果你要给一个变量定义​​void​​​类型的话，非严格模式下，变量的值可以为​​undefined​​​或​​null​​​,而严格模式下，变量的值只能为​​undefined​​。

严格模式
let xl:void=undefined //不报错
let xm:void=null //报错

TypeScript任意值????️

• 任意值（​​Any​​​）用来表示允许赋值为任意类型，也是因为这个​​any​​​类型的出现才让大家调侃​​TypeScript​​​为​​anyScript​​​,因为从上面我们知道一旦类型不同就会报错，但是​​any​​​就不会所以才会有同学为了贪方便而一直使用​​any​​​，当然这是不好的习惯，我们使用了​​TypeScript​​就是为了规范自己规范代码。

let string:any='字符串'
let number:any=5201314
let bool:any=true
let xl:any=undefined
let xm:any=null
//以上的写法都不会报错

• 可以认为，声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。

let sth;
sth=1314
sth='我是字符串'

• 值得一提的是当我们的变量声明时没有定义类型则他会默认的识别为​​any​​,上面的代码也等价于

let sth:any;
sth=1314
sth='我是字符串'

写在最后????

• 本文也算是记录一下​​TypeScript​​​的学习，接下来我会持续输出​​TypeScript​​相关的知识，大家可以一起来学习。
• 如果您觉得这篇文章有帮助到您的的话不妨????关注+点赞+收藏+评论+转发????支持一下哟~~????

​