TypeScript学习(一):快速入门

2023-11-13

一、TypeScript 简介

1、TypeScript 是什么?

TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
在这里插入图片描述

  • 是添加了类型系统的 JavaScript,适用于任何规模的项目。
  • 是一门静态类型、弱类型的语言。
  • 完全兼容 JavaScript,且不会修改 JavaScript 运行时的特性。
  • 可以编译为 JavaScript,然后运行在浏览器、Node.js 等任何能运行 JavaScript 的环境中。
  • 拥有很多编译选项,类型检查的严格程度可通过配置文件决定。
  • 可以和 JavaScript 共存,这意味着 JavaScript 项目能够渐进式的迁移到 TypeScript。
  • 增强了编辑器(IDE)的功能,提供了代码补全、接口提示、跳转到定义、代码重构等能力。
  • 拥有活跃的社区,大多数常用的第三方库都提供了类型声明,并且开源免费

下图显示了 TypeScript 与 JavaScript、 ES5、ES2015 和 ES2016 之间的关系:

在这里插入图片描述

意思是:JavaScript 和 ES 有的,TypeScirpt都有!

2、TypeScript 与 JavaScript 的区别

在这里插入图片描述

3、JavaScript 的缺点

首先JavaScript 是一门非常灵活的编程语言:

它没有类型约束,一个变量可能初始化时是字符串,又被赋值为数字。
由于隐式类型转换的存在,有些变量的类型很难在运行前就确定。
基于原型的面向对象编程,使得原型上的属性或方法可以在运行时被修改。
TypeScript 的类型系统,在很大程度上弥补了 JavaScript 的缺点

4、为什么使用 TypeScript

一般来说,在大型项目中,后期维护成本比前期开发成本要多得多,所以团队规范化尤为重要,包括编码规范,方法调用规范等,而TS可以通过代码的方式,约束团队开发,这样才有利于后期维护及扩展,从而达到高效的开发

两个最重要的特性——类型系统、适用于任何规模。

优势:强大的IDE支持,支持类型检测,允许为变量指定类型,语法检测,语法提示

缺点:有一定的学习成本,需要理解 接口,泛型,类,枚举类型等前端可能不是很熟悉的知识点。

