带你快速了解并掌握TypeScript

TypeScript

📌TypeScript(简称:TS)是微软推出的开源语言
📌TypeScript 是 JavaScript 的超集(JS 有的 TS 都有)
📌TypeScript =Type +JavaScript(在 JS 基础上增加了类型支持)
📌TypeScript 文件扩展名为 ts
📌TypeScript 可编译成标准的 JavaScript,并且在编译时进行类型检查

示例:
在js中定义一个变量

let a=1

在TypeScript中

let a:number =1

在这里插入图片描述

实际上并不能直接识别Ts文件,需要在前端编译的时候通过TSC将ts文件转成js文件,这样才能被解析

使用时需要安装
npm install -g typescript:进行全局安装

现在看无非就是加上了类型功能好在哪里了?

📌ts属于静态类型编程在编译期做类型检查,js在执行的时候才做类型检查,这样有错可以提前发现,在VSCode中不用编译在编写的时候就会报错

在ts中有哪些类型:
在这里插入图片描述
根据这些对变量进行标注:
📌标注变量:

let a:number =1

📌标注参数:

const a=(name:string):string =>{
    return 
}

第一个标注参数是String类型,第二个String标注返回值是String类型的

可以使用tsc命令将ts文件编译成js文件
tsc ts文件

  • interface类型

ts中可以定义一个接口

interface s{
   name:string,
   age:number
}

interface也作为一种类型标定变量

const c:s={name:'你好',age:'18'}

这样不管类型错误还是数量错误都会报错

  • Class类

ts中可以定义一个类,基本结构是这样的:

Class User{
    name: string;
    //构造方法
    constructor(name:string){
        this.name=name
    }
    //定义方法
    study(){
        console.log('[${this.name}]正在学习')
    }
}


//实例化
const a=new User('你好')
//调用变量
console.log(a.name)
//调用方法
a.study()

是不是很神奇,但是归根不是,在编译转成js文件后Class就成为了function

ts也可以实现类实现接口,类继承类

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

JMeter断言介绍

JMeter是一个功能强大的性能测试工具,它不仅可以模拟用户的行为,还可以对web应用程序的响应进行检测。其中断言就是JMeter中非常实用的功能之一。 断言是用于验证服务器响应是否正确的测试元素。它会检查服务器响应中的部分或全部内容,并在响…

