TypeScript语法-----入门

一、简介

TypeScript 是 JavaScript 的一个超集，由微软开发的自由和开源的编程语言，可在任何浏览器计算机系统上运行，支持 ECMAScript 6 标准。

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

二、环境安装

1、第一种：node.js和npm安装

通过npm全局安装TypeScript：

npm install -g typescript

检验是否安装成功：（tsc负责将 ts 代码转为 浏览器 和 nodejs 识别的js代码，会打印出版本号）

tsc -v

2、第二种：Visual Studio安装

三、TS的运行

手动编译

1、在后缀为 .ts 的文件中书写ts代码；

2、使用 tsc命令 将 ts 代码编译成 js 代码(可以同时编译多个ts文件)，编译成功后在 .ts 文件上会出现同名 .js 文件

tec 文件名.ts

3、在浏览器或者 nodejs 中执行 js 代码。

自动编译（设置vscode自动编译）

1、运行 tsc --init ，创建 tsconfig.json 配置文件；

2、修改 tsconfig.json 文件，设置 js 文件夹："outDir":"./js/"

3、设置 vscode 监视任务：菜单栏--终端--运行任务--选择tsc：监视。。。。

4、编写 ts 代码结束后回车，会自动把编译好的 js 文件放入 js 文件夹中。

四、注意事项

1、空白和换行

TypeScript 会忽略程序中出现的空格、制表符和换行符。空格、制表符通常用来缩进代码，使代码易于阅读和理解。

2、TypeScript 区分大小写

3、分号是可选的

每行指令都是一段语句，你可以使用分号或不使用， 分号在 TypeScript 中是可选的，建议使用。

如果语句写在同一行则一定需要使用分号来分隔，否则会报错。

4、注释

注释可以包含有关程序一些信息，如代码的作者，有关函数的说明等。

TypeScript 支持两种类型的注释：

     单行注释 ( // ) 、多行注释 (/* */) 

5、TypeScript 与面向对象

面向对象是一种对现实世界理解和抽象的方法。TypeScript 是一种面向对象的编程语言。

五、TypeScript 变量声明

1、在ts中，变量声明要为其指定类型，要给这个变量设置这个类型的值

 

var 变量名 : 类型 = 值;

 

2、类型推断

如果变量的声明和初始化是在同一行，可以省略掉变量类型的声明，TS会根据变量的值推断出变量的类型，并且在对变量赋值时，类型不可以改变。

六、TS基础类型

      1、 TypeScript 包含的数据类型如下表：

数据类型	关键字	描述
任意类型	any	声明为 any 的变量可以赋予任意类型的值，一般在获取dom时使用
数字类型	number	双精度 64 位浮点值。它可以用来表示整数和分数。 let binaryLiteral: number = 0b1010; // 二进制 let octalLiteral: number = 0o744; // 八进制 let decLiteral: number = 6; // 十进制 let hexLiteral: number = 0xf00d; // 十六进制
字符串类型	string	一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。 let name: string = "Runoob"; let years: number = 5; let words: string = `您好，今年是 ${ name } 发布 ${ years + 1} 周年`;
布尔类型	boolean	表示逻辑值：true 和 false。let flag: boolean = true;
数组类型	无	声明变量为数组，需要声明时指定数组中的元素类型，元素类型固定，长度不限制 // 在元素类型后面加上[]--- let 数组名：类型[] = [值1，值2] let arr: number[] = [1, 2]; // 或者使用数组泛型----- let 数组名：Array<类型> = [值1，值2] let arr: Array<number> = [1, 2];
元组	无	元组类型是一个规定了元素个数和每个元素类型的数组，各元素的类型不必相同，但对应位置的类型需要相同，数量也要相同let x: [string, number];//第一个元素类型必须是string，第二个元素类型必须是number x = ['Runoob', 1]; // 运行正常 x = [1, 'Runoob']; // 报错 console.log(x[0]); // 输出 Runoob
枚举	enum	枚举类型用于定义数值集合，枚举项一般用英文和数字，枚举值用整型数字。 可以使用默认枚举值（从0开始），就可以省略枚举值了 enum 枚举名 {         枚举项1 = 枚举值1，         枚举项2 = 枚举值2，         ...... } enum Color {Red, Green, Blue}; let c: Color = Color.Blue; console.log(c); // 输出 2
void	void	代表没有类型，一般用在无返回值的函数。用于标识方法返回值的类型，表示该方法没有返回值。 function hello(): void { alert("Hello Runoob"); }
null	null	表示对象值缺失。
undefined	undefined	用于初始化变量为一个未定义的值
never	never	never 是其它类型（包括 null 和 undefined）的子类型，代表不存在的值 的类型，常用在作为抛出异常或无限循环的函数返回类型。 never类型是ts中的底部类型，所有类型都是never类型的父类，所以never类型值可以赋给任意类型好的变量。

2、联合类型

表示取值可以为多种类型中的一种

let  变量名：变量类型1 | 变量类型2 = 值；

七、函数

1、返回值

函数有返回值时，定义函数时要指定返回值类型（没有返回值则定义为void）

 

function 函数名():返回值类型 { 
    // 语句
    return value; 
}

 let 变量名：变量类型=函数名（）

2、参数 

实参形参类型要一致，数量也要一致

function 函数名( 形参1：类型，形参2：类型) ：返回值类型{   
}

 let 变量名：变量类型=函数名（实参1，实参2）

3、可选参数

可选参数的实参可传可不传，调用时可传可不传（数量必须一致），可选参数必须跟在必需参数后面。

 

function 函数名( 形参 ？：类型) ：返回值类型{
 }

函数名（）；/      函数名（实参值）；

4、默认值(完全可以替代可选参数)

可以设置参数的默认值，这样在调用函数的时候，如果不传入该参数的值，则使用默认参数

注：参数不能同时设置为可选和默认，带默认值的参数本身也是可选参数

 

function 函数名(形参1：类型=默认值1，形参2：类型=默认值2)：返回值类型 { 
}

调用：

不传递实参：函数名（）；

传1个实参：函数名（实参1）；

传2个实参：函数名（实参1，实参2）；

只传第二个实参：函数名（undefined，实参2）；

5、剩余参数（不确定的参数，只能定义一个，定义在形参列表最后)

指定类型的数组：   ...形参3：类型[ ]

八、类

封装、继承、多态