接口(Interfaces):可以用于对``对象的形状Shape`进行描述

泛型(Generics):在定义函数,接口或类时,不预先指定具体的类型,而是在使用时在指定类型的一种特性

类(Classes):定义了一件事物的抽象特点,包括属性和方法

二、TypeScript 开发环境搭建

1、下载Node.js

  • node.js官网:Node.js (nodejs.org)
    在这里插入图片描述

  • 版本号 LTS:稳定版(一般开发下载这个)

  • 版本号 Current:最新版

2、安装Node.js

在这里插入图片描述

找到下载的目录里面,打开Node.js进行无脑安装,直接下一步

怎么知道安装成功?
第一种方法:win + R 打开运行对话框,输入cmd 打开命令提示符窗口,输入node -v 回车 显示安装版本号,如以下结果即为成功!
在这里插入图片描述

第二种方法:win 搜索powerShell,打开PowerShell 也是一样的输入node -v 回车 显示版本号,即为成功!
    在这里插入图片描述
在这里插入图片描述

3、使用npm全局安装TypeScript

npm是node包管理器,通过这个可以安装node下面的各种应用与软件,下载完node.js就可以直接使用npm了

  • 进入命令行

  • 输入:npm i -g typescript
    在这里插入图片描述

  • 显示以上信息,反正没有报错就表示typescript就已经安装好了

  • 怎么查看它有没有安装好呢?输入tsc 命令回车,如果出现一堆东西那就表示安装成功了,否则就显示没有找到这条命令。

4、创建一个ts文件

在任意一个文件夹里面新建一个后缀名为.ts的文件,用记事本或随意一个文本编辑器打开文件,输入console.log(’ hello TS!');
但是网页不认识ts文件怎么办?利用我们刚刚下载好的typescript编译器,把ts文件转化为js文件
怎么转?使用tsc命令对ts文件进行编译

5、使用tsc对ts文件进行编译

在所在文件夹里面输入cmd,在这里输入cmd的好处就是 命令行所在的路径正好就是当前所在文件的路径,就不用使用命令进入了!
在这里插入图片描述

输入命令:tsc 需要编译的文件名,回车执行,虽然命令提示符窗口没有发生什么变化,但是此时此刻你会发现该文件夹里面多了一个js文件!

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

TypeScript学习(一):快速入门 的相关文章

随机推荐

  • 交换机与路由器的基本工作原理

    1 广播域和冲突域 1 1冲突域 连接在同一导线上的所有工作站的集合 或者说是同一物理网段上所有节点的集合或以太网上竞争同一带宽的节点集合 这个域代表了冲突在其中发生并传播的区域 这个区域可以被认为是共享段 在OSI模型中 冲突域被看作是第
  • Spark将Dataframe数据写入Hive分区表的方案

    2021年最新版大数据面试题全面开启更新 2021年最新版大数据面试题全面开启更新 DataFrame 将数据写入hive中时 默认的是hive默认数据库 insert into没有指定数据库的参数 数据写入hive表或者hive表分区中
  • Android开发之http网络请求返回码问题集合

    HTTP状态码 HTTP Status Code 一些常见的状态码为 200 服务器成功返回网页 404 请求的网页不存在 503 服务不可用 一 1xx 临时响应 表示临时响应并需要请求者继续执行操作的状态代码 代码 说明 100 继续
  • 【golang】派生数据类型---指针 && 标识符、关键字等

    1 指针 对比C C 中的指针 go语言中的指针显得极为简洁 只是简单的获取某个空间的地址 或者 根据指针变量中的内容 获取对应存储空间的内容等操作 具体示例如下 go中使用指针需要注意的点 可以通过指针改变它所指向的内存空间中的内容 指针
  • linux删除文件后硬盘空间不释放

    查看被删除了的所有文件 lsof n grep deleted 杀死这些文件的delete进程 释放空间 lsof n grep deleted awk print 2 xargs kill 9 接着再运行lsof n data grep
  • 模糊神经网络

    参考 https wenku baidu com view 94f77a7384868762cbaed58f html https wenku baidu com view 22590c72cc17552706220818 html 1 模
  • 新唐M0 内核 FLASH操作认识和总结

    本文不对代码做详细解析 先说结论 和常见问题 结论 结论1 FLASH在操作的时候 需要先 擦除 然后在 写入 结论2 擦除需要一整块擦除 不能只擦除某几个字节 结论3 写入是可以按照字节这样写入的 但是 结论1 的存在 导致写入也整片写入
  • linux syslog函数,Linux syslog相关函数详解

    介绍 syslog是Unix系统的日志系统 可以将日志记录在本地系统中 一个完整的syslong日志包含如下信息 程序模块 严重性 时间 主机名 进程名 进程ID 正文 syslong相关函数 1 openlog 函数 调用openlog
  • 迅为IMX6ULL-从C++到QT系统移植(QT视频他来了~)

    零基础的QT视频他来了 1 主打零基础入门 手把手教学 从C 到QT系统移植 带你打通QT的任督二脉 2 独创的框架学习法 先掌握整体的QT开发流程 然后在逐一击破 3 从Windows上位机开发 到Linux界面开发 再到手机APP开发
  • java中最小生成树的实现

    最小生成树的实现 import java util ArrayList import java util List public class ShortestTree int dataMap 1 1 10 1 30 100 1 1 5 1
  • java 数组追加数据

    想要追加数据 需要的流程是 数组 gt List gt 数组 案例 import java util ArrayList import java util Arrays import java util List public class
  • [MATLAB]Jacobi迭代

    MATLAB代码 关于使用雅可比迭代法求线性方程组的数值解 jacobi m 定义Jacobi迭代函数 function x n jacobi A b x0 eps 计算迭代矩阵 D diag diag A L tril A 1 U tri
  • Docker入门到实践 (六) docker网络模式详解以及容器间的网络通信

    文章目录 一 前言 二 docker网络模式介绍 1 默认网络 1 1 bridge网络模式 1 2 host网络模式 1 3 none网络模式 1 4 container网络模式 2 自定义网络 2 1 创建网络 2 2 连接网络 2 3
  • 微软收购暴雪的野心:与索尼争雄 重金布局元宇宙

    1月18日 微软发布声明称 将以全现金方式斥资687亿美元收购游戏巨头动视暴雪 这将成为微软有史以来规模最大的一笔收购 同时也将改写游戏行业的收购纪录 完成这笔收购之后 使命召唤 魔兽世界 糖果传奇 暗黑破坏神 守望先锋 等脍炙人口的作品将
  • element-ui el-cascader 级联选择器 联动默认值

    在使用 element ui 的 el cascader 组件根据后台返回的数据 需要展示一个默认值 官网给出的例子https element eleme cn 2 0 zh CN component cascader 借鉴了一下 话不多说
  • hexo博客搭建-背景知识(二)

    yum与rpm的区别 rpm适用于所有环境 而yum要搭建本地yum源才可以使用 yum是上层管理工具 自动解决依赖性 而rpm是底层管理工具 gcc cc c g 命令行详解 gcc包含的c c 编译器 gcc cc c g gcc和cc
  • JDK8 网络Net包研究(一)

    网络基础 1 国际标准化组织的OSI 开放式系统互联模型 七层模型 2 TCP IP协议 组 四层模型 3 TCP IP协议组 一组包括TCP协议和IP协议 UDP协议 ICMP协议和其他一些协议的协议组 网络层 IP协议 gt 网络互连协
  • sqlserver存储过程基本语法

    转载自 sqlserver存储过程的基本语法 1 定义变量 简单赋值 declare a int set a 5 print a 使用select语句赋值 declare user1 nvarchar 50 select user1 张三
  • ElasticSearch——全文检索

    ElasticSearch 全文检索 来源 尚硅谷 谷粒商城高级篇 一 简介 官网 https www elastic co cn what is elasticsearch 全文搜索属于最常见的需求 开源的 Elasticsearch 是
  • TypeScript学习(一):快速入门

    文章目录 一 TypeScript 简介 1 TypeScript 是什么 2 TypeScript 与 JavaScript 的区别 3 JavaScript 的缺点 4 为什么使用 TypeScript 二 TypeScript 开发环