TypeScript快速上手学习笔记-第三篇——类型声明

前言

我们知道JS的变量等的类型是动态，这在一定程度上使我们的开发过程变得十分不方便。而TS一个主要的作用就是解决JS动态类型的问题，让js数据类型变得固定，这就是TS的类型声明，主要应用在变量和函数部分。

一、变量的类型

首先我们写下如下的代码：

//声明一个变量a,同时指定它的类型为number
let a:number;
//因为a的类型为number,那么给a赋值只能为数字
a=10;
a=30;
//此时赋值为字符串会报错,但是因为符合js要求则暂时会编译成功
a='1';//报错

通过tsc xxx.ts编译生成对应的js

//声明一个变量a,同时指定它的类型为number
var a;
//因为a的类型为number,那么给a赋值只能为数字
a = 10;
a = 30;
//此时赋值为字符串会报错,但是因为符合js要求则暂时会编译成功
a='1';//在js中不报错

以上，我们会发现
1、TS中变量采用let声明，编译产生的JS中变量声明变成var，为什么？
因为默认TS编译的JS是采用ES3标准，但由于TS引入了很多配置可以编译成不同时期的JS，大大提高了代码兼容性，后续学习会进行配置，目前博主还未接触。
2、即使TS存在错误它还是可以成功编译成JS，为什么？
因为TS中报出的错误在JS中是正确的，后续我们会进行配置，让它出现错误不进行编译。




变量声明的几种方式：
1-声明和赋值分离

//声明变量但不进行赋值
let c : boolean;
c = true;
c= 123;//报错

2-变量和赋值同时进行——完整版，便于理解

//声明变量并直接进行赋值
let c : boolean = false;
c = true;
c= 123;//报错

3-变量和赋值同时进行——简洁版，个人推荐，和java声明十分相似

//声明变量并直接进行赋值
let c = false;
//如果声明变量并直接赋值是同时进行的，TS可以自动对变量进行类型检测
c = true;
c= 123;//报错

二、函数的类型

函数的类型分为函数返回值类型和函数参数类型

//JS函数是不考虑参数的类型和个数的
function sum(a,b) {
  console.log(a+b)
}
sum(1,2)
sum(1,"2")//不报错

//JS函数是不考虑参数的类型和个数的
function sum(a:number,b:number) {
  console.log(a+b)
}
sum(1,2)
sum(1,"2")//报错

有返回值的函数完整代码：
这是一个需要两个整形参数，并且返回值为整形的函数。

function sum(a:number,b:number):number {
  return a+b
}
console.log(1,2);

拓展——解决函数参数个数未知的问题（ES6语法）
1） arguments方法

//arguments方法
function add() {//arguments是一个伪数组不能用foreach遍历
    let resp = 0;
    console.log(arguments);
    for (let i = 0; i < arguments.length; i++) {
        resp += arguments[i];
    }
    console.log(resp);
}
add(1, 2);
add(2, 3, 4, 5);
add(3, 4, 5, 6, 7, 8);

2） rest参数

//rest参数
//ES6引入rest参数(形如...values,这里的values是数组)，用于获取函数剩余的多个参数
function add2(...values) {//arguments是一个伪数组不能用foreach遍历
    let resp = 0;
    console.log(values);
    values.forEach(function (item) {
        resp+=item;
    })
    /*for (let val of values) {
        resp += val;
    }*/
    console.log(resp);
}
add2(1, 2);
add2(2, 3, 4, 5);
add2(3, 4, 5, 6, 7, 8);