[TypeScript]Day01—初识TypeScript、TypeScript基础语法、变量和数据类型

一、初识TypeScript

1.1 JavaScript

• JavaScript 是 Web 的编程语言，JavaScript与HTML、CSS共同构建基础的web网页
• JavaScript可以运行在浏览器和Node.js，可以实现服务端/桌面端编程。
• 还可以写微信小程序、微信小游戏等

1.2 TypeScript

TypeScript是微软开发的开源编程语言，设计目标是开发大型应用。可以在任何浏览器、任何计算机、任何操作系统上运行。

1.3 JavaScript与TypeScript的关系

• TypeScript（简称：TS）是JavaScript的超集（JS有的TS都有）
• TypeScript = Type + JavaScript（为JS添加了类型系统）
  

1.4 TypeScript相比JS的优势

• JS的类型系统存在"先天缺陷"，绝大部分错误都是类型错误（Uncaught TypeError）
• 类型化思维方式，使得开发更严谨，提前发现错误，减少改Bug时间
• 类型系统提高了代码可读性，并使维护和重构代码更容易
• 补充了接口、枚举等开发大型应用是JS缺失的功能。
• Vue3源码使用了TS重写，释放出重要的信号：TS是趋势。

二、开发准备

2.1 环境安装

1、安装vscode ，安装中文汉化插件

2、安装Node.js，验证是否安装成功

Node.js安装教程

3、安装解析TS的工具包

由于Node.js/浏览器只认识JS代码，需要将TS转换为JS，然后才能在Node.js/浏览器中运行。

• 全局安装 npm install typescript -g
  

4、VsCode调试TS文件

1、点击小虫子debug，添加配置

2.打断点运行，进行调试

launch.json

{
    // 使用 IntelliSense 了解相关属性。
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "调试TS代码",
            // ts-node命令，直接运行ts代码
            "runtimeArgs": ["-r","ts-node/register"],
            // 要调试的ts文件 *.ts
            "args": [
               // "${workspaceFolder}/**/*.ts"  
               "${workspaceFolder}//Day01/语句.ts"
            ]
        }
    ]
}

三、第一个TS文件

3.1 步骤

1. 创建ts文件

新建一个文件夹code，在文件夹中新建hello.ts

2. hello.ts 写入下面代码

3. 执行代码

• 生成package.json

npm init

• 生成tsconfig.json

tsc --init

• 执行命令，将TS转换成JS(生成一个hello.js文件)

tsc hello.ts

• 执行命令，用node执行JS中的代码(执行hello.js)

node hello.js

3.2 简化执行TS的步骤

1. 安装 ts-node

2. 执行 ts-node 命令

使用ts-node包，在Node.js中直接执行TS代码

1. 全局安装： npm i -g ts-node
2. 使用方式： ts-node hello.ts

ts-node包内部会把TS转换为JS，然后用命令ts-code 文件名 执行TS 代码

现在只需一步：ts-node hello.ts，类似node中的 nodemon 工具

四、TS 基本语法

4.1 注释

1. 单行注释

//   快捷键  ctr+/

2. 多行注释

/*  
   快捷键  shift+alt+a 
   可以注释多行
*/

4.2 输出语句

可在终端输出

console.log('hello TS')

五、TS 变量和数据类型

5.1 变量

变量是数据的容器，可以给变量赋值想要的数据

 var [变量名] : [类型注解] = 值

5.2 变量的使用

第一种 ：先声明后赋值

//声明变量并指定类型
let age:number;

// 给变量赋值
age = 15 
console.log(age)

• 用let关键字声明了一个变量age
• :number 为数值类型
• 注意：分号是可选的，可省略。

第二种：声明的同时并赋值

• 声明变量的同时给变量赋值（变量初始化）

let age: number =15

5.3 类型注解

类型注解：为变量添加类型约束的方式，不能随便赋值，要按照类型赋值，不然会报错

5.4 变量的命名规则

• 变量名称只能出现 ：数字、字母、下划线（_）、美元符号（$），并不能以数字开头
• 区分大小写，推荐使用驼峰命名法（首字母小写，后面每个单词首字母大写）
• 变量名称 要 顾名思义

