TypeScript学习笔记

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语句的字符串

递归函数

函数内调用函数本身

6*5*4*3*2*1

Lambda函数

也称之为箭头函数,箭头函数表达式的语法比函数表达式更短,

([param1,param2,param n])=>statement;

函数只有一行语句  
函数是一个语句块


函数返回两个数的和
我们可以不指定函数的参数类型,通过函数内来推断参数类型
单个参数 () 是可选的
无参数时可以设置空括号

函数重载

重载是方法名字相同,而参数不同,返回类型可以相同也可以不同。

每个重载的方法(或者构造函数)都必须有一个独一无二的参数类型列表。

如果参数类型不同,则参数类型应设置为 any。参数数量不同你可以将不同的参数设置为可选。
定义了参数类型与参数数量不同



Number

Number对象是原始数值的包装对象

var num=new Number(value)

如果一个参数值不能转换为一个数字将返回NaN(非数字值)

支持的属性:

negative_infinity,positive_infinity,

NaN

//月份是:NaN

prototype

//员工号: 123员工姓名: admin员工邮箱: admin@runoob.com

对象方法


String

用于处理文本(字符串)

var txt=new String("string")    var txt="111"

String 对象属性

方法:

1.charAt()

 指定位置的符号

2.charCodeAt()

 返回在指定的位置的字符的 Unicode 编码。

3.concat()

连接两个或更多字符串,并返回新的字符串

4.indexOf()

返回某个指定的字符串值在字符串中首次出现的位置。

5.lastIndexOf()

从后向前搜索字符串,并从起始位置(0)开始计算返回字符串最后出现的位置。

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对象:

Array 对象的构造函数接受以上两种值  
0,2,4,6

数组解构:

数组迭代

每一次对过程的重复称为一次“迭代

多维数组

