typescript 的必要性及基础使用

1 前言

作为一个前端语言，Javascript 从最初只是用来写页面，到如今的移动终端、后端服务、神经网络等等，它变得几乎无处不在。如此广阔的应用领域，对语言的安全性、健壮性以及可维护性都有了更高的要求。尽管 ECMAScript 标准在近几年有了长足的进步，但是在类型检查方面依然毫无建树。在这种情况下 TypeScript 应运而生。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

2 为什么要使用 TypeScript

在 JavaScript 的开发过程中，相信经常会遇到以下这种场景：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

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

以上情况归结底，是因为 JavaScript 是一门动态弱类型语言，对变量的类型非常宽容，而且不会在这些变量和它们的调用者间建立结构化的契约。如果你长期在没有类型约束的环境下开发，就会造成 “类型思维” 的缺失，养成不良的编程习惯，这也是做前端开发的短板之一，因此使用 TypeScript 对于前端开发者而言是迫切并且必要的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

使用 TypeScript 还能带来其他好处。比如，Visual Studio Code 具有强大的自动补全、导航和重构功能，这使得接口定义可以直接代替文档，同时也提高了开发效率，降低了维护成本。更重要的是，TypeScript 可以帮助团队重塑 “类型思维”，使前端开发者从代码的编写者蜕变为代码的设计者。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

如果说 JavaScript 是一匹野马，那么 TypeScript 就是束缚这匹野马的缰绳。作为骑士的你，自然可以张开双臂，放飞自我，但如果不是技艺超群，恐怕会摔得很惨。然而如果抓住了缰绳，你即可闲庭信步，亦可策马扬鞭。这就是 TypeScript 的价值，它会让你在前端开发之路上走得更稳，走得更远。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

3 什么是 TypeScript

什么是 TypeScript 呢？根据官方的定义，它是拥有类型系统的 JavaScript 的超集，可以编译成纯 JavaScript。在这里需要注意三点：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

1. 类型检查，TypeScript 会在编译阶段进行严格的静态类型检查，这意味着你在代码编写阶段就能发现一些错误，而不必带到线上运行时才能发现；
2. 语言扩展：TypeScript 会包括来自 ECMAScript 6 和未来提案中的特性，比如异步操作和装饰器，也会从其他语言借鉴某些特性，比如接口和抽象类；
3. 工具属性：TypeScript 能够编译成标准的 JavaScript，可以在任何浏览器、操作系统上运行，无需任何运行时的额外开销，从这个角度上讲，TypeScript 更像是一个工具，而不是一门独立的语言

4 TypeScript 基础使用

4.1 基础类型

Ts 包含类型如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

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

let arr: number[] = [1, 3]  
let arr:Array<number> = [1,2]

5. 元组：无关键字，元组类型用来表示已知元素个数和类型的数组，每个元素的类型不必相同，但是对应位置的类型需要相同；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

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）： 枚举类型用于定义类型集合文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

数字枚举：默认情况下，第一个枚举值是 0，然后每个后续值依次递增 1， 但是，你可以通过特定的赋值来改变给任何枚举成员关联的数字，如下例子，我们从 3 开始依次递增文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

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: 用于标识方法的返回值，表示没有返回值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

8.null: 标识对象值缺失；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

9.undefined： 用于初始化变量为一个未定义的值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

10.never： 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

11.Object：object 表示非原始类型，也就是除 number，string，boolean，symbol，null 或 undefined 之外的类型。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

12.any：任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型；（注意：不要轻易使用 any，使用 any 跟使用 javascript 效果一样了）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

它常用于以下三种情况：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

• 变量的值会动态改变时，比如来自用户的输入，任意值类型可以让这些变量跳过编译阶段的类型检查；
• 改写现有代码时，任意值允许在编译时可选择地包含或移除类型检查；
• 定义存储各种类型数据的数组时

13. 联合类型：可以通过管道 (|) 将变量设置多种类型，赋值时可以根据设置的类型来赋值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

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）

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

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

接口可以通过继承来扩展自己，继承使用关键字 extends， 可以单继承和多继承文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

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

4.4 类（class）

TypeScript 是面向对象的 JavaScript，类描述了所创建的对象共同的属性和方法。
定义类的关键字为 class，后面紧跟类名，类可以包含以下几个模块（类的数据成员）：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

• 字段 − 字段是类里面声明的变量。字段表示对象的有关数据。
• 构造函数 − 类实例化时调用，可以为类的对象分配内存。
• 方法 − 方法为对象要执行的操作。

class Car { 
    // 字段 
    engine:string; 
    // 构造函数 
    constructor(engine:string) { 
        this.engine = engine 
    }  
    // 方法 
    disp():void { 
        console.log("发动机为 :   "+this.engine) 
    } 
}
const car = new Car('')

5 总结

总体而言，TypeScript 是一个很好的工具，即使您没有使用过它，也可以将它纳入您的学习计划中。因为它能在你脑中播下 “类型思维” 的种子，而思维方式决定了编程习惯，编程习惯奠定了工程质量，工程质量划定了能力边界。在面对越来越复杂的前端场景，TypeScript 所提供的思维方式，能够让你在以后的开发中长期受益。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

作者：京东物流 吴云阔文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html

来源：京东云开发者社区文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49628.html