TypeScript学习总结

  • 前言
  • 一、TypeScript是什么？
  • 二、JavaScript 与 TypeScript 的区别
  • 三、TypeScript基础
    • 3.3、TypeScript 基础语法
    • 3.3.1、TypeScript 基础类型
    • 3.3.2、TypeScript变量声明
    • 3.3.3、TypeScript 运算符
    • 3.3.4、TypeScript 条件语句
    • 3.3.5、TypeScript 循环
    • 3.3.6、TypeScript Array(数组)
    • 3.3.7、TypeScript Map 对象
    • 3.3.8、TypeScript Map 接口
    • 3.3.9、TypeScript 类

前言

这篇笔记主要记录了我在学习TypeScript时的重点知识总结。通过web应用基础这门课程的学习，我对于TypeScript是什么，TypeScript的基本用法和语法有了初步的了解。

一、TypeScript是什么？

TypeScript是JavaScript类型的超集（当前我们处于ES5），它可以编译成纯JavaScript。

TypeScript给JavaScript加上可选的类型系统，给JavaScript加上静态类型后，就能将调试从运行期提前到编码期，诸如类型检查、越界检查这样的功能才能真正发挥作用。 TypeScript的开发体验远远超过以往纯JavaScript的开发体验，无需运行程序即可修复潜在bug。

TypeScript支持未来的ES6甚至ES7。在TypeScript中，可以直接使用ES6的最新特性，在编译时它会自动编译到ES3或ES5。

TypeScript可以构建大型程序，并在任何浏览器、任何计算机和任何操作系统上运行，且是开源的。

二、JavaScript 与 TypeScript 的区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

三、TypeScript基础

3.3、TypeScript 基础语法

TypeScript 程序由以下几个部分组成：模块、函数、变量、语句和表达式、注释

3.3.1、TypeScript 基础类型

TypeScript 包含的数据类型如下表:

数据类型 关键字
任意类型 any
数字类型 number
字符串类型 string
布尔类型 boolean
数组类型 无
元组 无
枚举 enum
void void
null null
undefined undefined
never never

3.3.2、TypeScript变量声明

变量是一种使用方便的占位符，用于引用计算机内存地址。

我们可以把变量看做存储数据的容器。

TypeScript 变量的命名规则：

  • 变量名称可以包含数字和字母。
  • 除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。
  • 变量名不能以数字开头。

变量使用前必须先声明，我们可以使用 var、let、const 来声明变量。var是函数作用域，let是块作用域，不允许重复声明,const是块作用域且初始化后无法改变其值。
我们可以使用以下四种方式来声明变量：

     //var [变量名] : [类型] = 值;var uname:string = "Runoob";//var [变量名] : [类型];var uname:string;//var [变量名] = 值;var uname = "Runoob";//var [变量名];var uname;

3.3.3、TypeScript 运算符

TypeScript 主要包含以下几种运算：

  • 算术运算符：+，-，*，/，%，++，--
  • 逻辑运算符：&&，||，！
  • 关系运算符：==，!=，>，<，>=，<=
  • 按位运算符：&，|，~，^，<<，>>，>>>>
  • 赋值运算符：=，+=，-=，*=，/=
  • 三元/条件运算符 
      //Test ? expr1 : expr2//Test − 指定的条件语句//expr1 − 如果条件语句 Test 返回 true 则返回该值//expr2 − 如果条件语句 Test 返回 false 则返回该值var num:number = -2 var result = num > 0 ? "大于 0" : "小于 0，或等于 0" console.log(result)
  • 字符串运算符：+ 运算符可以拼接两个字符串
  • 类型运算符：typeof 运算符

3.3.4、TypeScript 条件语句

TypeScript 中的条件语句：

  • if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
  • if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
  • if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
  • switch 语句 - 使用该语句来选择多个代码块之一来执行

3.3.5、TypeScript 循环

TypeScript 中的循环语句：

  • for 循环
  • for…in 循环
  • for…of 、forEach、every 和 some 循环
  • while 循环
  • do…while 循环
    TypeScript 中的终止循环语句：
  • break 语句
  • continue 语句