let age：number = 18 

5.5 交换变量小练习

交换变量：将 num1 和 num2 的值交换

// demo.ts

let num1:number=23

let num2:number=18

console.log(num1,num2)

let temp:number

temp=num1;
num1=num2;
num2=temp;

console.log(num1,num2)

5.6 变量作用域

变量作用域：指定了变量定义的位置，变量的可用性由变量作用域决定。

TypeScript 有以下几种作用域：

• 全局作用域 − 全局变量定义在程序结构的外部，它可以在你代码的任何位置使用。

• 类作用域 −该变量也称为 字段。类变量声明在一个类里头，但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的，静态的变量可以通过类名直接访问。

• 局部作用域 − 局部变量，局部变量只能在声明它的一个代码块（如：方法）中使用。

以下实例说明了三种作用域的使用：

var global_num = 12          // 全局变量
class Numbers { 
   num_val = 13;             // 实例变量
   static sval = 10;         // 静态变量
   
   storeNum():void { 
      var local_num = 14;    // 局部变量
   } 
} 
console.log("全局变量为: "+global_num)  
console.log(Numbers.sval)   // 静态变量
var obj = new Numbers(); 
console.log("实例变量: "+obj.num_val)

5.7 数据类型

TypeScript 数据类型分为

1. 基本数据类型（值类型） （number / string / boolean / undefined / null）
2. 复杂数据类型（引用类型） （Array、Object 、Date、RegExp、Function）

1. number 数字类型

数字类型：包含整数值、浮点型（小数）值

let age:number  =  18

let ascore:number  =  99.9

2. string 字符串类型

基本类型字符串：由单引号或者双引号括起来的一串字符串。
引用类型字符串：用 new 实例化的 String类型

字符串类型：可以用 '' 或者 ""

let msg:string  = 'hello'
let jspanga:String = new String("typescript.com")

3. boolean 布尔类型

布尔类型：值为真true 或假false

let isNull:boolean = true
let isLearning:boolean = false

4. undefined 、null

undefined / null 只有一个值，值为类型本身

