「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相关的知识，大家可以一起来学习。
• 如果您觉得这篇文章有帮助到您的的话不妨🍉关注+点赞+收藏+评论+转发🍉支持一下哟~~😛

往期精彩🌅

如何优雅的使用Vuepress编写组件示例（上）👈

如何优雅的使用Vuepress编写组件示例（下）👈

「站在上帝的角度」谈谈Element组件结构-Switch

「站在上帝的角度」谈谈Element组件结构-Radio