3.3.6、TypeScript Array(数组)

Array 对象的构造函数接受以下两种值：

  • 表示数组大小的数值。
  • 初始化的数组列表，元素使用逗号分隔值。
    csharp var arr_names:number[] = new Array(4) for(var i = 0; i<arr_names.length; i++) { arr_names[i] = i * 2 console.log(arr_names[i]) }
    数组解构：把数组元素赋值给变量

      var arr:number[] = [12,13] var[x,y] = arr // 将数组的两个元素赋值给变量 x 和 yconsole.log(x) console.log(y)

数组迭代使用 for 语句来循环输出数组的各个元素：

     var j:any; var nums:number[] = [1001,1002,1003,1004]  for(j in nums) { console.log(nums[j]) }

多维数组
一个数组的元素可以是另外一个数组，这样就构成了多维数组（Multi-dimensional Array）。
最简单的多维数组是二维数组，定义方式如下：
csharp var arr_name:datatype[][]=[ [val1,val2,val3],[v1,v2,v3] ]
数组在函数中的使用

  • 作为参数传递给函数
  • 作为函数的返回值

常用的数组方法：

  • concat() 连接两个或更多的数组，并返回结果。
  • every() 检测数值元素的每个元素是否都符合条件。
  • filter() 检测数值元素，并返回符合条件所有元素的数组。
  • forEach() 数组每个元素都执行一次回调函数。
  • indexOf() 搜索数组中的元素，并返回它所在的位置。如果搜索不到，返回值 -1，代表没有此项。
  • join() 把数组的所有元素放入一个字符串。
  • lastIndexOf() 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
  • map() 通过指定函数处理数组的每个元素，并返回处理后的数组。
  • pop() 删除数组的最后一个元素并返回删除的元素。
  • push() 向数组的末尾添加一个或更多元素，并返回新的长度。
  • reduce() 将数组元素计算为一个值（从左到右）。
  • reduceRight() 将数组元素计算为一个值（从右到左）。
  • reverse() 反转数组的元素顺序。
  • shift() 删除并返回数组的第一个元素。
  • slice() 选取数组的的一部分，并返回一个新数组。
  • some() 检测数组元素中是否有元素符合指定条件。
  • sort() 对数组的元素进行排序。
  • splice() 从数组中添加或删除元素。
  • toString() 把数组转换为字符串，并返回结果。
  • unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

3.3.7、TypeScript Map 对象

Map 相关的函数与属性：

  1. map.clear() – 移除 Map 对象的所有键/值对 。
  2. map.set() – 设置键值对，返回该 Map 对象。
  3. map.get() – 返回键对应的值，如果不存在，则返回 undefined。
  4. map.has() – 返回一个布尔值，用于判断 Map 中是否包含键对应的值。
  5. map.delete() – 删除 Map 中的元素，删除成功返回 true，失败返回 false。
  6. map.size – 返回 Map 对象键/值对的数量。
  7. map.keys() - 返回一个 Iterator 对象， 包含了 Map 对象中每个元素的键 。
  8. map.values() – 返回一个新的Iterator对象，包含了Map对象中每个元素的值 。

Map 对象中的元素是按顺序插入的，我们可以迭代 Map 对象，每一次迭代返回 [key, value] 数组。
TypeScript使用 for…of 来实现迭代.

3.3.8、TypeScript Map 接口

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

TypeScript 接口定义如下：interface interface_name { }，需要注意接口不能转换为 JavaScript。 它只是 TypeScript 的一部分。

接口继承就是说接口可以通过其他接口来扩展自己。Typescript 允许接口继承多个接口，继承的各个接口使用逗号 , 分隔。继承使用关键字 extends。

单接口继承语法格式：Child_interface_name extends super_interface_name

多接口继承语法格式：Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name

3.3.9、TypeScript 类

TypeScript 是面向对象的 JavaScript。

类描述了所创建的对象共同的属性和方法。

TypeScript 支持面向对象的所有特性，比如 类、接口等。

TypeScript 类定义方式如下：

