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

系列文章目录

在这里插入图片描述


文章目录

  • 系列文章目录
  • 前言
  • 一、安装必要软件
  • 二、TypeScript 基础类型
    • 1.基础类型之 数字类型 number
    • 2.基础类型之 字符串类型 string
    • 3.基础类型之 布尔类型 boolean
    • 4.基础类型之 空值类型 void
    • 5.基础类型之 null 、undefined类型
    • 6.基础类型之 任意类型 any (顶级类型)
    • 7.基础类型之 任意类型 unknown(顶级类型)
  • 总结


前言

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=truebol=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=trueunk=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 成为了越来越多前端开发者的首选语言。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/134888.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第 363 场 LeetCode 周赛题解

A 计算 K 置位下标对应元素的和 模拟 class Solution { public:int pop_cnt(int x) {//求x的二进制表示中的1的位数int res 0;for (; x; x >> 1)if (x & 1)res;return res;}int sumIndicesWithKSetBits(vector<int> &nums, int k) {int res 0;for (int i…

CorelDRAW 2023怎么把图片转化为手绘素描风 简单几步轻松搞定

CorelDRAW 2023是一款非常好用的设计类软件&#xff0c;软件拥有非常多强大又好用的功能&#xff0c;可以帮助设计师快速创造出想要的效果&#xff0c;今天我们就来给大家介绍一下CDR的“素描”艺术笔触。它可以帮助用户快速将普通的图片快速转换成类似素描的风格&#xff0c;在…

接口测试——接口协议抓包分析与mock_L1

目录&#xff1a; 接口测试价值与体系常见的接口协议接口测试用例设计postman基础使用postman实战练习 1.接口测试价值与体系 接口测试概念 接口&#xff1a;不同的系统之间相互连接的部分&#xff0c;是一个传递数据的通道接口测试&#xff1a;检查数据的交换、传递和控制…

VUE build:gulp打包:测试、正式环境

目录 项目结构 Gulp VUE使用Gulp Vue安装Gulp Vue定义Gulp.js package.json build文件夹 config文件夹 static-config文件夹 项目结构 Gulp Gulp是一个自动化构建工具&#xff0c;可以帮助前端开发者通过自动化任务来管理工作流程。Gulp使用Node.js的代码编写&#xff…

使用Git把项目上传到Gitee的详细步骤

1.到Git官网下载并安装 2.到Gitee官网进行注册&#xff0c;然后在Gitee中新建一个远程仓库 3.设置远程仓库的参数 4.返回Gitee查看仓库是否生成成功 5.新建一个文件夹作为你的本地仓库 6.将新建好的文件夹初始化成本地仓库 第一步&#xff1a;右键点击刚创建的本地仓库&#…

Tomcat 的部署和优化

目录 1、什么是Tomcat 1.1、静态页面的选择 2、Tomcat是怎么运行的 3、安装jdk &#xff06; 部署jdk环境 & Tomcat 安装 1、安装jdk 2、配置jdk环境变量 3、tomcat安装 4、Tomcat启动 5.优化tomcat启动速度 6.Tomcat的主要命令 7.Tomcat 配置虚拟主机 8.Tomca…

第2章_freeRTOS入门与工程实践之单片机程序设计模式

本教程基于韦东山百问网出的 DShanMCU-F103开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id724601559592 配套资料获取&#xff1a;https://rtos.100ask.net/zh/freeRTOS/DShanMCU-F103 freeRTOS系列教程之freeRTOS入…

AMS爆炸来袭,上线即巅峰

1.关于首发项目Antmons(AMS)空投结果 Gate.io Startup 首发项目Antmons代币AMS于Aug15th,AM 07:00开始下单&#xff0c;24小时内下单同等对待总共有15,950人下单&#xff0c;下单总价值超过1,000万美金分发系数约为0.001640495298341。根据上线规则AMS项目认购成功&#xff0c;…

刷一下算法

记录下自己的思路与能理解的解法,可能并不是最优解法,不定期持续更新~ 1.盛最多水的容器 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容…

linux查看进程对应的线程(数)

首先&#xff0c;top或ps查看进程列表&#xff0c;确定要查看的进程pid&#xff0c;如下面40698 查看进程的线程情况 查看进程&#xff1a;top -p 40698 查看线程&#xff1a;top -p 40698 -d 3 -H 其中-d是刷新频率 可看到此进程共211个线程&#xff0c;运行中的是211个。…

QStandardItem通过setCheckable添加复选框后无法再次通过setCheckable取消复选框的问题

前言 如题所示&#xff0c;通过setCheckable添加复选框后&#xff0c;想要通过setCheckable(false)取消复选框&#xff0c;你会发现根本没有作用的。 问题复现 #include "widget.h" #include "ui_widget.h" #include <QList>Widget::Widget(QWidg…

DockerCompose

DockerCompose Docker Compose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器&#xff01; 初识DockerCompose Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。格式如下&#xff1a; version: &…

Spring注解家族介绍: @RequestMapping

前言&#xff1a; 今天我们来介绍RequestMapping这个注解&#xff0c;这个注解的内容相对来讲比较少&#xff0c;篇幅会比较短。 目录 前言&#xff1a; RequestMapping 应用场景&#xff1a; 总结&#xff1a; RequestMapping RequestMapping 是一个用于映射 HTTP 请求…

Jprofiler的使用查看oom

一、安装 idea安装插件 安装客户端 链接 IDEA配置Jprofiler执行文件 二、产生oom import java.util.ArrayList; import java.util.List;//测试代码 public class TestHeap {public static void main(String[] args) {int num 0;List<Heap> list new ArrayList&l…

超详细!魔改为中文sqlmap的使用教程

超详细&#xff01;魔改为中文sqlmap的使用教程 1.SQLMAP介绍2.Qitian基础信息3.Qitian绕过WAF 魔改了一版中文版的SQLMAP&#xff0c;如下图&#xff1a; 1.SQLMAP介绍 Sqlmap是一个自动化的sql注入工具&#xff0c;其主要功能是扫描、发现并利用给定url的SQL注入漏洞&#…

【SpringMVC】JSR303与拦截器的使用

文章目录 一、JSR3031.1 JSR303是什么1.2 JSR 303的好处包括1.3 常用注解1.4 实例1.4.1 导入JSR303依赖1.4.2 规则配置1.4.3 编写校验方法1.4.4 编写前端 二、拦截器2.1 拦截器是什么2.2 拦截器与过滤器的区别2.3.应用场景2.4 快速入门2.5.拦截器链2.6 登录拦截权限案例2.6.1 L…

Docker搭建ELK日志采集服务及Kibana可视化图表展示

架构 ES docker network create elkmkdir -p /opt/ELK/es/datachmod 777 /opt/ELK/esdocker run -d --name elasticsearch --net elk -p 9200:9200 -p 9300:9300 -e "discovery.typesingle-node" -v /opt/ELK/es/plugins:/usr/share/elasticsearch/plugins -v /opt/…

蓝桥杯2023年第十四届省赛真题-更小的数--题解

目录 蓝桥杯2023年第十四届省赛真题-更小的数 题目描述 输入格式 输出格式 样例输入 样例输出 提示 【思路解析】 【代码实现】 蓝桥杯2023年第十四届省赛真题-更小的数 时间限制: 3s 内存限制: 320MB 提交: 895 解决: 303 题目描述 小蓝有一个长度均为 n 且仅由数字…

RK3588 点亮imx586摄像头

一.硬件原理图 mipi摄像头硬件确认点&#xff1a; 1.供电&#xff1a;5V&#xff0c;2.8V&#xff0c;1.2V&#xff0c;1.8V&#xff0c;reset脚&#xff08;硬拉3.3&#xff0c;上电的时候从低到高&#xff09;&#xff0c;pwron脚外接 3.3V。 2,时钟&#xff1a;MCLKOUT是2…

Linux 文件创建、查看

touch、cat、more命令 ①touch命令——创建文件 ②cat命令——查看文件内容全部显示 这是txt.txt文件内容 使用cat命令查看 ③more命令——查看文件内容支持翻页 在查看的过程中&#xff0c;通过空格翻页&#xff0c;通过q退出查看