TypeScript知识梳理

342 阅读3分钟

一.TS环境安装及测试安装

①:安装node.js及npm

官网下载直接安装即可, 使用 node -v 和npm -v 查看是否安装成功,显示相关版本号代表安装成功。

②: 安装 TS

命令:npm install -g typescript

检测安装: 命令行输入 tsc -v 显示版本号代表安装成功

二.TS基本使用及vscode自动编译设置

1:基本使用

①:新建1.ts文件

let aa : String='牛志坤';​alert(aa);

②:在终端命令行运行ts文件

命令 :tsc 文件路径

执行后会生成相应的js文件

2:设置vscode自动编译

①:在根目录下使用 tsc --init 命令 生成 tsconfig.json 文件

②:在json文件中取消 outDir 注释,并设置保存的文件夹路径名称

③:选择vscode 的顶部 终端 -> 运行任务 -> tsc 监视

三:TS变量声明

ts中的变量声明格式 :

let / const /var 变量名: 数据类型 = 变量值 简写 let 变量名 =变量值

联合类型 let 变量名: 数据类型1| 数据类型2|...=变量值

变量数据类型指定后不可变更,会报错

字符串 : let str: string = ‘str’/ “str”/ ·str·;

布尔值: let bool: boolean = true / false;

注意:TS中的布尔值不能使用0/1代表true和false

数值: let num:number = 1;

null : let nul:null = null;

undefined : let nud:undefined =undefined;

数组: 方式一 : let arr: 元素数据类型[] = [指定数据类型的元素,......]

方式二: let arr: Array<元素数据类型> = [指定数据类型的元素,......]

元组:指定元素数据类型和数量的数组,因为ts中的数组不能包含不同类型的元素,可采用元组代替

let arr:[string,number,number] = ['123',14,32]

定义元组数据时,须按指定的元素数据类型及数量一一对应

访问元组数据同数组一致

enum:枚举 可理解为js中的对象,声明方式为对象的字面量声明

方式一: enum 枚举名称{ 枚举项= 枚举值,.......} 枚举项为字母和数字 枚举值为整型数字

方式二: enum 枚举名称{ 枚举项,.......} 枚举项默认生成对应的枚举值,为该项下标,从0开始

any :代表不能确定获取的数据的数据类型 ,常见于dom获取

let a: any =document.getElementById('id');

viod: 用于定义无返回值的方法

function alerts(): void { alert("Hello ts");}

function getNum(): number{ return 1;}

四 函数

函数声明

带参数: function 函数名(形参1:类型 ,....) : 返回值类型{} 实参与形参数量类型要一致

不带参数: function 函数名() :返回值类型{}

调用 函数名(实参) 函数名()

可选参数 function 函数名(形参1 ? : 类型 ,....) : 返回值类型{}

调用 有参数 :函数名(实参) 无参数 :函数名()

默认值 function 函数名(形参1 :类型 = 默认值 ,....) : 返回值类型{}

剩余参数 参数不固定时使用 function 函数名(形参1 :类型, ...形参2:类型[] ) : 返回值类型{}

五 类

class 类名{

// 字段

变量名:类型; .....

// 构造函数

constructor(变量名:类型,....) {

this.变量名= 变量名;....

}

// 方法 disp():void {

do something.....

}

}