一个数组的元素可以是另外一个数组,这样就构成了多维数组(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()

搜索数组中的元素,并返回它所在的位置。如果搜索不到,返回值 -1,代表没有此项。

join()

把数组的所有元素放入一个字符串。

lastIndexOf()

返回一个指定的字符串值最后出现的位置,在一个字符串中的指定位置从后向前搜索。

map()

通过指定函数处理数组的每个元素,并返回处理后的数组。

pop()

删除数组的最后一个元素并返回删除的元素。

push()

向数组的末尾添加一个或更多元素,并返回新的长度。

reduce()

将数组元素计算为一个值(从左到右)。

reduceRight()

将数组元素计算为一个值(从右到左)。

reverse()

reverse()反转数组的元素顺序。

shift()

删除并返回数组的第一个元素。

slice()

选取数组的的一部分,并返回一个新数组。

some()

检测数组元素中是否有元素符合指定条件。

sort()

对数组的元素进行排序。

splice()

从数组中添加或删除元素。  

toString()

把数组转换为字符串,并返回结果。

unshift()

向数组的开头添加一个或更多元素,并返回新的长度。

Map对象

Map 对象保存键值对,并且能够记住键的原始插入顺序。

任何值(对象或者原始值) 都可以作为一个键或一个值。

Map 是 ES6 中引入的一种新的数据结构

创建 Map


初始化 Map,可以以数组的格式来传入键值对  
初始化 Map,可以以数组的格式来传入键值对


迭代 Map

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

结果

元组

我们知道数组中元素的数据类型都一般是相同的(any[] 类型的数组可以不同),如果存储的元素数据类型不同,则需要使用元组。

元组中允许存储不同类型的元素,元组可以作为参数传递给函数。

语法格式:

var tuple_name=[val1,val2,...valn]

实例

访问元组:元组中元素使用索引来访问

tuple_name[index]

元组运算:

向元组添加新元素或者删除元素  

更新元组:

元组是可变的,这意味着我们可以对元组进行更新操作

解构元组: 

把元组元素赋值给变量  ,b=a[0],c=a[1]

联合类型

联合类型(Union Types)可以通过管道(|)将变量设置多种类型,赋值时可以根据设置的类型来赋值。

注意:只能赋值指定的类型,如果赋值其它类型就会报错。

创建联合类型的语法格式
声明一个联合类型

接口

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

需要注意接口不能转换为 JavaScript。 它只是 TypeScript 的一部分。  
联合类型和接口
接口和数组 :接口中我们可以将数组的索引值和元素设置为不同类型,索引值可以是数字或字符串。

接口继承

接口继承就是说接口可以通过其他接口来扩展自己。Typescript 允许接口继承多个接口。继承使用关键字 extends。

继承的各个接口使用逗号 , 分隔。
单继承实例
多继承实例

TypeScript 是面向对象的 JavaScript。类描述了所创建的对象共同的属性和方法。TypeScript 支持面向对象的所有特性,比如 类、接口等。

定义方法: class class_name{//类作用域}

创建类的数据成员:

以下实例我们声明了类 Car,包含字段为 engine,构造函数在类实例化后初始化字段 engine。this 关键字表示当前类实例化的对象。注意构造函数的参数名与字段名相同,this.engine 表示类的字段。此外我们也在类中定义了一个方法 disp()。

创建实例化对象:

用 new 关键字来实例化类的对象
类实例化时会调用构造函数
类中的字段属性和方法可以使用 . 号来访问

完整实例:

创建来一个 Car 类,然后通过关键字 new 来创建一个对象并访问属性和方法 

类的继承:

TypeScript 支持继承类,即我们可以在创建类的时候继承一个已存在的类,这个已存在的类称为父类,继承它的类称为子类。类继承使用关键字 extends,子类除了不能继承父类的私有成员(方法和属性)和构造函数,其他的都可以继承。      TypeScript 一次只能继承一个类,不支持继承多个类,但 TypeScript 支持多重继承(A 继承 B,B 继承 C)。

语法格式
类的继承:实例中创建了 Shape 类,Circle 类继承了 Shape 类,Circle 类可以直接使用 Area 属性
需要注意的是子类只能继承一个父类,TypeScript 不支持继承多个类,但支持多重继承

继承类的方法重写:

类继承后,子类可以对父类的方法重新定义,这个过程称之为方法的重写。其中 super 关键字是对父类的直接引用,该关键字可以引用父类的属性和方法。

static 关键字

static 关键字用于定义类的数据成员(属性和方法)为静态的,静态成员可以直接通过类名调用。

instanceof 运算符

instanceof 运算符用于判断对象是否是指定的类型,如果是返回 true,否则返回 false。

true

访问控制修饰符

类和接口:

类可以实现接口,使用关键字 implements,并将 interest 字段作为类的属性使用。

红 AgriLoan 类实现了 ILoan 接口

对象

包含一组键值对的实例。 值可以是标量、函数、数组、对象等

以上对象包含了标量,函数,集合(数组或元组)。

类型模板:

Typescript 中的对象必须是特定类型的实例
对象也可以作为一个参数传递给函数  

鸭子类型

关注点在于对象的行为

命名空间

命名空间一个最明确的目的就是解决重名问题。

语法格式 :TypeScript 中命名空间使用 namespace 来定义

以上定义了一个命名空间 SomeNameSpaceName,如果我们需要在外部可以调用 SomeNameSpaceName 中的类和接口,则需要在类和接口添加 export 关键字。

在另外一个命名空间调用语法格式

嵌套命名空间

命名空间支持嵌套,即你可以将命名空间定义在另外一个命名空间里头
成员的访问使用点号 . 来实现

模块

模块的设计理念是可以更换的组织代码。

模块是在其自身的作用域里执行,并不是在全局作用域,这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的,除非明确地使用 export 导出它们。类似地,我们必须通过 import 导入其他模块导出的变量、函数、类等。

两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。

模块使用模块加载器去导入其它的模块。 在运行时,模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。 大家最熟知的JavaScript模块加载器是服务于 Node.js 的 CommonJS 和服务于 Web 应用的 Require.js。

外还有有 SystemJs 和 Webpack。

模块导出使用关键字 export 关键字,语法格式
要在另外一个文件使用该模块就需要使用 import 关键字来导入

声明文件 

TypeScript 作为 JavaScript 的超集,在开发过程中不可避免要引用其他第三方的 JavaScript 的库。虽然通过直接引用可以调用库的类和方法,但是却无法使用TypeScript 诸如类型检查等特性功能。为了解决这个问题,需要将这些库里的函数和方法体去掉后只保留导出类型声明,而产生了一个描述 JavaScript 库和模块信息的声明文件。通过引用这个声明文件,就可以借用 TypeScript 的各种特性来使用库文件了。

声明文件或模块的语法格式
TypeScript 引入声明文件语法格式
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345