TypeScript

最新推荐文章于 2024-10-15 09:57:04 发布

atwillll

最新推荐文章于 2024-10-15 09:57:04 发布

阅读量148

点赞数

文章标签： javascript typescript 前端

本文链接：https://blog.csdn.net/m0_56632971/article/details/120763521

版权

一种给JavaScript添加特性的语言扩展

增加的功能有

类型批注和编译时类型检查
类型推断
类型擦除
接口
枚举
Mixin
泛型编程
名字空间
元组
Await

从ECMA2015反向移植而来的功能有

类
模块
lambda函数的箭头语法
可选参数以及默认参数

JavaScript与TypeScript的区别

对JavaScript的语法进行扩展
现有的JavaScript代码可与TypeScript一起工作无需任何修改，TypeScript提供编译时检查（通过类型注解提供编译时的静态类型检查）（？）
TypeScript可处理已有的JavaScript代码，并只对其中的TypeScript代码进行编译（？）

	const hello : string = "Hello World!"
	console.log(hello)  //typescript

	var hello = "Hello World!"
	console.log(hello)  //javascript

(???)

基础语法

由

函数
模块
变量
语句和表达式

注释
组成

  const hello : string = "HelloWorld!"
  console.log(hello)

以上代码先通过tsc命令编译：
tsc
得到如下js代码：

var hello = "Hello World";
console.log(hello);

最后使用node命令执行js代码

$ node
Hello World

可以同时编译多个ts文件
一种面向对象的编程语言

对象：类的一个实例
类：模版，描述一类对象的行为和状态

方法：类的操作和实现步骤

  class Site {
  	name():void {
  		console.log("name")
  	}
  }
  var obj = new Site();
  obj.name();

定义了一个类Site，有一个方法name（），输出字符串
new关键字创建类的对象，该对象调用name（）
编译后的js代码

var Site = /** @class */ (function () {
function Site() {
}
Site.prototype.name = function () {
    console.log("Runoob");
};
return Site;
}());
var obj = new Site();
obj.name();

通过tsc将ts代码转换为js代码再执行

TypeScript基础类型

任意类型 any 可以赋予任意类型的值
数字类型 number 双精度64位浮点值，可以用来表示整数和分数
字符串类型 string 一个字符系列，使用单引号或双引号来表示字符串类型，反引号定义多行文本和内嵌表达式
布尔类型 boolean 表示逻辑值true或false
数组类型声明变量为数组
元组用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同
枚举 enum 定义数值集合
void void 用于表示方法返回值的类型，表示该方法没有返回值
null 对象值缺失
undefined undefined 用于初始化变量为一个未定义的值
never never 是其他类型（包括null和undefined）的子类型，代表从不会出现的值

TypeScript声明变量

var [变量名] : [类型] = 值；
var uname:string = "Runoob"
若声明变量类型，但没有初始值，则变量为undefined
声明变量初始值，但没有类型，则变量可以为任意类型
没有设置类型和初始值，类型可以是任意类型，默认初始值为undefined

类型断言

手动指定一个值的类型，改变值的类型
<类型>值
或者值 as 类型

作用域

全局作用域：定义在程序结构外部，可以在任何位置使用
类作用域：可以称为字段，是声明在类中，但在类的方法外，该变量可以通过类的对象来访问。类变量也可以是静态，静态的类变量可以通过类名直接访问。
局部作用域：声明在代码块，只能在声明它的代码块中使用

运算符

算数运算符 +,-,*,/,%,++,–
逻辑运算符 &&,||,!
关系运算符 ==, !=, >,<,>=,<=
按位运算符
赋值运算符
三元/条件运算符
字符串运算符 typeof
类型运算符

条件语句

if
if…else…
if…else if…else
switch…case

循环

for
for…in
for…of
forEach
every
some
while
do…while
break
continue

函数

定义

function function-name(){}

调用

function-name()

函数返回值

function function-name():return_type { //语句 return }

带参数函数

function function-name(param1[:datatype],param2 [:datatype]){ }

可选参数

如果定义了参数，则必须传入这些参数。或设置为参数可选，使用?标识

默认参数

如果不传入参数值，则使用默认参数param[:type] = default_value
不能同时设置为可选和默认

剩余参数

不知道向函数传入多少参数时，可以使用剩余参数来定义
剩余参数允许将一个不确定数量的参数作为一个数组传入

匿名函数

没有函数名的函数，可以赋一个值，成为函数表达式
自调用，在函数后使用（）即可

构造函数

ts也支持使用Function()来定义函数
var res = new Function([arg1[,arg2[,...argN]],] functionBody)

递归函数

在函数内调用函数本身

箭头函数（lambda函数）

() => {}

函数重载

方法名相同，参数不同，返回类型可以相同也可以不同
参数类型不同
fn disp(string):void
fn disp(number):void
或参数数量不同
fn disp(n1:number):void
fn disp(x:number,y:number);void
或类型数据不同
fn disp(n1:number,s1:string):void
fn disp(s:string,n:number):void

Number对象

var num = new Number(value)
Number对象属性

MAX_VALUE 最大的数
MIN_VALUE 最小的数
NaN 不是数字值
NEGATIVE_INFINITY 负无穷大
POSITIVE_INFINITY 正无穷大
prototype 原型链
constructor 构造函数

Number对象方法

toExponential() 将对象的值转换为指数计算计数法
toFixed() 将数字转换为字符串，并对小数点指定位数
toLocaleString() 将数字转换为字符串，使用本地数字格式顺序
toPrecision() 将数字格式化为指定的长度
toString() 将数字转换为字符串，使用指定的基数。
valueOf() 返回一个Number对象的原始数字值

String

string属性

constructor:创建该对象函数的引用
length：返回字符串的长度
prototype：原型链

string方法

charAt(): 返回指定位置的字符
charCodeAt():返回指定位置字符的Unicode编码
concat(): 连接两个或多个字符串，并返回新的字符串
indexOf():返回某个指定的字符在字符串中首次出现的位置
lastIndexOf()：从后向前搜索字符串，并从起始位置开始计算返回字符串最后出现的位置
loacleCompare():用本地特定的顺序来比较两个字符串
match(): 查找找到一个或多个正则表达式的匹配
replace(): 替换正则表达式匹配的子串
search(): 检索与正则表达式相匹配的值
slice():提取字符串的片段，并在新的字符串中返回被提取的部分
split(): 把字符串分割为子字符串数组
substr():从起始索引号提取字符串中指定数目的字符
substring():提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase():根据主机的语言环境吧字符串转换为小写
toLocaleUpperCase():根据主机的语言环境把字符串转换为大写
toLowerCase(): 把字符串转换为小写
toString(): 返回字符串
toUpperCase(): 把字符串转换为大写
valueOf():返回指定字符串对象的原始值

数组

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

Map对象

一种新的数据结构
Map对象保存键值对，并能记住键的原始插入顺序
任何值都可以作为一个键或者一个值

创建Map

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