什么是TypeScript?本文介绍TypeScript基本用法和语法。-程序员宅基地

技术标签: 前端  reactjs  

什么是TypeScript?

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上TypeScript扩展了JavaScript的语法解决JavaScript的“痛点”:弱类型和没有命名空间,导致很难模块化

TypeScript是JavaScript的超集,他可以编译成纯JavaScript
TypeScript可以在任何浏览器运行、任何计算机和任何操作系统上运行,并且是开源的

为什么要用TypeScript

开源

简单
TypeScript 是 JavaScript 的超集,这意味着他支持所有的 JavaScript 语法。
兼容性好
TScript 是 JS的强类型版本。然后在编译期去掉类型和特有语法,生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JS,所以== TypeScript并不依赖于浏览器的支持,也并不会带来兼容性问题==。任何现有的JS程序可以不加改变的在TScript下工作。

TypeScript与js相比的优势

  1. TypeScript工具使重构更变的容易、快捷。
  2. TypeScript 引入了 JavaScript 中没有的“类”概念。
  3. TypeScript 中引入了模块的概念,可以把声明、数据、函数和类封装在模块中
  4. 类型安全功能能在编码期间检测错误,这为开发人员创建了一个更高效的编码和调试过程

安装解析工具

  1. TypeScript解释器npm install -g typescript -g 全局安装 ,在本机上 哪里都能用
  2. tsc空格-v命令用来测试是否安装成功

变量

let/var 变量名称:数据类型 = valuelet(块变量)和const(常量)是JavaScript
里相对较新的变量声明方式。
注意:let变量不能重复声明
注意:const它拥有与 let相同的作用域规则,但是不能对它们重新赋值。
注意:除了下划线 _ 和美元 $ 符号外,不能包含其他特殊字符,包括空格

数据类型基本概念

TypeScript支持与JavaScript几乎相同的数据类型,此外还提供了实用的枚举类型方便我们使用。
  1. 枚举 enum 类型是对JavaScript标准数据类型的一个补充。
    使用枚举类型可以为一组数值赋予友好的名字。枚举表示的是一个命名元素的集合值
    在这里插入图片描述
  2. 默认情况下,从0开始为元素初始值。 你也可以手动的指定成员的数值。
    在这里插入图片描述
    字符串枚举
    在这里插入图片描述

数据类型