• undefined类型的值为：undefined ,表示声明但未赋值的变量值（找不到值）
• null 类型的值为：null ,表示声明变量并已赋值，值为null(能找到，值为

let u:undefined = undefined
let n:null = null

5. enum 枚举类型

enum 枚举类型：用于定义数值集合。
当变量的值，只能是固定值中的一个，使用枚举来实现。比如一周只能有七天，颜色限定为红绿蓝等。

枚举项有两种类型：常数项（constant member）和计算所得项（computed member）。

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 输出 2

• 如果未赋值的上一个值是数字，那么这个未赋值的值的是上一个值的值+1
• 如果未赋值的上一个值未赋值，那么输出的就是它的下标
• 如果未赋值的上一个值的值是非数字,那么必须赋值

enum error {
  blue = 3,
  "orange",
}
const f: error = error.orange;
console.log(f); //输出 4 

常数项

enum Color {Red, Green, Blue}; 
enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

计算所得项

"blue".length 就是一个计算所得项

enum Color {Red, Green, Blue = "blue".length};

如果在计算所得项之后，是未手动赋值的项，那么它就会因为无法获得初始值而报错：

enum Color {Red = "red".length, Green, Blue};

// index.ts(1,33): error TS1061: Enum member must have initializer.
// index.ts(1,40): error TS1061: Enum member must have initializer.

常数枚举

常数枚举是使用 const enum 定义的枚举类型：

const enum Directions {
    Up,
    Down,
    Left,
    Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

常数枚举与普通枚举的区别是，它会在编译阶段被删除，并且不能包含计算成员。
假如包含了计算成员，则会在编译阶段报错：

const enum Color {Red, Green, Blue = "blue".length};

// index.ts(1,38): error TS2474: In 'const' enum declarations member initializer must be constant expression.

外部枚举

外部枚举（Ambient Enums）是使用 declare enum 定义的枚举类型：

declare enum Directions {
    Up,
    Down,
    Left,
    Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

之前提到过，declare 定义的类型只会用于编译时的检查，编译结果中会被删除。

上例的编译结果是：

var directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

外部枚举与声明语句一样，常出现在声明文件中。

同时使用 declare 和 const 也是可以的：

declare const enum Directions {
    Up,
    Down,
    Left,
    Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

编译结果：

var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

6. void 标识方法返回值的类型

void：用于标识方法返回值的类型，表示该方法没有返回值。

function hello():void{
	alert('no return')
}

7. any 任意类型

any：声明为 any 的变量可以赋予任意类型的值

let x: any = 1;    // 数字类型
x = 'I am who I am';    // 字符串类型
x = false;    // 布尔类型 

定义存储各种类型数据的数组时，示例代码如下：

let arrayList: any[] = [1, false, 'fine'];
arrayList[1] = 100;

8. 数组类型

数组：存放多个数据类型的集合，string[]为数组的类型注解

//数组赋值
let names:string[]=['易烊千玺','王一博','刘亦菲'] 
console.log(names)

创建数组

第一种：

let fruit:string[]=[]  // 空数组

第二种：

let fruit:Array<number>

数组赋值

字面量赋值法

//定义一个数组时，直接给数组赋值
let arr1:number[] = [1,2,3,4,5]
let arr2:Array<boolean> = [ true,false,false] 

构造函数赋值法

//使用构造函数来进行赋值 
let ara1:number[] = new Array(1,2,3,4,5) 
let arr2:Array<boolean> = new Array(true,false,false)

数组长度

let fruit:string[]=['西瓜','草莓','葡萄']   

//数组长度
console.log(fruit.length) 

//数组取值
console.log(fruit[0])  //西瓜

9. 元组类型

元组类型：用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象

let x: [string, number];

x = [1, 'Runoob'];    // 报错
x = ['Runoob', 1];    // 运行正常
console.log(x[0]);    // 输出 Runoob

x.push('huahua');
console.log(x[0]);  // 输出 [ 'Runoob', 1, 'huahua' ]

10. 其他类型 never

never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

5.8 联合类型

联合类型：将变量设置为多种类型，赋值时可以根据设置的类型来赋值

let valu:string|number
valu='hello ts'
consoloe.log(valu)  //valu 为string 类型

valu=1
consoloe.log(valu) //valu 为number类型

1. 联合类型参数

可以将联合类型作为函数参数使用

function disp(fruit:string|string[]) { 
   if(typeof fruit== "string") { 
       console.log(fruit) 
    } else { 
       var i; 
       for(i = 0;i<fruit.length;i++) { 
       	console.log(fruit[i])
       } 
    } 
} 
disp("Google")
disp(["Google","Taobao","Facebook"])

2. 联合类型数组

将数组声明为联合类型

var arr:number[]|string[]; 
var i:number; 
arr = [1,2,4] //数字数组
 
for(i = 0;i<arr.length;i++) { 
   console.log(arr[i]) 
}   
arr = ["Runoob","Google","Taobao"] //字符串数组  
for(i = 0;i<arr.length;i++) { 
   console.log(arr[i]) 
}

3. 类型别名

类型别名：常用于联合类型，使用 type 创建类型别名。

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;

function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

4. 字符串字面量类型

字符串字面量类型：用来约束取值只能是某几个字符串中的一个。

type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
    // do something
}

handleEvent(document.getElementById('hello'), 'scroll');  // 没问题
handleEvent(document.getElementById('world'), 'dblclick'); // 报错，event 不能为 'dblclick'

// index.ts(7,47): error TS2345: Argument of type '"dblclick"' is not assignable to parameter of type 'EventNames'.

使用 type 定了一个字符串字面量类型 EventNames，它只能取三种字符串中的一种。 注意，类型别名与字符串字面量类型都是使用 type 进行定义。

六、TS 运算符

6.1 运算符概述

运算符：也称之操作符，用来实现赋值、算术运算、比较等功能的符号

常用运算符：

• 算术运算符
• 赋值运算符
• 递增、递减运算符
• 比较运算符
• 逻辑运算符

6.2 算术运算符

算术运算符用于两个数值之间的计算，包括加、 减、乘、除

console.log(1+2)  //加
console.log(3-1)  //减
console.log(4*5)  //乘
console.log(8/2)  //除

加号还能用于字符串拼接

console.log('hello,'+'TS')  // 'hello,TS' 
console.log(5+'TS')  // '5TS'

注意： 除加号外，其他算术运算符只能与number类型使用

console.log(2- +'1') //结果为1

+'1' 表示 把string转换为number

6.3 赋值运算符

赋值运算符：将等号右边的值赋值给左边的变量，比如：等号（=）

let age:number = 18
age=age+1
age+=1

6.4 递增、递减运算符

自增++是+=1的简化写法、自减--是-=1的简化写法

age++  //age+=1
age--  //age-=1

++或--只能让变量的值增加或减少1

6.5 比较运算符

比较运算符：用于比较两个数据的值，并返回其比较的结果，结果为布尔类型

比较运算符包括

• 大于（>）
• 大于等于（>）
• 小于（<）
• 小于等于（<=）
• 等于（===）
• 不等于（!==）

console.log(1>2) //false
console.log(3>=2) //true
console.log(1<2) //true
console.log(3<=2) //false
console.log(1===2) //false
console.log(1!==2) //true

6.6 逻辑运算符

逻辑运算符：用于布尔类型的计算，结果也是布尔类型。

逻辑运算符包括

• 与（&&） true&&true //true
• 或（||）， true||true ，true||false ，false ||true //都为true
• 非（!），!false //true，!true //false，取反

6.7 类型运算符

typeof

typeof 是一元运算符，返回操作数的数据类型。

var num = 12 
console.log(typeof num);   //输出结果: number

instanceof

instanceof 运算符用于判断对象是否为指定的类型，返回布尔类型

let a:any={}  
console.log(a instanceof Object)  //true

七、TS 语句

7.1 条件语句

条件语句：根据判断结果，执行不同代码，从而实现不同功能

1. if-else 条件判断

if(){  }else{ }

2. 三元运算符

let  res:string =5>3?'大于':'小于'

3. switch 语句

一个 switch 语句允许测试一个变量等于多个值时的情况。

switch(a){
    case 1:
        console.log('a 为1')
        break
    case 2:
        console.log('a 为2')
        break
    default : /* 可选的 */
        console.log('a 为undefined')
}

default case 可用于在上面所有 case 都不为真时执行一个任务。default case 中的 break 语句不是必需的。

7.2 循环语句

循环语句：用于重复某个操作，提高效率

1. for 循环

for 循环： for(初始化语句;判断条件;计数器更新){循环体}

for (let i = 1; i < 4; i++) {
     console.log('做作业'+i+'遍')
}

2. break 终止循环

break ：提前结束循环

for (let i = 1; i < 4; i++) {
    // 要求第二个停止
    if(i===2 ){
        break
    }
    console.log('吃包子，第'+i+'个')
}

3. continue 跳过本次循环

continue：让循环间断执行（跳过本次循环，继续下一次）

 
for (let i = 1; i < 4; i++) {

    // 要求第二个跳过
    if(i===2 ){
        continue
    }
    console.log('吃包子，第'+i+'个')
}

4. for…in 循环

for…in 语句用于一组值的集合或列表进行迭代输出。

var j:any; 
var n:any = "a b c" 
 
for(j in n) {
    console.log(n[j])  
}

5. for…of 循环

let someArray = [1, "string", false];
 
for (let entry of someArray) {
    console.log(entry); // 1, "string", false
}

此外，TypeScript 还支持 forEach、every 和 some循环。

6. while 循环

while 语句在给定条件为 true 时，重复执行语句或语句组。循环主体执行之前会先测试条件。

while(condition) {
   ...
}

condition 可以是任意的表达式，当条件为 true 时执行循环。 当条件为 false 时，程序流将退出循环。

7. do…while 循环

不像 for 和 while 循环，它们是在循环头部测试循环条件。do…while 循环是在循环的尾部检查它的条件。

do{
   statement(s);
}while( condition );

请注意，条件表达式出现在循环的尾部，所以循环中的 statement(s) 会在条件被测试之前至少执行一次。

如果条件为 true，控制流会跳转回上面的 do，然后重新执行循环中的 statement(s)。这个过程会不断重复，直到给定条件变为 false 为止。