1.为什么类型声明总是需要被使用?

        顾名思义,能在Typescript的名字中就体现出来,Typescript中重要的一点就是在JavaScript的基础上对于基本类型扩展了相关的限制语法。

        JavaScript对于类型并不做过多的限制。甚至对于编程者来说,JavaScript太过自由,见如下JavaScript代码:

function num (a,b){
        return a + b;
 };
 console.log(num(123,456).length); // undefined
 console.log(num(123,true)); // 124

        以上代码,对于函数 “num” 来说,两个参数并未声明类型,即任何类型参数都可以赋值给形参a,b;而调用函数输入不同类型的参数后,编程者往往控制不了函数的调用结果,而这在代码的开发阶段往往是较为不便的。只有在代码提交后在浏览器层面才能观察到结果是否在编码者的控制范围之内,在代码编写阶段是不报任何错误的。

        这种情况在如上等简单的代码中可能并不能体现出JavaScript的缺陷,但诸位细想,若代码工程扩张到几千行甚至几万行代码时,代码的调试开发就会出现大麻烦。而这种麻烦不仅限于函数的形参以及返回值的类型未声明。

        放在变量的使用上,也更是一个隐患。

“如果你愿意限制做事方式的灵活度,你几乎总会发现可以做的更好”
                                                -----John Carmark

        作为制作出《Doom》《Quake》这样游戏的杰出开发者,John Carmark这句话道出了软件开发的真谛。

        在计算机编程的世界里,完成任何一件任务,可能都有一百种以上的方法,但是无节制的灵活度反而让软件难以维护,而增加一定的限制是提高软件质量的法门。这也是目前前端开发中各种框架盛行的原因。

        Typescript中的类型声明以及其他限制,对于以往习惯于JavaScript开发的编程者来说,在开发过程中确实会让人不习惯,但在将来的维护以及使用中,您会发现Typescript愈发的顺眼。

2.类型声明

(1)变量

   语法:

let 变量名 : 类型;
  • 声明一个变量,同时指定它的类型,后赋值。
let a : number;
a = 123; // 正常赋值,不报错
a = "hello" // 赋值报错

声明一个变量a,并声明其类型为number类型,对变量a赋值为123时,可正常进行赋值,但将字符串“hello”赋值予变量a时,ts编译器会进行语法检查并报错

typescript声明变量 typescript type声明_前端

  • 声明一个变量,不指定类型,只进行赋值。
let a = 10;
a = 22;
a = 'number'; // 此行代码报错,不能将一个‘string’分配给类型‘number’

当变量的声明和赋值同时进行,但没有明确的指定类型,那么TypeScript会依照类型推论(Type Inference)的规则推断出一个类型。(VScode将光标悬浮于变量上时,会提示当前变量的类型)

typescript声明变量 typescript type声明_javascript_02

 故:let a : boolean = true; 等同于 let a = true; 

  • 如果定义的时候没有赋值且没有声明类型,不管之后有没有赋值,都会被推断成 any 类型

而“any”类型完全不进行类型检测,可以被任何类型赋值

let a;
a = 22;
a = "number";
a = true;

(2)函数参数

语法:

function 函数名(参数1: 类型, 参数2: 类型){
    //函数内容
}

Javascript中的函数是不会考虑参数的个数以及类型的,如

function num(a,b){
    return a + b;
}
console.log(num(123)); // NaN
console.log(num(123,"456")); // 123456

        代码在开发编码阶段是不能知道调用时的错误的,而当函数定义与调用都是同一编码者时,这种问题或许也不是很大,但若在开发过程中由多人合作,函数由一个创建定义,当另一个人调用该函数时,根据调用的输出是不能明确的知道函数的参数要求的。

        而调用者去查看定义者定义的函数,这无疑是一种浪费。所以需要对函数的参数进行类型声明:

function num (a:number,b:number){
    return a + b;
};
console.log(num(123)); // 报错
console.log(num(123,"456")); // 报错

console.log(num(123));此行报错

TS对于调用函数时参数的个数进行了限制,并且由于我们在定义函数时添加了参数类型声明,所以第二次调用num函数也有一个报错。

typescript声明变量 typescript type声明_typescript_03

使用Typescript的类型声明时,对于上文提到的JavaScript未限制参数的个数以及类型进行了补充

(3)函数返回值

语法:

function 函数名(参数1, 参数2,...): 类型{
    // 函数内容
}

类型声明还可以限定函数的返回值类型,在参数()后进行定义。对于以上语法举例:

function num (a,b): number{
     // return a + b; // 不报错,正常返回
     return a + 'hello'; // 报错
 };
 console.log(num(123,456));
 let  result = num(123,456); // 此时鼠标悬停之后,显示result的类型为number

返回值报错

typescript声明变量 typescript type声明_typescript声明变量_04

下一节: 三、(1)Typescript的基本类型---顶层类型及底层类型