TypeScript 从入门到进阶之基础篇(一) ts基础类型篇

枫ゞ

已于 2024-01-06 21:49:15 修改

阅读量684

点赞数 2

分类专栏： TypeScript 从入门到进阶文章标签： typescript javascript 前端

于 2023-09-17 18:48:27 首次发布

本文链接：https://blog.csdn.net/weixin_49014702/article/details/132946789

版权

TypeScript 从入门到进阶专栏收录该内容

9 篇文章 3 订阅

订阅专栏

在这里插入图片描述

系列文章目录

TypeScript 从入门到进阶系列

文章目录

系列文章目录
- TypeScript 从入门到进阶系列
前言
一、安装必要软件
二、TypeScript 基础类型
总结

前言

TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的一个超集。它可以编译成普通的 JavaScript
代码，并可在任何浏览器上运行，也可以在服务器端或者 Node.js 上运行。

TypeScript 与 JavaScript
的最大区别在于它的静态类型检查功能，它可以在编译时就发现类型错误，避免在运行时导致程序崩溃。TypeScript 还提供了许多
JavaScript 所没有的特性，如类、接口、枚举、命名空间等，这些特性使得编写大型应用程序时更加方便和安全。

TypeScript 已经成为许多大型 Web 应用程序的首选语言，它的类型安全性和 IDE
支持为开发人员提供了更好的开发体验和更高的效率。同时，TypeScript 的生态系统也非常活跃，拥有丰富的库和工具支持。

一、安装必要软件

在学习TypeScript 之前我们需要安装一些必要的软件首先是node.js，进入下面网站进行下载安装即可

node.js 安装地址:https://nodejs.org/en

安装完成之后可以执行下面代码检查是否安装完成，如果安装成功则如下图所示（我这里是18.17.1版本所以会显示v18.17.1,版本不同显示的也不同但是有显示就可以了）

node -v

请添加图片描述
接着执行如下命令全局安装TypeScript，安装完成之后使用 tsc -v 查看是否安装成功

npm install typescript -g

tsc -v

请添加图片描述

二、TypeScript 基础类型

在 TypeScript 语法中，类型的标注主要通过类型后置语法来实现：“变量: 类型”
可以理解为将我们的js 代码添加类型注释让其更易懂

1.基础类型之数字类型 number

let num=250
let num:number=250
num='' //error 不能将''字符串类型 赋值给 number(number)类型的变量

在上面的代码中，第一行是我们写js时经常写到的，在 TypeScript 语法中第一行的写法也是正确的，第一行隐式的定义了num是数字类型。所以第一行我们就不能再给num赋值为其他类型，例如我们给number 赋值了‘’ 则会报错。而第二行代码显式的声明了变量num是数字类型，同样，不能再给num赋值为其他类型，否则也会报错。

2.基础类型之字符串类型 string

let str1='TypeScript'
let str1:string='TypeScript'

cosnt myName='前端小羽'
//也可以使用es6的字符串模板
let str:string=`我是 ${myName}`

从上面的代码可以看出我给 str1、str2变量赋值了’TypeScript’ 的字符串，在第一行中，因为我们赋值了字符串所以str1被隐式的定义为字符串类型。所以当我们给他再赋值一个数字或者其他类型的数据时，将会报错只能赋值字符串类型的数字。

3.基础类型之布尔类型 boolean

let bol:boolean=true

bol=false

//注意 如果使用 new Boolean() 且使用如下写法 则 会报错
let bol:boolean=new Boolean(0) //err
//必须定义为 Boolean 
let bol:Boolean=new Boolean(0)

4.基础类型之空值类型 void

在我们写js 函数的时候我们会写到如下面这种没有返回值的函数

function fun(){
	console.log('我不返回任何数据')
}

而在ts中我们给函数函数定义void 类型则就是代表任何返回值的函数如下

function fun():void{
	console.log('我不返回任何数据')
}
//当然 下面这种也默认是 void 类型
function fun(){
	console.log('我不返回任何数据')
}

当然 void 类型可以定义undefined 和 null类型

let und:void=undefined
let nul:void=null

5.基础类型之 null 、undefined类型

undefined 和 null 是所有类型的子类型,

let und:undefined =undefined
let nul:null =null

undefined 类型的变量，可以赋值给 string 类型的变量

6.基础类型之任意类型 any （顶级类型）

当我们定义变量为any 类型时我们可以对变量进行任何操作，不需要检查类型如下

let anys:any=undefined
anys='这样赋值也可以'
anys=true
anys=24154

在ts中如果我们定义变量时没有赋值则将默认为 any 类型

let a;
a='666'
a=undefined

7.基础类型之任意类型 unknown（顶级类型）

//unknown 可以定义任何类型的值
let  unk: unknown;
 unk='这样赋值也可以'
 unk=true
 unk=24154
// 但是 如果是下面的写法则会报错
let value:unknown='测试'
let names:string = value
//因为 unknow类型不能作为子类型只能作为父类型
// any 子类型 父类型 都可以

总结

TS（TypeScript）最重要的作用是提供强类型的静态检查能力，这使得我们在写代码时能够更加安全地进行开发，减少因为类型错误而导致的 bug。
同时，TS 还提供了更好的代码提示，帮助我们更加高效地进行开发，并且可以降低代码维护成本和开发成本。
此外，TS 还支持 ES6+的语法和特性，提高了代码的可读性和可维护性。因此，TS成为了越来越多前端开发者的首选语言。TS（TypeScript）最重要的作用是提供强类型的静态检查能力，这使得我们在写代码时能够更加安全地进行开发，减少因为类型错误而导致的bug。
同时，TS 还提供了更好的代码提示，帮助我们更加高效地进行开发，并且可以降低代码维护成本和开发成本。此外，TS 还支持 ES6+的语法和特性，提高了代码的可读性和可维护性。
因此，TS成为了越来越多前端开发者的首选语言。TS（TypeScript）最重要的作用是提供强类型的静态检查能力，这使得我们在写代码时能够更加安全地进行开发，减少因为类型错误而导致的 bug。
同时，TS 还提供了更好的代码提示，帮助我们更加高效地进行开发，并且可以降低代码维护成本和开发成本。
此外，TS 还支持 ES6+ 的语法和特性，提高了代码的可读性和可维护性。因此，TS 成为了越来越多前端开发者的首选语言。