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.mzph.cn/news/83393.shtml

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

相关文章

解决ModuleNotFoundError: No module named ‘diffusers.models.cross_attention‘

目录 项目场景: 问题描述 原因分析: 解决方案: 方案一:

3dsmax 2020安装失败报1603错误 解决方法

本文地址:https://blog.csdn.net/t163361/article/details/132779780 想在自己电脑上安装3dsmax 2020,怎么也装不上,一直报1603错误。去网上找了找,官方有个报错处理的页面 安装Autodesk 2020以及更高软件软件提示1603错误 按照步骤一安装最…

面向面试知识--Lottery项目

面向面试知识–Lottery项目 1.设计模式 为什么需要设计模式? (设计模式是什么?优点有哪些?) 设计模式是一套经过验证的有效的软件开发指导思想/解决方案;提高代码的可重用性和可维护性;提高团…

新概念英语(第二册)复习——Lesson 1 - Lesson5

前言 重新整理下自己走过的英语路,算是一次梳理,也是一次简单的常识,更是为了以后做一次备份 不用怀疑,学完我曾经看过,听过,背过的资料,你也可以成为英语高手。 文章目录 前言Lesson 1 - A pr…

vue3 - Element Plus暗黑模式适配、切换及自定义颜色

GitHub Demo 地址 在线预览 Element Plus 2.2.0 版本开始支持暗黑模式,启用方式参考 Element Plus 官方文档 - 暗黑模式 demo通过Element Plus和VueUse 的 useDark 方法实现具有自动数据持久性的响应式暗黑模式。 安装 npm install element-plus --save npm in…

【go.mod file not found in current directory or any parent directory】

go编译程序出现错误提示: go.mod file not found in current directory or any parent directory; see ‘go help modules’ (exit status 1) 解决方法: cmd切换到go工程目录下,执行: go mod init 工程名称

canvas-绘图库fabric.js简介

一般情况下简单的绘制,其实canvas原生方法也可以满足,比如画个线,绘制个圆形、正方形、加个文案。 let canvas document.getElementById(canvas);canvas.width 1200;canvas.height 600;canvas.style.width 1200px;canvas.style.height 6…

9.20金融科技(比特币)

​ 比特币的起源和发展 2008年爆发全球金融危机,同年11月1日,一个自称中本聪(Satoshi Nakamoto)的人在P2P foundation网站上发布了比特币白皮书《比特币:一种点对点的电子现金系 ,陈述了他对电子货币的新设…

Mallox勒索病毒:最新变种malloxx袭击了您的计算机?

导言: 随着互联网的普及和数字化生活的发展,网络安全问题也逐渐成为了我们生活中不可忽视的一部分。其中,勒索病毒是一种恶意软件,它可以将您的数据文件加密,并要求您支付赎金以获取解密密钥。本文91数据恢复将介绍一…

IMX6ULL移植篇-Linux内核源码目录分析二

一. Linux内核源码目录 本文继续来具体说明 Linux内核源码的一些重要文件含义。 本文续上一篇文章,地址如下: IMX6ULL移植篇-Linux内核源码目录分析一_凌肖战的博客-CSDN博客 二. Linux内核源码目录分析 9. init 目录 此目录存放 Linux 内核启动的…

R绘制箱线图

代码大部分来自boxplot()函数的帮助文件,可以通过阅读帮助文件,调整代码中相应参数看下效果,进而可以理解相应的作用,帮助快速掌握barplot()函数的用法。 语法 Usage(来自帮助文件) barplot(height, ...)## Default S3 method: …

就只说 3 个 Java 面试题

在面试时,即使是经验丰富的开发人员,也可能会发现这是一些很棘手的问题: 1、Java中“transient”关键字的用途是什么?如何才能实现这一目标? 在 Java 中,“transient”关键字用于指示类的特定字段不应包含…

使用RKDevTool将update.img完整镜像进行解包,得到单独分区的镜像

(1)使用开发工具高级功能的解包 导入xx.img,然后点击解包(2)在Output/Android/Image得到想要的image

Linux关于memory cgroup的几个要点

概述 本文讲述memory cgroup比较容易误解的一些逻辑,如果不太经常使用和解决问题的话,对于memory cgroup的认知会比较浅显:cgroup memory用来限制进程的内存使用,但是我们进一步想如下的问题: 进程的内存可以分很多类…

Vue的路由使用,Node.js下载安装及环境配置教程 (超级详细)

前言&#xff1a; 今天我们来讲解关于Vue的路由使用&#xff0c;Node.js下载安装及环境配置教程 一&#xff0c;Vue的路由使用 首先我们Vue的路由使用&#xff0c;必须要导入官方的依赖的。 BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务https://www.bootcdn.cn/ <…

IP协议的相关特性

IP协议相关特性 报头结构 报文结构解释 4位版本号:指定IP协议的版本,对于IPV4来说,就是四位. 4位首部长度:IP头部的长度是多少个32bit,也就是Length4的字节数,4bit表示的最大的数是15,因此IP头部最大长度是60. 8位服务类型:3位优先权字段&#xff08;已经弃用&#xff09;&…

安全生产知识竞赛活动小程序界面分享

安全生产知识竞赛活动小程序界面分享

linux内核分析:进程通讯方式

信号 一旦有信号产生,我们就有下面这几种,用户进程对信号的处理方式。 1.执行默认操作。Linux 对每种信号都规定了默认操作,例如,上面列表中的 Term,就是终止进程的意思。Core 的意思是 Core Dump,也即终止进程后,通过 Core Dump 将当前进程的运行状态保存在文件里面…

代码随想录 -- day56 -- 583. 两个字符串的删除操作 、72. 编辑距离

583. 两个字符串的删除操作 class Solution { public:int minDistance(string word1, string word2) {vector<vector<int>> dp(word1.size() 1, vector<int>(word2.size() 1));for (int i 0; i < word1.size(); i) dp[i][0] i;for (int j 0; j <…

Python画图系列——折线图

好看的折线图 import numpy as np import matplotlib.pyplot as plt# 生成随机数据 # np.random.seed(42) # 设置随机种子以确保可重复性 sample_numbers np.arange(1, 21) # 生成1到20的样本编号random_data np.random.rand(20) # 生成20个随机数&#xff0c;范围在0到1之…