1、布尔值 :boolean
2、数字 :number 
3、字符串 :string可以使用双引号( ")或单引号(')表示字符串 
4、数组 :number[]或 :Array<number>
5、任意类型:any所任意类型的数据都可以
6、void:没有任何类型

:某种程度上来说,void类型像是与any类型相反,它表示没有任何类型。 当一个函数没有返回值时,你通常会见到其返回值类型是 void
声明一个void类型的变量没有什么大用,因为你只能为它赋予undefined和null
7、never 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值。

数据类型使用

1、下载TypeScript解释器==npm install -g typescript -g ==全局安装
2、新建.ts文件
3、cd进文件目录下,新建的文件名.ts(使用tsc 新建的文件名.ts,会生成一个.js文件)
4、在html页面引入新生成的js文件

let ccc:string="guodong"
console.log(ccc)

let arr:string[]=["aa","bb","cc","ddd",]
console.log(arr)

let arrb:Array<number>=[1,2,3]
console.log(arrb)

let demoa:any="你好啊!!!"
console.log(demoa)

function fun(num:string):void{
    console.log(num)
}
fun("aaaaa")

:一上代码运行时是没有什么问题的,但是一点击新生成的js文件控制台反馈问题“无法声明块范围变量…”,这个我问过老师了,老师讲这个是电脑环境的问题,只要没映像程序运行就可以的。这个问题也可以结局,在SCDN搜搜“无法声明块范围变量”就有结局办法。

解构

数组解构:

1、如果我们要把一个数组当中的值赋值给多个变量那么我们可以使用对象解构在这里插入图片描述
2、解构作为参数传递
在这里插入图片描述
3、忽略数组中某些元素(只需要把忽略的位置空缺就好)
在这里插入图片描述

对象解构
let o={
    a:"qqq",
    b:"www",
    c:"eee"
}
let {a,b}=o
console.log(a+"---"+b)//qqq---www

展开

数组展开
let arra=[1,2,3]
let arrb=[4,5,6]
let newarr=[...arra,...arrb,100]
console.log(newarr)//[1, 2, 3, 4, 5, 6, 100]
对象展开
let obj={
    name:"张三",
    sex:"男"
}
let newobj={...obj,sex:18}
console.log(newobj)

创建TypetScript项目

create-react-app 项目名称 --typescript
TypetScript中组件引用的“坑”
  在页面中引用.tsx文件会报错
 解决方式引入的时候不要加后缀名tsx

在这里插入图片描述

数据传递

直接传递数据会报错,如下图
在这里插入图片描述
解决方式
在进行数据传递的时候要使用 interface接口对类型限制
在子组件中进行限制设定
:接口(interface)在下面有介绍到
在这里插入图片描述
在父组件中传递数据,注意传递的数据要用中括号包裹起来
在这里插入图片描述

接口(interface)

接口:在面向对象的编程中,接口是一种规范的定义,它定义了行为和动作的规范,在程序设计里面,接口起到一种限制和规范的作用
使用interface关键字定义 接口一般首字母大写 有的编程语言中会建议接口的名称加上 I 前缀
可选属性:可选属性的含义是该属性可以不存在 有时候不要完全匹配一个接口,那么可以用可选属性。使用?号

:如果在接口中定义的一个属性,但是是使用就会报错,这个时候就可以使用可选属性(如下图中的案例)
在这里插入图片描述

定义状态

定义状态必须定义接口
:component后面的尖括号中,第一个参数必须是props的接口,但是我们没有写,那就用{}占位,不然会报错的
public是共有的意思,谁都可以使用,可加可不加 ,但是建议加上
在这里插入图片描述
在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_48653480/article/details/108920275

智能推荐

Java8根据传递String类型,逗号隔开code顺序,对查询的List进行排序_java string逗号分隔 按照一定顺序排序-程序员宅基地

文章浏览阅读792次。例子1:public List<IndicatorInstance> findAllIndicatorInstance(String indicatorRange, String dimensionGroupRange, String timeType) { List<String> conditionDimensionGroups = this.sp..._java string逗号分隔 按照一定顺序排序

localstorage 本地存储及token设置,vuex刷新数据丢失_token存入localstorage不更新怎么办-程序员宅基地

文章浏览阅读2.7k次。本地存储简介简单介绍:前端开发时js可以调用api在浏览器存储数据,大小总共未5M可再浏览器查看,f12打开控制台方式:1.localstorage在本地浏览器长期存储,需要手动清除才会消失(清除浏览器缓存或调用js方法清除)2.sessionstorage在本地浏览器存储,但只存在一次会话级(即浏览器关闭再打开就没了)使用:localstorage和sessionstorage使用一样,下面的只需要替换就行// 存:第一个参数为存在本地的名字,即本地容器的名字localstorag_token存入localstorage不更新怎么办

Java 1.8(圆的面积和周长)编写程序,使用以下公式计算并显示半径为5.5的圆的面积和周长。_java程序 已知圆的半径是5.6-程序员宅基地

文章浏览阅读2.1k次,点赞6次,收藏7次。package Try;import java.util.Scanner;//在java.util中导入Scanner包public class Circle { public static void main(String[] args) { System.out.println("请输入圆的半径");//友情提示 Scanner input = new Scanner(System.in);//创建一个名为input的输入环境 ._java程序 已知圆的半径是5.6

华为鸿蒙开发者大会什么时候召开,鸿蒙2.0来了!华为正式公布开发者大会时间:9月10日...-程序员宅基地

文章浏览阅读416次。原标题:鸿蒙2.0来了!华为正式公布开发者大会时间:9月10日8月2日晚上8点,华为通过官方微博正式对外宣布了华为开发者大会HDC2020的召开时间为9月10日至12日。这一消息与此前爆料的华为将于9月11日召开开发者大会的消息基本吻合。 不出意外的话,这场开发者大会的重头戏,将会是备受期待的鸿蒙2.0操作系统。因为按照去年华为开发者大会公布的鸿蒙系统应用时间表,今年华为将会上马鸿蒙2.0操作系统..._7月8鸿蒙鲲鹏大会什么时候召开

批量栅格投影(arcpy)_arcpy 摨西蓮銝箇掖-程序员宅基地

文章浏览阅读3.2k次,点赞3次,收藏20次。栅格投影的意义:将分辨率单位为度的变为米定义投影的意义:将某个栅格的坐标系变为想要的坐标系批量栅格投影的代码如下:# -*- coding: UTF-8 -*-#需要自行更改的如下:#inws:输入路径#outws:输出路径#Coordinate_System:目标投影坐标系import globimport osimport arcpy# 输入路径 应该注意,中文路径,会导致读不出文件inws = r"------"# 参考文件路径 使用栅格数据集(从其导入方形像元大_arcpy 摨西蓮銝箇掖

《Malware Analysis and Detection Engineering》第一章:恶意软件趋势与反病毒人员架构-程序员宅基地

文章浏览阅读279次。malspam 垃圾邮件_malware analysis and detection engineering

随便推点

ceph简介-程序员宅基地

文章浏览阅读1.5w次,点赞23次,收藏95次。ceph是⼀种分布式存储系统,可以将多台服务器组成⼀个超⼤集群,把这些机器中的磁盘资源整合到⼀块⼉,形成⼀个⼤的资源池(⽀持PB级别,大厂用得多),然后按需分配给客户端应⽤使⽤。由于ceph源码代码量较大,这里只做简单介绍。ceph特点⽀持三种存储接口: 对象存储、块存储、⽂件存储,称之为统⼀存储采⽤CRUSH算法,数据分布均衡,并⾏度⾼,不需要维护固定的元数据结构。CRUSH需要集群的映射,并使⽤CRUSH映射在OSDs中伪随机存储和检索数据,数据在集群中均匀分布数据具有强⼀致性,确保所有副本写_ceph

[kuangbin带你飞]专题一 简单搜索 K - 迷宫问题-程序员宅基地

文章浏览阅读87次。K - 迷宫问题定义一个二维数组: int maze[5][5] = { 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 0,};它表示一个迷宫,其中的1表示墙壁,0表示可以走的路,只能横着走或竖着走,不能斜着走,要求编程序找出从左上角到右下角的最短路线。Input一个5 × 5...

解决SQL Server 2014 Management Studio无法将excel数据导入数据库_标题: sql server 导入和导出向导 ----------------------------程序员宅基地

文章浏览阅读1.2k次。标题: SQL Server 导入和导出向导------------------------------操作无法完成。------------------------------其他信息:未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序。 (System.Data)针对上面这个问题,可以尝试下载安装AccessDatabaseEngine.e..._标题: sql server 导入和导出向导 ------------------------------ 操作无法完成

无法获得 VMCI 驱动程序的版本: 句柄无效_visual machine communication interface(vmci)驱动程序-程序员宅基地

文章浏览阅读1.6k次。今天打开虚拟机遇到了一些问题,一直在网上查也没用,最后十分粗暴的重装了一遍。安装后打开的时候遇到了这个问题,查了一下解决了。在此记录一下。首先看一下VMCI。虚拟机交流接口VMCI(The Virtual Machine Communication Interface)是一个在一个或多个虚拟机与宿主机之间提供高速高效交流的基本组件(infrastructure)启用一个虚拟机的VMCI..._visual machine communication interface(vmci)驱动程序

(Python实用)用Python做的交互式动态大图_python pyecharts 动态放大-程序员宅基地

文章浏览阅读1.4k次。今天给大家分享1个pyecharts交互式动态可视化案例,通过先拆分、后组合的方式,一步步教你如何实现,具体成果如下。本次案例数据来源于国家统计局,通过爬虫获取,这里已给大家备好,请在文末获取一、绘制基本图形用pandas读取数据,通过整合数据格式,分别用pyecharts绘制地图、柱状图、饼图,具体内容如下:1.绘制地图importpyecharts.optionsasoptsfrompyecharts.globalsimportThemeTypefrompye..._python pyecharts 动态放大

LayUI upload上传组件上传文件的两种方式(手动上传、自动上传)_layui upload auto-程序员宅基地

文章浏览阅读8.3k次,点赞7次,收藏8次。1 手动上传上传文件分为两步,第一步选择文件,第二步上传文件。HTML代码:<input type='button' id='selectFile' value='选择文件'><div id='fileDiv'></div><input type='button' id='uploadFile' value='上传文件'>JS代码:$(function(){ initUpload();});//初始化上传组件funct_layui upload auto

推荐文章

热门文章

相关标签