乐趣区

关于typescript:typescript的必要性及使用-京东云技术团队

jiezi

1 前言

作为一个前端语言，Javascript 从最后只是用来写页面，到现在的挪动终端、后端服务、神经网络等等，它变得简直无处不在。如此广大的应用领域，对语言的安全性、健壮性以及可维护性都有了更高的要求。只管 ECMAScript 规范在近几年有了长足的提高，然而在类型查看方面仍然毫无建树。在这种状况下 TypeScript 应运而生。

2 为什么要应用 TypeScript

在 JavaScript 的开发过程中，置信常常会遇到以下这种场景：

  1. 场景一：你须要调用一个他人开发的函数 function funcName(paramA,paramB,paramC,paramD){…}，然而很可怜，这个家伙没有留下任何正文，为了弄清楚参数的类型，你不得不硬着头皮去读外面的逻辑；
  2. 场景二：为了保障代码的健壮性，你很负责任的对函数的每个输出参数进行了各种假如，导致函数内一多半代码都是对参数（类型、个数等）的判断逻辑；
  3. 场景三：老板很看好你，让你保护一个重要的底层类库，你殚精竭虑优化了一个参数类型，在提交代码前，不晓得有多少中央调用，你是否感到脊背发凉？
  4. 等等…

以上状况归纳底，是因为 JavaScript 是一门动静弱类型语言，对变量的类型十分宽容，而且不会在这些变量和它们的调用者间建设结构化的契约。如果你长期在没有类型束缚的环境下开发，就会造成“类型思维”的缺失，养成不良的编程习惯，这也是做前端开发的短板之一，因而应用 TypeScript 对于前端开发者而言是迫切并且必要的。

应用 TypeScript 还能带来其余益处。比方，Visual Studio Code 具备弱小的主动补全、导航和重构性能，这使得接口定义能够间接代替文档，同时也进步了开发效率，升高了保护老本。更重要的是，TypeScript 能够帮忙团队重塑“类型思维”，使前端开发者从代码的编写者变质为代码的设计者。

如果说 JavaScript 是一匹野马，那么 TypeScript 就是解放这匹野马的缰绳。作为骑士的你，天然能够张开双臂，放飞自我，但如果不是技能超群，恐怕会摔得很惨。然而如果抓住了缰绳，你即可闲庭信步，亦可策马扬鞭。这就是 TypeScript 的价值，它会让你在前端开发之路上走得更稳，走得更远。

3 什么是 TypeScript

什么是 TypeScript 呢？依据官网的定义，它是领有类型零碎的 JavaScript 的超集，能够编译成纯 JavaScript。在这里须要留神三点：

  1. 类型查看，TypeScript 会在编译阶段进行严格的动态类型查看，这意味着你在代码编写阶段就能发现一些谬误，而不用带到线上运行时能力发现；
  2. 语言扩大：TypeScript 会包含来自 ECMAScript 6 和将来提案中的个性，比方异步操作和装璜器，也会从其余语言借鉴某些个性，比方接口和抽象类；
  3. 工具属性：TypeScript 可能编译成规范的 JavaScript，能够在任何浏览器、操作系统上运行，无需任何运行时的额定开销，从这个角度上讲，TypeScript 更像是一个工具，而不是一门独立的语言

4 TypeScript 根底应用

4.1 根底类型

