TypeScript基础

亦舒同学
322 阅读10分钟

初始TypeScript

  • 是JavaScript的一个超集，主要提供了类型系统和对ES6的支持
  • 可以编译为纯JavaScript，且可以运行在任何浏览器上
  • 开源

TypeScript优劣

优点

增加了代码的可读性和可维护性

  • 类型系统就是天然文档
  • ypeScript 只会进行静态检查，如果发现有错误，编译的时候就会报错,所以ts编译为js后，并不会有什么检查的代码被插入进来
  • 增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等(直接飙红提示类型错误)

image
image

相对包容

  • 将.js直接换成 .ts就是Ts
  • 即使不定义类型，也能自动做出类型推论
  • 即使Ts编译出错，依然能生成JS文件
  • 兼容第三方库

社区活跃

缺点

  • 学习成本高
  • 短期内增加开发成本，比如要写类型的定义，对于长期维护的项目，Ts能减少其维护成本
  • 集成到构建流程需要一定的工作量
  • 某些库兼容性不好

TypeScript常用类型及基本概念

Ts的类型分为两种

  • 原始数据类型
  • 对象类型

我们分别说起

布尔值

是最基础的数据类型，在Ts中使用boolean定义布尔值 类型

let isDone: boolean = false;

注意：

  • 构造函数 Boolean 创造的对象不是布尔值
  • new Boolean() 返回的是一个 Boolean 对象
  • 直接调用Boolean 也可以返回一个 boolean 类型
error
let createdByNewBoolean: Boolean = new Boolean(1);

true
let createdByBoolean: boolean = Boolean(1);

数值

使用number定义数值类型 形如

let decLiteral: number = 6;

字符串

使用 string定义 字符串类型 形如

let myName: string = 'yishu';

其中 ` 用来定义 ES6 中的模板字符串，${expr} 用来在模板字符串中嵌入表达式

空值（void） & null & undefined

JS中没有空值的概念，在Ts中，用void表示没有任何返回值的函数

function alertName(): void {
    alert('My name is Tom');
}

声明的void 类型的变量，只能将它赋值为 undefined 和 null，所有没啥意义

let unusable: void = undefined;

在 TypeScript 中，可以使用 null 和 undefined 来定义这两个原始数据类型

形如：

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

void 与 null，undefined 的区别

null，undefined是所有类型的子类型

// 这样不会报错
let num: number = undefined;

而 void 类型的变量不能赋值给 number 类型的变量：

let u: void;
let num: number = u;

// Type 'void' is not assignable to type 'number'.

任意值类型

表示允许赋值为任意类型的类型值

也就是说，如果是普通类型，在赋值过程中不能改变类型，但如果当前变量是任意值类型any,则允许被赋值为任意类型

let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;

⚠️

  • 声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值
  • 在任意值上调用任何属性和方法都是允许的
  • 变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型
let something;
something = 'seven';
something = 7;

something.setName('Tom');

等于

let something: any;
something = 'seven';
something = 7;

something.setName('Tom');

类型推论

如果没有指定明确的类型，Ts会依照类型推论的规则推断出一个类型，这就是类型推论。

let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

这里编译会出错，因为你没有指定类型，通过类型推论应该是String

但是下面又赋值给了7，number类型

如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查

形如

let myFavoriteNumber;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

被推断成any类型

联和类型

联合类型（Union Types）表示取值可以为多种类型中的一种。

let myFavoriteNumber: string | number 的含义

允许 myFavoriteNumber 的类型是 string 或者 number，但是不能是其他类型

使用 | 分隔每个类型

形如

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

联合类型的属性或方法

因为这里是不确定哪个类型的变量，所以我们只能访问所有类型里共有的属性和方法

function getLength(something: string | number): number {
    return something.length;
}
报错 因为 something.length 不是string和number的共有类型

function getString(something: string | number): string {
    return something.toString();
}
这样是没问题的

联和类型的变量被赋值时

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven'; 被推断成string
console.log(myFavoriteNumber.length); // 5
myFavoriteNumber = 7; 被推断成number
console.log(myFavoriteNumber.length); // 编译时报错

对象类型

Ts中，使用接口来定义对象的类型

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};

我们定义了 一个接口Person,定义了一个变量tom，类型是Person

这样我们就约束了 tom 的形状必须和接口 Person 一致

变量的形状必须和接口的形状保持一致

定义变量的属性比接口少属性是不允许的

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom'
};

image

当然了，多一些属性也是不允许的

赋值时，变量的形状必须和接口的形状保持一致。

接口形状中的可选属性

有时候我们不需要完全匹配一个形状，那么可以用可选属性

可选属性的含义：该属性可以不存在

语法

interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom'
};

除了定义的可选属性，仍然不可以新增或者减少其他属性，理由在上一条

接口形状中的任意属性

有时候我们希望接口允许有任意属性

语法

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

这里的 [propName: string]: any定义了任意属性取string属性的值

一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集

image

上例中，任意属性的值允许是string，但是可选属性age的值却是number number不是string的子类型，所以报错了

接口形状中的只读属性

使用readonly定义

语法：

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
};

数组类型

数组类型有多种类型方式

第一种：类型+[]

语法

 let fibonacci: number[] = [1, 1, 2, 3, 5];

let fibonacci: number[] = [1, '1', 2, 3, 5];

// Type 'string' is not assignable to type 'number'
类型问题 会报错

数组的一些方法的参数也会根据数组在定义时约定的类型进行限制

let fibonacci: number[] = [1, 1, 2, 3, 5];
fibonacci.push('8');

push的是string类型的值，数组要求的是`number``的值 所以会报错

