TypeScript基础学习

参考: http://jspang.com/post/typescript.html

一、初识TypeScript

1、什么是TypeScript

(1)TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,TypeScript在JavaScript的基础上添加了可选的静态类型和基于类的面向对象编程。

(2)TypeScript提供了类、模块和接口,更易于构建组件和维护。

2、开发环境的安装

(1)前提条件:安装node、npm

(2)安装TypeScript包

npm install typescript -g
tsc --version

3、编写HelloWorld程序

(1)创建项目文件夹

(2)进入项目文件夹,npm init -y 初始化项目,生成package.json文件

(2)创建tsconfig.json文件:tsc --init:它是一个TypeScript项目的配置文件,可以通过它来设置TypeScript编译器的编译参数。
(3)安装@types/node:npm install @types/node --dev-save:这个主要是解决模块的声明文件问题。

(4)编写HelloWorld.ts文件
HelloWorld.ts文件
在VScode编辑器下的任务菜单,终端–运行生成任务–tsc:构建-tsconfig.json,则会生成一个HelloWorld.js文件
HelloWorld.js文件
在终端输入node HelloWorld.js,就可以看到结果:

终端运行结果

二、TypeScript的数据类型

***空值(void):在TypeScript中,可以用void表示没有任何返回值的函数

例:fuction alertName():void{
alert(‘my name is Tom’);
}

声明一个void类型的变量没有什么用,因为你只能将它赋值为undefined和null

(1)Undefined类型

当你定义了一个变量,但没有给他赋予任何值的时候,它就是Undefined类型。

(2)Null类型

null类型的变量只能被赋值为null。代表引用类型为空。

(3)Number类型

在TypeScript中,所有的数字都是Number类型,没有整数和小数之分。

***特殊的Number类型

 1)NaN:不是数值
 2)Infinity:正无穷大
 3)-Infinity:负无穷大

(4)string类型

由单引号或双引号括起来的一串字符就是字符串。

(5)boolean类型

(6)enum:枚举类型

枚举类型用于取值被限定在一定范围内的场景,比如一周只能有七天,颜色限定为红绿蓝等。

例:
枚举例子
编译为js如下所示:
枚举例子
(7)any类型

1)普通类型在赋值过程中是不被允许改变类型的;而any类型则允许被赋值为任意类型。

如:let myNumber:any=‘seven’;
myNumber=7;
2)在任意值上访问任何属性都是允许的,也可以调用任何方法。
3)声明一个变量为任意值之后,对它的任何操作,返回的内容都是任意值。
4)变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型。

三、TypeScript的函数

1、定义函数

(1)声明(定义)函数必须加function关键字
(2)函数吗与变量名一样,命名规则按照标识符规则
(3)函数参数可有可无,多个参数之间用逗号隔开
(4)每个参数由参数名称与类型组成,用分号隔开
(5)函数的返回值可有可无,没有时,返回类型为void
(6)函数体写在大括号中

例:
函数例子
运行结果

2、有剩余参数的函数

剩余参数就是形参是一个数组,传递几个实参过来都可以直接存在形参的数组中。

函数例子
对应的js
运行结果
3、函数的三种定义方式

(1)函数声明法

使用function关键字和函数名去定义一个函数

function add(n1:number,n2:number):number{
return n1+n2;
}

(2)函数表达式法

就是将一个函数赋值给一个变量,这个变量名就是函数名。这种方式定义的函数,必须在定义之后,调用函数。

var add=function(n1:number,n2:number):number{
return n1+n2;
}
console.log(add(1,4));

(3)箭头函数

箭头函数定义的函数一般都用于回掉函数中

var add=(n1:number,n2:number):number=>{
return n1+n2;
}
console.log(add(1,4));

4、函数中变量的作用域

每个变量都有一个起作用的范围,这个范围就是变量的作用域。

(1)全局变量和局部变量

局部变量就是函数体内定义的变量;全局变量时函数体外定义的变量。

(2)let关键字变量的作用域

使用let关键字的变量就是一个块级作用域变量。

let关键字

5、引用类型

TypeScript中的数据分为值类型和引用类型。

TypeScript中指定数据类型的数组只能存储同一类型的数组元素。

(1)数组
1)声明数组的方法
let arr1:number[]; //声明一个数值类型的数组
let arr2:Array <string>; //声明一个字符串类型的数组
2)赋值法
a. 字面量赋值法
let arr1:number[]=[];
let arr2:number[]=[1,2,3,4];
b. 构造函数赋值法
let arr1:number[]=new Array();
let arr2:number[]=new Array(1,2,3,4);
3)元组
数组合并了相同类型的对象,而元组合并了不同类型的对象。
例:声明一个元组:let x:[string,number];

(2)字符串
基本类型字符串:由单引号或双引号括起来的一串字符串
引用类型字符串:用new实例化的string类型
例:
字符串例子
运行结果

1)查找字符串
str.indexOf(subStr);
2)截取字符串
str.substring(startIndex,[endIndex]);
3)替换字符串
str.replace(subStr,newStr);

(3)日期对象

日期对象是Date的实例,可以使用构造函数的方法进行创建。并且构造函数中可以传递多种类型的参数。

(4)正则表达式

(1)构造函数法

let reg:RegExp=new RegExp(“chen”);

(2)字面量法

let reg:RegExp=/chen/;

(3)常用方法
1)test(string):在字符串中查找是否存在指定的正则表达式并返回布尔值

2)exec(string):用于在字符串中查找指定的正则表达式,若查找成功则返回相关信息;否则返回null。
例子
运行结果

6、面向对象编程

(1)类的声明与使用

例子:
例子

对应的js
运行结果
(2)修饰符

1)public:公有修饰符,可以在类内或者类外使用public修饰的属性或者行为,默认修饰符。

2)protected:受保护的修饰符,可以在本类和子类中使用protected修饰的属性和行为。

3)private:私有修饰符,只可以在类内使用private修饰的属性和行为。

4)只读修饰符:使用readonly修饰符将属性设置为只读,只读属性必须在声明时或者构造函数里被初始化。

(3)继承和重写

继承:允许我们创建一个类(子类),从已有的类(父类)上继承所有的属性和方法,子类可以新建父类中没有的属性和方法。

extends关键字时继承的重点

重写:即在子类中重写父类的方法。

通过关键字super调用父类的方法

(4)接口

在通常情况下,接口是用来定义一些规范,使用这些接口,就必须按照接口中的规范来走。

定义接口的关键字是interface

(5)命名空间

命名空间又称为内部模块被用于组织有些具体内在联系的特性和对象

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值