TypeScript是JavaScript的一个超集,支持ECMAScript
基础语法:
组成部分-- 模块,函数,变量,语句和表达式,注释
Ts会忽略程序中出现的空格、制表符、换行符
面向对象:
Ts是面向对象的编程语言,是一种对现实世界理解和抽象的方法
对象和类
对象:类的一个实例,有状态和行为
类:模板,描述一类对象的行为和状态
方法:类的操作的实现步骤
注意事项:
空格、制表符通常用来缩进代码
区分大小写
分号可选,单同一行要用分号分隔
注释:单行注释 //注释分容 多行注释 /**/
基础类型
任意类型 :any
数字类型: number 双精度64位浮点值 可用来表示整数和分数
字符串类型: string 单引号' 或 双引号"表示字符串类型,反引号`来定义多行文本和内嵌表达式
布尔类型: boolean 逻辑值 true/false
数组类型: 在元素类型后面加[] let arr:number[]=[1,2] 或者使用数组泛型 let arr:Array<number>=[1,2]
元组: 表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同
枚举: enum 用于定义数值集合 enumerate Color{Red,Green,Blue}; let c:Color=Color.Blue; console.log(c);//输出2
void: 用于标识方法返回值的类型,表示该方法没有返回值 function hello():void{ alert("aaa") }
null: 表示对象值缺失,js中表示"什么都没有",是只有一个值的特殊类型,表示一个空对象引用 用typeof检测null返回是object
undefined: 初始化变量为一个未定义的值/一个没有设置值的变量 typeof一个没有值的变量会返回undefined,ull 和 Undefined 是其他任何类型(包括 void)的子类型,可以赋值给其它类型,如数字类型,此时,赋值后的类型会变成 null 或 undefined。而在TypeScript中启用严格的空校验(--strictNullChecks)特性,就可以使得null 和 undefined 只能被赋值给 void 或本身对应的类型,
// 启用 --strictNullCheckslet x: number;x = 1; // 运行正确x = undefined; // 运行错误x = null; // 运行错误 可以用|来支持多类型
x: number | null | undefined; x = 1; // 运行正确 x = undefined; // 运行正确 x = null; // 运行正确
neve:r 是其它类型(包括null和undefined)的子类型,表示从不会出现的值
声明为 never 类型的变量只能被 never 类型所赋值,在函数中它通常表现为抛出异常或无法执行到终止点(例如无限循环)
注意:
TypeScript和JavaScript没有整数类型
变量声明
命名规则:可包含数字,字母 ,不能以数字开头,除下划线_和美元$符号外,补鞥呢包含其他特殊字符
4种声明变量
var [变量名] : [类型] =值 var uname:string="111"
var [变量名] : [类型] var uname:string
var [变量名]=值 var uname="111"
var [变量名] var uname 默认初始值为 undefined
类型断言
类型断言可以用来手动指定一个值的类型,即允许变量从一种类型更改为另一种类型。
语法格式:<类型>值 、值 as 类型
类型判断
变量作用域
变量作用域指定了变量定义的位置
程序中变量的可用性由变量作用域决定
包含:
1、全局作用域 − 全局变量定义在程序结构的外部,它可以在你代码的任何位置使用。
2、类作用域 − 这个变量也可以称为 字段。类变量声明在一个类里头,但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的,静态的变量可以通过类名直接访问。
3、局部作用域 − 局部变量,局部变量只能在声明它的一个代码块(如:方法)中使用。从外部调用,会报错
注意:
Ts遵循强类型,如果将不同的类型赋值给变量会编译错误
var num:number = "111" // 这个代码会编译错误
运算符
算术运算符:
+加法,-减法,*乘法,/除法,% 取模(余数),++自增,--自减
逻辑运算符:
&& and, || or, ! not
短路运算符(&& 与 ||)
关系运算符:
==等于,!=不等于,>大于,<小于,>=大于或等于,<=小于或等于
按位运算符:
指程序设计中对位模式按位或二进制数的一元和二元操作
& and,| or+,~取反,^异或,<<左移,>>右移,>>>无符号右移
赋值运算符:
=赋值,+=先加后赋值,-=先减后赋值,*=,/=
三元/条件运算符:
Test ? expr1 : expr2
字符串运算符:
+运算符可以拼接两个字符串
类型运算符:
typeof ,一元运算符,返回操作数的数据类型
instanceof,用于判断对象是否为指定类型
其他运算法:
负号运算符- var x:number=1 var y=-x //输出结果-1
条件语句
if...
if...else
if... else if...else 多个判断条件
switch...case 允许检测一个变量等于多个值时的情况,每个值成为一个case,且被测试的变量会对每个switch...case进行检查
循环
for...
for(init;condition;increment){
statement(s)
}
init=>condition=>statement(s)=>increment
for..in
var j:any;
var n:any=['a','b','c']
for(j in n){console.log(n[j])}
for..of
let someArray=[1,"string",false];
for(let entry of someArray){console.log(entry);//1,"string",false,}
forEach
let list=[4,5,6]
list.forEach((val,idx,array)=>{
//val:当前值
//idx:当前index
//array:Array
})
every
let list=[4,5,6];
list.every((val,idx,array)=>{
return true; //Continues
//return false will quit the iteration
})
while
while(condition){
statement(s)
}
do...while do...while 循环是在循环的尾部检查它的条件
do{ statement(s) }while( condition );
break
continue
无限循环
for(;;){}
while(true){}
some
函数
带参函数
function func_name(param1[:datatype],param2[:datatype]){}
function add(x:number,y:number):number{return x+y};
console.log(1,2)
实例中定义了函数 add(),返回值的类型为 number。
add() 函数中定义了两个 number 类型的参数,函数内将两个参数相加并返回。
可选参数和默认参数
可选参数:
在 TypeScript 函数里,如果我们定义了参数,则我们必须传入这些参数,除非将这些参数设置为可选,可选参数使用问号标识 ?。
默认参数:
function function_name(param1[:type],param2[:type] = default_value) { }
剩余参数
有一种情况,我们不知道要向函数传入多少个参数,这时候我们就可以使用剩余参数来定义。
函数的最后一个命名参数 restOfName 以 ... 为前缀,它将成为一个由剩余参数组成的数组,索引值从0(包括)到 restOfName.length(不包括)。
匿名函数
没有函数名的函数
在程序运行时动态声明
可将函数赋值给一个变量,这红表达式就成为函数表达式
var res=function([arguments]){...}
不带参
var res=function(){return "hellp world"}
带参
var res=function(a:number,b:number){return a*b;}
匿名函数自调用
(function(){var x="hlll";})()
构造函数
支持js内置构造函数function来定义函数
var res=new Function([arg1[,arg2[,...argN]],],funcionBody)
arg1,arg2:参数列表
functionBody:一个含有包括函数定义的js语句的字符串
递归函数
函数内调用函数本身
Lambda函数
也称之为箭头函数,箭头函数表达式的语法比函数表达式更短,
([param1,param2,param n])=>statement;
函数重载
重载是方法名字相同,而参数不同,返回类型可以相同也可以不同。
每个重载的方法(或者构造函数)都必须有一个独一无二的参数类型列表。
Number
Number对象是原始数值的包装对象
var num=new Number(value)
如果一个参数值不能转换为一个数字将返回NaN(非数字值)
支持的属性:
NaN
prototype
对象方法
String
用于处理文本(字符串)
var txt=new String("string") var txt="111"
方法:
1.charAt()
2.charCodeAt()
3.concat()
4.indexOf()
5.lastIndexOf()
6.localeCompare()
7.match()
8.replace()
9.search()
10.slice() 提取字符串的片断,并在新的字符串中返回被提取的部分。
11.split()
12.substr() 从起始索引号提取字符串中指定数目的字符。
13.substring()
14.toLocaleLowerCase()
15.toLocaleUpperCase()
16.toLowerCase()
17.toString()
18.toUpperCase()
19.valueOf()
Array
数组对象是使用单独的变量名来存储一系列的值。
数组非常常用。
语法格式:
var array_name[:datatype] //声明
array_name=[val1,val2,valn..]//初始化
或者
var array_name[:data type]=[val1,val2,...valn]
var numlist:number[] = [2,4,6,8]
通过索引值访问数组元素 numlsit[0]
Array对象:
数组解构:
数组迭代
每一次对过程的重复称为一次“迭代”
多维数组
一个数组的元素可以是另外一个数组,这样就构成了多维数组(Multi-dimensional Array)
var arr_name:datatype[][]=[ [val1,val2,val3],[v1,v2,v3] ]
var multi:number[][] = [[1,2,3],[23,24,25]]
console.log(multi[0][0]) //1
console.log(multi[0][1]) //2
console.log(multi[1][0]) //33
console.log(multi[1][1]) //24
数组在函数中的使用:
数组方法
concat()
every()
filter()
forEach()
indexOf()
join()
lastIndexOf()
map()
pop()
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
Map对象
Map 对象保存键值对,并且能够记住键的原始插入顺序。
任何值(对象或者原始值) 都可以作为一个键或一个值。
Map 是 ES6 中引入的一种新的数据结构
迭代 Map
Map 对象中的元素是按顺序插入的,我们可以迭代 Map 对象,每一次迭代返回 [key, value] 数组。使用 for...of 来实现迭代
元组
我们知道数组中元素的数据类型都一般是相同的(any[] 类型的数组可以不同),如果存储的元素数据类型不同,则需要使用元组。
元组中允许存储不同类型的元素,元组可以作为参数传递给函数。
语法格式:
var tuple_name=[val1,val2,...valn]
访问元组:元组中元素使用索引来访问
元组运算:
更新元组:
解构元组:
联合类型
联合类型(Union Types)可以通过管道(|)将变量设置多种类型,赋值时可以根据设置的类型来赋值。
注意:只能赋值指定的类型,如果赋值其它类型就会报错。
接口
接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现,然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法。
接口继承
接口继承就是说接口可以通过其他接口来扩展自己。Typescript 允许接口继承多个接口。继承使用关键字 extends。
类
TypeScript 是面向对象的 JavaScript。类描述了所创建的对象共同的属性和方法。TypeScript 支持面向对象的所有特性,比如 类、接口等。
创建类的数据成员:
以下实例我们声明了类 Car,包含字段为 engine,构造函数在类实例化后初始化字段 engine。this 关键字表示当前类实例化的对象。注意构造函数的参数名与字段名相同,this.engine 表示类的字段。此外我们也在类中定义了一个方法 disp()。
创建实例化对象:
完整实例:
类的继承:
TypeScript 支持继承类,即我们可以在创建类的时候继承一个已存在的类,这个已存在的类称为父类,继承它的类称为子类。类继承使用关键字 extends,子类除了不能继承父类的私有成员(方法和属性)和构造函数,其他的都可以继承。 TypeScript 一次只能继承一个类,不支持继承多个类,但 TypeScript 支持多重继承(A 继承 B,B 继承 C)。
继承类的方法重写:
类继承后,子类可以对父类的方法重新定义,这个过程称之为方法的重写。其中 super 关键字是对父类的直接引用,该关键字可以引用父类的属性和方法。
static 关键字
static 关键字用于定义类的数据成员(属性和方法)为静态的,静态成员可以直接通过类名调用。
instanceof 运算符
instanceof 运算符用于判断对象是否是指定的类型,如果是返回 true,否则返回 false。
访问控制修饰符
类和接口:
类可以实现接口,使用关键字 implements,并将 interest 字段作为类的属性使用。
对象
包含一组键值对的实例。 值可以是标量、函数、数组、对象等
类型模板:
鸭子类型
命名空间
命名空间一个最明确的目的就是解决重名问题。
以上定义了一个命名空间 SomeNameSpaceName,如果我们需要在外部可以调用 SomeNameSpaceName 中的类和接口,则需要在类和接口添加 export 关键字。
嵌套命名空间
模块
模块的设计理念是可以更换的组织代码。
模块是在其自身的作用域里执行,并不是在全局作用域,这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的,除非明确地使用 export 导出它们。类似地,我们必须通过 import 导入其他模块导出的变量、函数、类等。
两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。
模块使用模块加载器去导入其它的模块。 在运行时,模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。 大家最熟知的JavaScript模块加载器是服务于 Node.js 的 CommonJS 和服务于 Web 应用的 Require.js。
外还有有 SystemJs 和 Webpack。
声明文件
TypeScript 作为 JavaScript 的超集,在开发过程中不可避免要引用其他第三方的 JavaScript 的库。虽然通过直接引用可以调用库的类和方法,但是却无法使用TypeScript 诸如类型检查等特性功能。为了解决这个问题,需要将这些库里的函数和方法体去掉后只保留导出类型声明,而产生了一个描述 JavaScript 库和模块信息的声明文件。通过引用这个声明文件,就可以借用 TypeScript 的各种特性来使用库文件了。