[NSSRound#1 Basic]basic_check

[NSSRound#1 Basic]basic_check 开题什么都没有,常规信息搜集也无效 发现题目允许PUT的两种做法: 1、 CURL的OPTIONS请求方法查看允许的请求方式 curl -v -X OPTIONS http://node4.anna.nssctf.cn:28545/index.php2、 kali自带的nikto工具扫描网址 Nik…

vscode调试typescript(单文件)

环境 tsc: Version 5.4.5 ts-node: v10.9.2 node: v20.12.0 步骤 1.创建文件夹,下方创建一个index.ts。 function test() {let str: string Hello world.console.log(str) } test()2.安装ts调试插件。 3.点击VSCode的运行和调试Tab(第三个&#xff…

el-dialog设置el-head固定

0 效果 1 代码 ::v-deep .adTextDetailDialogClass .el-dialog__body{max-height: calc(100vh - 150px);overflow: auto;border-top:1px solid #dfdfdf;border-bottom:1px solid #dfdfdf; } ::v-deep .adTextDetailDialogClass .el-dialog{position: fixed;height:fit-content;…

Leetcode—155. 最小栈【中等】

2024每日刷题(130) Leetcode—155. 最小栈 实现代码 class MinStack { public:MinStack() {}void push(int val) {if(st.empty()) {st.emplace(val, val);} else {st.emplace(val, min(val, st.top().second));}}void pop() {if(st.empty()) {return;}…

接口数据脱敏实现方案

背景 敏感信息如手机号、身份证、邮箱等信息需要脱敏后展示给前台,如果需要查看,则需要申请权限,查询时需要记录操作日志。 方案 通过JsonSerializer和注解,在json序列化的时候做脱敏操作 此处使用redis存储了加密后的key和明…

查看pytorch与cuda对应版本

查看cuda版本 打开cmd,输入nvidia-smi,即可可以看到cuda的版本了 2. pytorch与cuda版本对应关系 可以参考这篇文章,写的非常详细:https://blog.csdn.net/FL1768317420/article/details/134769203

预测市场?预测股票?如何让预测有更高的准确率?

我们发现在足球赛中,只要知道一个简单的讯息(主队过去的获胜机率超过一半),预测力就会明显好过随便乱猜。如果再加上第二个简单的讯息(胜负纪录较佳的队伍会略占优势),可以再进一步提升预测力。…

遇事不决,阿尔萨斯(Arthas)

文章目录 一、cat log.log | grep 流水号 引发的惨案二、Collections.sort排序long型强转int型引发的惨案 一、cat log.log | grep 流水号 引发的惨案 接口报错,查看日志是空指针,但是没有详细的报错信息。 以为是日志打印格式的问题,遂改变…

2024年软件测试最新Web安全测试(文末送电子书)_电子书下载 安全测试,腾讯软件测试开发面试经验

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。 需要这份系统化的资料的朋友,可以戳这里获取 一个人可以走的很快,但一群人才能走的更…

Spring AI实战之一:快速体验(OpenAI)

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 关于Spring AI Spring Boot、Spring Cloud、Spring Data,作为一名Java程序员,相信您对这些概览早已耳熟能详,或者天天在用…

本地搭建springboot服务并实现公网远程调试本地接口

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

重发被恶意举报的主食冻干测评,速看可能再被删!PR、希喂和SC真实对比PK!

要给猫咪提供高品质主食,主食冻干是不二之选。主食冻干不仅含肉量高、吸收消化率高,还有着丰富的、普通猫粮无法提供的各类营养素,满足猫咪微量元素的需求。可以说是营养与生骨肉喂养媲美,又能完美避开生骨肉细菌超标带来的一系列…

KaiwuDB 解析器之语义解析

KaiwuDB 解析器介绍 解析器是数据库系统的重要组成部分之一,主要的功能是将客户端输入的 SQL 语句分解为语法单元,然后将这些语法单元转化成数据库内部可识别的数据结构,最终生成数据库可以执行的计划。 KaiwuDB 的一条 SQL 执行的整个生命…

go导入包时提示no required module provides package解决方法

原因,这个包在你的本机没有安装 如redis包的提示为 could not import github.com/gomodule/redigo/redis (no required module provides package "github.com/gomodule/redigo/redis")解决方法: go get github.com/gomodule/redigo/redis

PHP+MySQL组合开发 自定义商城系统源码 带完整的安装代码包以及安装部署教程

随着电子商务的蓬勃发展,越来越多的企业和个人希望拥有自己的在线商城系统。小编给大家分享一款基于PHP和MySQL技术栈,开发的一套自定义商城系统源码。该系统旨在帮助用户快速搭建稳定、高效的电子商务平台,并提供灵活的自定义功能&#xff0…

日本站群服务器的优点以及适合该服务器的业务类型?

日本站群服务器的优点以及适合该服务器的业务类型? 日本站群服务器是指位于日本地区的多个网站共享同一台服务器的架构。这种服务器架构有着诸多优点,使其成为许多企业和网站管理员的首选。以下是日本站群服务器的优点以及适合该服务器的业务类型的分析&#xff1…

链表经典面试题02--链表的带环问题

目录 引言 环形链表 题目描述: 思路分析: 代码展示: 面试中遇到的问题: 环形链表Ⅱ 题目描述: 思路分析: 代码展示: 面试中遇到的问题: 方法二: 随机链表的复制 题目描述: 思路分析: 代码展示: 小结 引言 这个专题专门讲解链表的带环问题,并且对面试有关链表带环…

开源文档管理系统Paperless-ngx如何在Linux系统运行并发布至公网

文章目录 1. 部署Paperless-ngx2. 本地访问Paperless-ngx3. Linux安装Cpolar4. 配置公网地址5. 远程访问6. 固定Cpolar公网地址7. 固定地址访问 Paperless-ngx是一个开源的文档管理系统,可以将物理文档转换成可搜索的在线档案,从而减少纸张的使用。它内置…

使用HashMap实现,对一个字符集进行哈夫曼编码

最终达到的效果: 调用一个类 class HuffmanCodin{.....} 使用类中的静态方法&#xff0c;获取哈夫曼编码&#xff1a; 事前准备——哈夫曼树的节点定义 class Node implements Comparable<Node> {int weight;//权重Node left;Node right;char ch;//关键字&#xff0c…