Ts 蕴含类型如下：

  1. 数字类型（number）：用来标识双精度 64 为浮点值，蕴含整数、浮点数等，没有独自的整型、浮点型；
  2. 字符串（string）：一个字符系列，应用单引号 (‘) 或双引号 (“) 来示意字符串类型。反引号(`）来定义多行文本和内嵌表达式；
  3. 布尔（boolean）：值只有 true 和 false；
  4. 数组：无关键字，申明变量：
let arr: number[] = [1, 3]  
let arr:Array<number> = [1,2]

5. 元组: 无关键字，元组类型用来示意已知元素个数和类型的数组，每个元素的类型不用雷同，然而对应地位的类型须要雷同；

let x: [string, number];
x = ['Runoob', 1];    // 运行失常
x = [1, 'Runoob'];    // 报错
console.log(x[0]);    // 输入 Runoob
x.push(33)
console.log(x[2]) // 报错
// 留神 x 能够持续 push 多个字段，然而无法访问

6. 枚举（enum）：枚举类型用于定义类型汇合

数字枚举：默认状况下，第一个枚举值是 0，而后每个后续值顺次递增 1，然而，你能够通过特定的赋值来扭转给任何枚举成员关联的数字，如下例子，咱们从 3 开始顺次递增

enum Color {
Red,  // 0
Green,  // 1
Blue // 2
};
let c: Color = Color.Blue;
console.log(c);    // 输入 2
console.log(Color[0]) // 输入 Red
enum Color1 {
Red = 3, // 3
Green, // 4
Blue // 5
}

7.void: 用于标识办法的返回值，示意没有返回值

8.null: 标识对象值缺失；

9.undefined：用于初始化变量为一个未定义的值

10.never：是其它类型（包含 null 和 undefined）的子类型，代表从不会呈现的值

11.Object：object 示意非原始类型，也就是除 number，string，boolean，symbol，null 或 undefined 之外的类型。

12.any：任意值是 TypeScript 针对编程时类型不明确的变量应用的一种数据类型；（留神：不要轻易应用 any，应用 any 跟应用 javascript 成果一样了）

它罕用于以下三种状况：

  • 变量的值会动静扭转时，比方来自用户的输出，任意值类型能够让这些变量跳过编译阶段的类型查看；
  • 改写现有代码时，任意值容许在编译时可选择地蕴含或移除类型查看；
  • 定义存储各种类型数据的数组时

13. 联结类型：能够通过管道 (|) 将变量设置多种类型，赋值时能够依据设置的类型来赋值

var val:string|number 
val = 12 
console.log("数字为"+ val) 
val = "Runoob" 
console.log("字符串为" + val)

4.2 函数

// 蕴含两个 number 类型参数和返回值，不能间接 return。必须 return 一个数字
function add(x: number, y: number): number {return x + y;}
 // 可选参数，（这里没写返回值，利用了 typeScript 的类型推断能力）function buildName(firstName: string, lastName?: string, a?:number) {if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}
// 参数默认值
function buildName(firstName: string, lastName: string = 'default_name') {return firstName + " " + lastName;}
// 有一种状况，咱们不晓得要向函数传入多少个参数，这时候咱们就能够应用残余参数来定义,
// 残余参数语法容许咱们将一个不确定数量的参数作为一个数组传入
function buildName(firstName: string, ...restOfName: string[]) {return firstName + "" + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

4.3 接口（interface）

接口是一系列形象办法的申明，是一些办法特色的汇合，这些办法都应该是形象的，须要由具体的类去实现，而后第三方就能够通过这组形象办法调用，让具体的类执行具体的办法。

interface IPerson { 
    firstName:string, 
    lastName:string, 
    sayHi: ()=>string} 
const customer:IPerson = { 
    firstName:"Tom",
    lastName:"Hanks", 
    sayHi: ():string =>{return "Hi there"} 
}

接口能够通过继承来扩大本人，继承应用关键字 extends，能够单继承和多继承

interface Person {age:number} 
interface Musician extends Person, person1 {instrument:string}

4.4 类（class）

TypeScript 是面向对象的 JavaScript，类形容了所创立的对象独特的属性和办法。
定义类的关键字为 class，前面紧跟类名，类能够蕴含以下几个模块（类的数据成员）：

  • 字段 − 字段是类外面申明的变量。字段示意对象的无关数据。
  • 构造函数 − 类实例化时调用，能够为类的对象分配内存。
  • 办法 − 办法为对象要执行的操作。
class Car { 
    // 字段 
    engine:string; 
    // 构造函数 
    constructor(engine:string) {this.engine = engine}  
    // 办法 
    disp():void {console.log("发动机为 :"+this.engine) 
    } 
}
const car = new Car('')

5 总结

总体而言，TypeScript 是一个很好的工具，即便您没有应用过它，也能够将它纳入您的学习打算中。因为它能在你脑中播下“类型思维”的种子，而思维形式决定了编程习惯，编程习惯奠定了工程质量，工程质量划定了能力边界。在面对越来越简单的前端场景，TypeScript 所提供的思维形式，可能让你在当前的开发中长期受害。

作者：京东物流 吴云阔

起源：京东云开发者社区

退出移动版