class class_name { // 类作用域
}

 定义类的关键字为 class，后面紧跟类名，类可以包含以下几个模块（类的数据成员）：字段 − 字段是类里面声明的变量。字段表示对象的有关数据。构造函数 − 类实例化时调用，可以为类的对象分配内存。方法 − 方法为对象要执行的操作。

TypeScript学习总结相关推荐

  1. RUST直接升钢指令_[译]参照TypeScript学习Rust-part-1

    [译]参照TypeScript学习Rust-1 · 前端在线​regx.vip 对于前端,笔者比较认可Rust作为前端开发技术栈投资的,本文系列翻译旨在分享.学习Rust这门语言. Rust常常被认为 ...

  2. TypeScript学习笔记3：运算符

    TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型 文章目录 运算符 ...

  3. TypeScript学习笔记2：数据类型

    TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型 文章目录 数据类型 ...

  4. TypeScript学习笔记1：变量赋值及书写方式

    TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型 文章目录 变量赋值 ...

  5. Typescript 学习笔记七：泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  6. typescript 接口 java_[Java教程]【TypeScript】TypeScript 学习 2——接口

    [Java教程][TypeScript]TypeScript 学习 2--接口 0 2015-06-19 12:00:28 在 TypeScript 中,接口是用作约束作用的,在编译成 JavaScr ...

  7. TypeScript 学习一 参数，函数，析构表达式

    1,TypeScript是由微软开发的,不过新出的Angular2框架就是谷歌公司由TypeScript语言编写的,所以现在TypeScript是有微软和谷歌一起支持的: 2,TypeScript在j ...

  8. Typescript 学习笔记一：介绍、安装、编译

    前言 整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...

  9. typescript学习之路(三) —— ts定义类的方法（包含es5以及es6的定义类）

    提起类,不得不说一下,强类型编程语言,如php,java,c++等都有类的概念.而js作为一门弱类型语言,是没有类这个概念的,虽然也能模拟类的实现,但总归不是类.so,ts也只是模拟类而已,使得更贴切 ...

最新文章

  1. Mybatis入门：2(xml形式的增删改查)
  2. javascript调试_如何提高JavaScript调试技能
  3. 心脏病预测模型（基于Python的数据挖据）
  4. City of Angels
  5. VB编程宣告终结，微软：不再提供新功能
  6. 【antd】输入控件的思想
  7. [vue] 你期待vue3.0有什么功能或者改进的地方？
  8. python获取网络信息_利用psutil获取网络信息
  9. mybaits 学习
  10. storage ( initial 64K minextents 1 maxextents unlimited );
  11. --hot 和 --inline的区别
  12. 捣鼓nsq - 安装和运行
  13. 限时秒杀┃“探月计划”来袭，美国米德天文望远镜助孩子观月赏月
  14. 深度学习基础--Bottleneck(瓶颈) Architectures
  15. 芯片测试算法及时间复杂度分析
  16. CFO和财务VP的OKR案例，打造并领导世界一流的金融团队
  17. 无聊记录下爬取虎牙录播
  18. vue扫码下载APP安装包
  19. [Unity3D]Unity3D游戏开发之仿仙剑奇侠传角色控制效果
  20. 俄罗斯方块——制作道具

热门文章

  1. 使用HSqlDB的SQL/JRT功能
  2. 怎么申请注册微信小程序-微信小程序教程1
  3. 女人假正经的十三种表现
  4. 网络数据保障ptop_网络影响未来十大预言
  5. 爱因斯坦广义相对论： 质量/能量物体是如何影响时空的？
  6. 为什么说信息是负熵？
  7. 满格信号服务器开小差,明明信号满格，网络却很慢？教你三招解决！
  8. 无法获取链接服务器 XXX 的 OLE DB 访问接口 SQLNCLI10 的架构行集 DBSCHEMA_TABLES_INFO。该访问接口支持该接口，但使用该接口时返回了失败代码。...
  9. 高速公路上边有没有人脸识别摄像头_支小蜜初高中智慧校园人脸识别消费系统...
  10. phpadmin安装到mysql中_phpadmin安装教程