第二种：使用数组泛型来表示数组

语法

let fibonacci: Array<number> = [1, 1, 2, 3, 5];

第三种：使用接口表示数组

语法

interface NumberArray {
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];

NumberArray 表示：只要索引的类型是数字时，那么值的类型必须是数字

比较复杂 不常用来表示数组，但是我们常常用来表示 类数组

使用any来定义数组中所有类型的值

形如

let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }]

函数类型

在JS中，表达函数有两种方式

  • 函数声明
  • 函数表达式

函数的特性：有输入有输出

形如

// 函数声明（Function Declaration）
function sum(x, y) {
    return x + y;
}

// 函数表达式（Function Expression）
let mySum = function (x, y) {
    return x + y;
};

如果我们要在TS中对其进行约束，就需要把输入输出都考虑到

函数声明的类型在TS中表现

语法

function sum(x: number, y: number): number {
    return x + y;
}

⚠️ 输入多余的（或者少于要求的）参数，是不被允许的 形如

image

函数表达式类型在TS中表现

语法

let mySum = function (x: number, y: number): number {
    return x + y;
};

这种写法 只是对等号右侧的匿名函数进行了类型定义，等号左边的mySum是通过赋值操作进行类型推论出来的

如果手动给mySum添加类型，应该是如下

let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};

⚠️ 注意 TS中的=>

=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型

用接口定义函数的形状

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}

函数类型中的可选参数与默认值的写法

可选参数

与接口中的可选属性类似 我们用?表示可选参数

function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

注意：可选参数后面不允许再出现必需参数了

参数默认值

在TS中会将添加了默认值的参数识别为可选参数

function buildName(firstName: string, lastName: string = 'Cat') {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

此时就不受「可选参数必须接在必需参数后面」的限制了

这样也是可以的

function buildName(firstName: string = 'Tom', lastName: string) {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let cat = buildName(undefined, 'Cat');

剩余参数

在JS中我们可以用...rest 的方式获取函数中的剩余参数（rest 参数）

function push(array, ...items) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a = [];
push(a, 1, 2, 3);

事实上，items是一个数组，我们可以用数组的类型来定义它

function push(array: any[], ...items: any[]) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a = [];
push(a, 1, 2, 3);

函数的重载

定义：允许一个函数接受不同数量或类型的参数时，做出不同的处理

在ts中我们这样实现

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

如上，我们重复定义了多次函数reverse,前几次都是函数定义，最后一次是函数实现

TS会优先从前面的函数定义开始匹配

类型断言

类型断言（Type Assertion）可以用来手动指定一个值的类型。

语法

<类型>值
 或者
值 as 类型

有时候，我们确实需要在还不确定类型的时候就访问其中一个类型的属性或方法

比如

function getLength(something: string | number): number {
    if (something.length) {
        return something.length;
    } else {
        return something.toString().length;
    }
}

这个时候我们需要类型断言

类型断言的用法如上，在需要断言的变量前加上 即可

function getLength(something: string | number): number {
    if ((<string>something).length) {
        return (<string>something).length;
    } else {
        return something.toString().length;
    }
}

此时 我们使用类型断言，将 something 断言成 string

注意： 类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的

如下，是不允许的

function toBoolean(something: string | number): boolean {
    return <boolean>something;
}

声明文件

当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。

TS中的内置对象

  • TypeScript 核心库的定义文件中定义了所有浏览器环境需要用到的类型，并且是预置在 TypeScript 中的
  • 当你在使用一些常用的方法的时候，TypeScript 实际上已经帮你做了很多类型判断的工作了，比如：

用Ts写nodeJS

Node.js不是内置对象的一部分，如果想用 TypeScript 写 Node.js，则需要引入第三方声明文件

npm install @types/node --save-dev

至此，Ts基础篇已完结

avatar
文章
阅读
粉丝