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

news2024/10/7 12:22:56

系列文章目录

在这里插入图片描述


文章目录

  • 系列文章目录
  • 前言
  • 一、安装必要软件
  • 二、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=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 成为了越来越多前端开发者的首选语言。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Dell戴尔笔记本电脑灵越系列Inspiron 5598原厂Windows10系统2004

戴尔灵越原装出厂系统自带显卡、声卡、蓝牙、网卡等所有驱动、出厂主题壁纸、系统属性戴尔专属LOGO标志、Office办公软件、MyDell等预装程序 链接:https://pan.baidu.com/s/1VYUa7u0-Az4c9bOnWV9GZQ?pwd550m 提取码:550m

常见的查找算法以及分块搜索算法的简明教程

顺序查找 最基本的查找算法 举例 // 顺序查找public static int searchSequence(int[] arr, int target) {int i 0;for (int arr2 : arr) {if (arr2 target) {return i;}i;}return -1;}二分查找 [! warning] 值得注意的是这个二分查找算法只对无重复元素的递增或递减的数组有…

常用的辅助类(必会)

1.CountDownLatch package com.kuang.add;import java.util.concurrent.CountDownLatch;//计数器 减法 public class CountDownLatchDemo {public static void main(String[] args) throws InterruptedException {//总数是6,必须要执行任务的时候,再使用…

ARM接口编程—ADC(exynos 4412平台)

ADC简介 ADC ADC(Analog to Digital Converter)即模数转换器,指一个能将模拟信号转化为数字信号的电子元件 ADC主要参数 分辨率 ADC的分辨率一般以输出二进制数的位数来表示,当最大输入电压一定时,位数越高,分辨率越高&#xf…

全国职业技能大赛云计算--高职组赛题卷①(私有云)

全国职业技能大赛云计算--高职组赛题卷①(私有云) 第一场次题目:OpenStack平台部署与运维任务1 基础运维任务(5分)任务2 OpenStack搭建任务(15分)任务3 OpenStack云平台运维(15分&am…

LC142. 环形链表 II

题目大意 给你一个链表,要求判断是否有环,若有环,找出环的入口结点。 142. 环形链表 II 判断是否有环 判环比较简单,用一个一次走一个结点的快指针,和一个一次走一个结点的慢指针同时遍历链表,若两指针相…

第一个Three的demo实例

Three的第一个Demo 前言效果图1、导入threejs2、创建场景3、创建相机4、创建渲染器5、创建几何图形6、创建材质7、创建网格8、将网格添加到场景中9、设置相机的位置10、渲染11、整体代码 前言 创建第一个demo实例—旋转的方格 效果图 1、导入threejs import * as THREE from…

漏洞赏金猎人开源工具集合,自动辅助渗透测试工具

漏洞赏金猎人开源工具集合,自动辅助渗透测试工具。 公开收集的一个国外白帽子用的比较多的开源工具列表 这是一款半自动渗透测试的工具,当前版本多用于渗透测试的信息搜集,每周保持更新,最终的目标是类似于linpeas的全自动渗透测…

直接插入排序、希尔排序详解。及性能比较

直接插入排序、希尔排序详解。及性能比较 一、 直接插入排序1.1 插入排序原理1.2 代码实现1.3 直接插入排序特点总结 二、希尔排序 ( 缩小增量排序 )2.1 希尔排序原理2.2 代码实现2.3 希尔排序特点总结 三、直接插入排序和希尔排序性能大比拼 !!!3.1 如何对比性能?准…

4款视频号数据分析平台!

很多人在做视频号的时候就会有创作参考的需求,那么你们知道视频号中有哪些数据平台?今天就和大家来分享一下 接下来就总结一下视频号数据平台有哪些?排名不分前后。 1:视频号助手(channels.weixin.qq.com&#xff09…

旋转的正方体-第15届蓝桥杯第一次STEMA测评Scratch真题精选

[导读]:超平老师的《Scratch蓝桥杯真题解析100讲》已经全部完成,后续会不定期解读蓝桥杯真题,这是Scratch蓝桥杯真题解析第151讲。 第15届蓝桥杯第1次STEMA测评已于2023年8月20日落下帷幕,编程题一共有6题,分别如下&a…

C 风格文件输入/输出---错误处理---(std::clearerr,std::feof,std::ferror,std::perror)

错误处理 清除错误 std::clearerr void clearerr( std::FILE* stream ); 重置给定文件流的错误标志和 EOF 指示器。 参数 stream-要重置错误标志的文件流 返回值 &#xff08;无&#xff09; 调用示例 #include <iostream> #include <cstdio>using names…

微服务保护-降级

个人名片&#xff1a; 博主&#xff1a;酒徒ᝰ. 个人简介&#xff1a;沉醉在酒中&#xff0c;借着一股酒劲&#xff0c;去拼搏一个未来。 本篇励志&#xff1a;三人行&#xff0c;必有我师焉。 本项目基于B站黑马程序员Java《SpringCloud微服务技术栈》&#xff0c;SpringCloud…

『C语言进阶』指针进阶(二)

&#x1f525;博客主页&#xff1a; 小羊失眠啦 &#x1f516;系列专栏&#xff1a; C语言 &#x1f325;️每日语录&#xff1a;上天是公平的&#xff0c;有付出就有收获 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 前言 在上篇指针进阶中&#xff0c;我们对字符指针、指针…

计网 - 图解OSI 七层模型 和 TCP/IP 四层模型

文章目录 OSI 七层模型TCP/IP四层模型图解 OSI图解 TCP/IP小结 OSI 七层模型 OSI&#xff08;开放系统互联模型&#xff0c;Open Systems Interconnection Model&#xff09;是一个用于理解和描述计算机网络体系结构的标准化框架&#xff0c;由国际标准化组织&#xff08;ISO&…

基于Xml方式Bean的配置-beanName个别名配置

SpringBean配置详解 Bean的基础配置 例如前文涉及到的配置文件 <bean id"userService" class"com.example.Service.Impl.UserServiceImpl"/>此时存储到Spring容器&#xff08;singleObjects单例池&#xff09;中的beanName是userService&#xf…

【Java】IDEA 将 Java 项目打包成 Jar 包

在工件中添加 JAR 构建&#xff08;Build&#xff09;工件&#xff0c;JAR 包会生成在 out 目录下

【系统架构】什么是集群?为什么要使用集群架构?

什么是集群&#xff1f;为什么要使用集群架构&#xff1f; 1.什么是集群&#xff1f;2.为什么要使用集群&#xff1f;2.1 高性能2.2 价格有效性2.3 可伸缩性2.4 高可用性2.5 透明性2.6 可管理性2.7 可编程性 3.集群的常见分类3.1 负载均衡集群3.2 高可用性集群3.3 高性能计算集…

Vue2+Vue3

文章目录 Vue快速上手Vue是什么第一个Vue程序插值表达式Vue核心特性&#xff1a;响应式 Vue指令v-htmlv-show 与 v-ifv-else 与 v-else-ifv-onv-bindv-forv-model指令修饰符 计算属性watch侦听器&#xff08;监视器&#xff09;watch——简写watch——完整写法 Vue生命周期 和 …

c语言输出杨辉三角

#include<stdio.h> int main() {int x 0; //表示杨辉三角的的大小int y 1;printf("请输入x的值: ");scanf("%d", &x);for (int i 0; i < x; i) {for (int j 0; j < i; j) {if (j 0 || i 0) {y 1;}else {y y * (i - j 1) / j;}pri…