欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

TS02 TypeScript基础

程序员文章站 2022-03-27 20:43:28
...

安装

全局安装TypeScript命令行工具

npm install -g typescript

安装后就可以在全局使用tsc命令,来编译TypeScript文件:

tsc hello.ts

TypeScript编写的文件后缀名是.ts,用TypeScript编写React应用时文件后缀名是.tsx

Hello TypeScript

function sayHello(person: string) {
  return `hello, ${person}`
}
const user = 'Tom';
console.log(sayHello(user));

在TS中,使用:指定变量的类型,编译后的代码:

function sayHello(person) {
    return "hello, " + person;
}
var user = 'Tom';
console.log(sayHello(user));

TypeScript会对代码进行静态检查,如果传入的参数和我们指定的类型不匹配,IDE就可以给出即时的提示,并且在编译阶段会报错(但是并不会阻止编译的过程)

例如我们将上面的user的值改为数值123,那么在IDE中会提示:

TS02 TypeScript基础

编译时也报错:

src/hello.ts:5:22 - error TS2345: Argument of type '123' is not assignable to parameter of type 'string'.

5 console.log(sayHello(user));

但是仍然会生成编译结果。如果需要在报错时终止JS文件的生成,可以在tsconfig.json中配置noEmitOnError,关于tsconfig.json后面单独学习。

原始数据类型

字符串 + 布尔值 + 数值

JavaScript中数据分为原始数据类型和对象类型,原始数据类型有六种(布尔值、数值、字符串、nullundfinedSymbol),对于前三者类型的定义如下:

let isDone: boolean = false; 
let count: number = 123;
let msg: string = 'hello'

注意,类型的定义都是针对字面量的,使用构造函数(例如new Boolean())创建出的变量类型时对象,而非基本类型

空值void

JavaScript中没有空值的概念,而在TypeScript中使用void表示没有任何返回值的函数:

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

如果一个变量声明为void类型,那么只能将它赋值为undefinednull

对于undefinednull,它们是所有类型的子类型,也就是说,undefinednull类型的变量,可以赋值其他任何类型:

let msg: string = undefined;
let count: number = null;

void类型的变量不是其他类型的子类型,不能赋值给其他类型的变量

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

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

任意值

使用any来表示允许赋值为任意类型,除此之外的情况,一旦定义了类型,在赋值过程中是不允许改变的:

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

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

但是如果是any类型,则可以被任意改变:

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

在任意值*问任何属性都是允许的,也可以调用任何方法:

let anyThing: any = 'hello';
console.log(anyThing.myName.firstName);
anyThing.myName.setFirstName('Cat');

可以认为,声明一个变量为any后,对它的任何操作,返回的内容的类型都是任意值(失去了控制)

变量在声明时,如果没有指定类型并且没有赋值,那么就会被认为是任意类型

类型推论

如果一个变量声明时,没有指定类型吗,但是进行了赋值,那么TypeScript会依照类型推论的规则推导出一个类型

let msg = 'seven';
msg = 7;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

它等价于

let msg: string = 'seven';
msg = 7;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

联合类型(Union Types)

联合类型表示取值可以为多种类型中的一种,使用|来分割每个类型

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

当TypeScript不确定一个联合类型的变量具体是哪个类型是时,我们只能访问此联合类型的所有类型中都共有的属性和方法

联合类型在赋值时也会根据类型推论被确定类型

对象的类型:接口

接口定义

在TypeScript中,我们使用接口(Interfaces)来定义对象的类型。

在面向对象语言中,接口是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(class)去实现(implement)

TypeScript中的接口既可以对类的一部分行为进行抽象,也可以对对象的形状(shape)进行描述,下面是一个简单的例子:

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

const tom: Person = {
  name: 'tom',
  age: 100,
};

上面我们通过定义接口Person,并且指定了tom的类型为Person,这样就约束了tom中的形状(也就是各个成员的类型)必须和接口Person一致

接口名首字母大写。

可选属性

使用了接口的变量属性数目必须和接口完全一致,不能多也不能少,也就是说,赋值的时候,变量的形状必须和接口的形状完全保持一致

但是有些时候,我们希望不要完全匹配一个形状,那么就可以使用可选属性:

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

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

这个时候接口中的可选属性是可以在变量中不存在的,但是仍然不允许添加不存在的属性,并且可选属性的类型(如果存在)仍需要和接口中属性的类型一致。

任意属性

如果希望一个接口允许有任意的属性,可以使用[propName: string]来定义:

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

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

使用[propName: string],定义了任意属性(属性名类型为string)的类型为any,要注意的是,一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集

只读属性

可以在接口的属性前添加readonly,定义此属性是只读的,不能为此属性赋值

interface Person {
  readonly name: string
}

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

tom.name = 'jerry';
// Cannot assign to 'name' because it is a read-only property.

数组的类型

数组类型有多重定义方法:

类型 + 方括号表示法

这是最简的表达式方法,适用于值都是基本类型的数组:

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

// Argument of type '"8"' is not assignable to parameter of type 'number'.

使用any表示数组中可以出现任意类型:

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

数组泛型

也可以使用数组泛型(Array Generic)Array<elemType>来表示数组:

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

用接口表示数组

因为数组实际上是特殊的对象,所以可以使用接口来描述数组:

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

[index: number]限定的是索引的类型是数字的成员(实际上貌似使用propName代替index也可以成功)

复合数组

前面的几种方法都定义的是数组成员是基本类型的数组,如果数组的成员是对象的话,只需要借助接口来实现就好:

interface Item {
  name: string,
  age: number
}
let arr: Array<Item> = [
  { name: 'Tom', age: 100 },
  { name: 'Jerry', age: 100 },
];

类数组

类数组并不是数组,不能用普通的数组的方式来描述,而应该使用接口:

function sum() {
  let args: {
    [index: number]: number;
    length: number;
    callee: Function;
  } = arguments;
}

我们通过自定义接口约束了类数组的类型,但是实际上类数组在TypeScript中都有内置的接口定义,比如arguments对应的IArguments,还有NodeListHTMLCollection

function sum() {
  let args: IArguments = arguments;
}

IArguments的内容实际上就是:

interface IArguments {
  [index: number]: any;
  length: number;
  callee: Function;
}

这些内置对象在后面学习。

函数的类型

一个函数有输入也有输出,输入和输出的类型都需要进行限制

函数声明

函数参数的个数也会被限定

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

函数表达式

如果将上面的函数声明改写为函数表达式,是这样:

const sum = (x: number, y: number): number => {
  return x + y;
};

但是实际上,这样支队等号右侧的匿名函数进行了类型定义,等号左边的sum是通过赋值操作进行类型推论而推断出来的,如果需要手动给sum添加类型,应该是这样:

const sum: (x: number, y: number) => number = (x: number, y: number): number => {
  return x + y;
};

上面出现了两个箭头=>,右侧箭头是ES6中用来定义函数的箭头,而左侧的箭头是TypeScript中用来表示函数定义的箭头,这个箭头左侧表示输入类型,需要用括号括起来,右侧是输出类型。

实际上对sum的类型的限制及限制了函数的输入,也限制了函数的输出。

用接口定义函数类型

也可以用接口来定义函数类型:

interface sumFn {
  (x: number, y: number): number
}

const sum: sumFn = (x, y) => x + y;

接口的属性名为对应的函数输入参数类型,属性值为函数输出的参数类型。

可选参数

和接口的可选属性一样,函数的参数后面添加?表示这个参数时可选参数,要注意的是,可选参数必须接在必须参数的后面,也就是说,可选参数后面不能出必须参数了

function buildName(firstName: string, lastName?: string) {
  if (lastName) {
    return firstName + ' ' + lastName;
  } else {
    return firstName;
  }
}

let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

默认参数

和ES6中的函数的默认参数一样,TypeScript中也可以给函数的参数添加默认值。

const sum = (x: number, y: number = 0): number => x + y;

sum(5, 2);
sum(5);

函数参数的默认值只能在函数中定义,不能在接口中定义:

interface sumFn {
  (x: number, y: number = 0): number,
}

const sum: sumFn = (x, y) => x + y;
// Error:(9, 15) TS2371: A parameter initializer is only allowed in a function or constructor implementation.

剩余参数

ES6中的剩余参数需要使用数组类型来定义(因为它就是一个数组)

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

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

要注意,剩余参数只能在参数的末尾出现。

函数重载

一个函数接受不同数量或者类型的参数,做出不同的处理,这种现象就是函数重载。

例如下面的函数,对输入数字和字符串时处理的过程是不同的:

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('');
  }
}

但是这样并不够精确,因为输入是数字的时候,也应该返回数字,输入是字符串,也应该返回字符串,这时我们可以使用重载定义多个函数类型:

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('');
  }
}

前两个都是函数定义,最后一个是函数实现,这样做在IDE就可以看到正确的两个提示

TS02 TypeScript基础

注意,TypeScript会从最前面的函数开始匹配,所以需要优先把精确定义写在前面

类型断言

类型断言(Type Assertion)用来手动指定一个值的类型,一般用在联合类型中,将一个不确定类型的变量指定为联合类型中的一种

比如,下面的函数,如果要访问length会报错,因为number是没有length属性的:

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

// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
// Property 'length' does not exist on type 'number

这个时候我们就可以使用类型断言,将something断言为string

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

或者:

function getLength(something: string | number): number {
  return (something as string).length;
}

上面用了两种语法类实现断言(<类型>值)(值 as 类型),在React应用的.tsx文件中,只能使用后一种。

要注意类型断言不是类型转换,不允许将类型断言为一个联合类型中不存在的类型

声明文件

声明语句

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

比如使用jQuery时,我们获取一个元素:

jQuery('#foo');
// ERROR: Cannot find name 'jQuery'.

但是这时编译器并不知道$或者jQuery是什么,所以我们需要使用declare定义它的类型

declare var jQuery: (selector: string) => any;

jQuery('#foo');

上面的declare var就是声明语句,它并没有定义一个变量,只是定义了jQuery的类型,仅仅用于编译时的检查,编译结果中会删除。

声明文件

通常情况,我们会将声明语句放到单独的文件中(jQuery.d.ts),这个文件就是声明文件:

// src/jQuery.d.ts

declare var jQuery: (selector: string) => any;

声明文件必须以.d.ts为后缀,当我们将jQuery.d.ts放入项目中,其他所有的*.ts文件就都可以获得jQuery的类型定义了

如果无法解析,可以检查一下tsconfig.json中的filesincludeexclude配置,确保包含了声明文件

第三方声明文件

大部分热门的第三方库的声明文件都不需要我们自己定义了,我们可以直接使用@types统一管理第三方库的声明文件。

可以在这个页面搜索需要的声明文件,然后使用npm安装对应的声明模块即可:

npm install @types/jquery --save-dev

书写声明文件

如果第三方库没有提供声明文件,我们需要自己书写声明了,在不同的场景下,声明文件的内容和使用方式有所区别

全部变量

当通过<script>标签引入第三方库的时候,会注入全局变量,就像上面的例子一样。建议将声明文件和源码一起放到scr目录下

(1)声明变量

可以使用declare vardeclare letdeclare const来声明变量,一般来说全局变量都是禁止修改的常量,所以大部分情况都应该使用const

declare const jQuery: (selector: string) => any;

要注意的是,声明语句中只能定义类型,不要在声明语句中定义具体的实现

(2)声明函数

使用declare function来声明全局函数的类型,jQuery其实就是一个函数,所以也可以使用function来定义。在函数类型的声明语句中,也支持函数重载

declare function jQuery(cb: () => any)
declare function jQuery(selector: string): any;

(3)声明类

使用declare class定义一个类:

declare class Person {
  name: string;
  constructor(name: string) ;
  sayHi(): string;
  sayBye: (msg: string) => string
}

同样的,declare class也只能定义类型,不能定义具体实现

(4)声明枚举类型

JS中是没有枚举类型的,TypeScript中使用declare enum声明的枚举类型也成为外部枚举,定义后的变量不能包含枚举值之外的属性

declare enum Direction {
  up,
  down,
  left,
  right,
}

const d1 = Direction.down;

const d2 = Direction.south;
// Error:(17, 22) TS2339: Property 'south' does not exist on type 'typeof Direction'.

(5)声明命名空间

使用declare namespace声明命名空间,用来表示全局变量是一个对象,包含很多子属性。

比如jQuery是一个全局变量,它是一个对象,提供了一个jQuery.ajax的方法可以调用,那么我们就可以通过declare namespace来声明这个拥有很多个子属性的全局变量:

declare namespace jQuery {
  function ajax(url: string, settings?: any): void;
}

declare namespace内部,直接使用function来声明函数,而不是使用declare function,类似的也可以使用classenumconst等语句

declare namespace jQuery {
  function ajax(url: string, settings?: any): void;

  const version: number;

  class Event {
    blur(eventType: EventType): void
  }

  enum EventType {
    CustomClick
  }
}

如果对象有深层的层级,则需要使用嵌套的namespace来声明深层的属性的类型:

declare namespace jQuery {
  function ajax(url: string, settings?: any): void;

  namespace fn {
    function extend(object: any): void;
  }
}

假如jQuery下仅有fn这一个属性(没有ajax等其他属性或方法),则可以不需要嵌套namespace

declare namespace jQuery.fn {
  function extend(object: any): void;
}

(6)声明全局的接口或类型

我们可以将接口和其他的类型放到类型声明文件中,这样声明的接口或者类型就暴露成为全局的接口或类型,可以被其他文件使用

interface AjaxSettings {
  method?: 'GET' | 'POST'
  data?: any;
}
declare namespace jQuery {
  function ajax(url: string, settings?: AjaxSettings): void;
}

要注意,暴露在全局的interface或者type会作为全局类型作用域整个项目中,存在命名冲突的可能性,所以应该尽量减少全局变量或全局类型的数量,所以应该将他们放到namespace下:

declare namespace jQuery {
  interface AjaxSettings {
    method?: 'GET' | 'POST'
    data?: any;
  }
  function ajax(url: string, settings?: AjaxSettings): void;
}

使用这个interface的受,应该加上命名空间的前缀:

let settings: jQuery.AjaxSettings = {
  method: 'POST',
  data: {
    name: 'foo'
  }
};

(7)声明合并

如果一个对象即是一个函数,可以直接调用jquery('#foo'),又是一个对象,有子属性jQuery.ajax(),那么可以组合多了个声明语句,他们会不冲突的合并:

declare function jQuery(selector: string): any;
declare namespace jQuery {
  function ajax(url: string, settings?: any): void;
}

合并规则后面单独学习。

NPM包

找到已存在的声明文件

在给引入的NPM包创建声明文件之前,先看它的声明文件是否存在,一般来说可能存在于:

(1)与包绑定在一起,看package.jsontypes字段,或者看包中是否有index.d.ts声明文件。

推荐这种模式,因为不需要安装额外的其他包。我们自己创建NPM包的时候,最好也将声明与包绑定在一起

(2)发布到@types里,可以去上面提到的页面搜索对应的声明文件,然后安装即可。

这种模式一般是由第三方提供的声明文件,发布到@types中。

编写声明文件

如果没有找到声明文件,我们可以自己编写。由于一般是通过import来引入一个NPM包(假设为foo),所以声明文件的存放位置有要求。

最常用的方案是,创建一个types目录,专门用来管理自己写的声明文件,将自己编写的声明文件放到types/foo/index.d.ts中。

TS02 TypeScript基础

这种方式还需要配置tsconfig.json中的pathsbaseUrl字段。

{
  "compilerOptions": {
    "module": "commonjs",
    "baseUrl": "./",
    "paths": {
      "*": ["types/*"]
    }
  }
}

NPM声明文件包含下面几种语法:

(1)export导出变量

在NPM包的声明文件中,如果使用declare不会再声明全局变量,只会在当前文件中声明局部变量。局部变量需要使用export导出,然后由使用方import导入后,才会被应用。

同样,声明文件中不能定义具体的实现:

// types/foo/index.d.ts

export const name: string;

export function getName(): string;

export class Animal {
  constructor(name: string);
  sayHi(): string;
}

export enum Directions {
  Up,
  Down,
  Left,
  Right
}

export interface Options {
  data: any;
}

也可以使用declare先声明多个变量,然后再用export一次性导出:

// types/foo/index.d.ts

declare const name: string;

declare function getName(): string;

declare class Animal {
  constructor(name: string);

  sayHi(): string;
}

declare enum Directions {
  Up,
  Down,
  Left,
  Right
}

interface Options {
  data: any;
}

export {name, getName, Animal, Directions, Options};

(2)export namesapce

declare namspace一样,export namespace导出一个拥有子属性的对象

// types/foo/index.d.ts

export namespace foo {
  const name: string;
  namespace bar {
    function baz(): string;
  }
}

可以使用export default导出默认的functionclassinterface,这三者可以直接导出,其他的类型需要先定义,然后在使用export default导出,一般会将这种导出放在整个声明文件的最前面:

// types/foo/index.d.ts

export default Directions;

declare enum Directions {
  Up,
  Down,
  Left,
  Right
}

UMD

针对UMD格式的模块,使用export as namespace进行导出,一般使用时,都是先有了NPM包的声明文件,再基于它添加export as namespace语句,就可以将声明好的一个变量声明为全局变量:

// types/foo/index.d.ts

export as namespace foo;
export = foo;

declare function foo(): string;
declare namespace foo {
  const bar: number;
}

其他

可以使用declare global来在已有的声明文件中扩展全局变量的类型:

// types/foo/index.d.ts

declare global {
  interface String {
    prependHello(): string;
  }
}

export {};

要注意,此声明文件不需要导出任何东西,但是仍然导出了一个空对象,用来告诉编译器这是一个模块的声明文件,而不是全局变量的声明文件

可以使用declare module来扩展模块插件

自动生成声明文件

如果库的源码本身就是TypeScript编写的,那么使用tsc来将.ts编译为JS的过程中,可以添加declaration选项(简写-d,同时生成.d.ts声明文件

也可以在ts.config中添加declaration选项来实现:

{
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "lib",
    "declaration": true,
  }
}

这样就会由.ts文件生成.d.ts声明文件,并且输出到lib目录下:

TS02 TypeScript基础

这样做的时候,每个.ts文件都会对应一个.d.ts声明文件,这样使用方就可以再使用import导入时获得类型提示

此外,tsconfig.json中还有其他选项与自动生成声明文件相关:

  • declarationDir,设置生成.d.ts文件的目录
  • declarationsMap,对每个.d.ts文件都生成对应的.d.ts.map(sourcemap)文件
  • emitDeclarationOnly,仅仅生成.d.ts文件,不生成.js文件

发布声明文件

如果是tsc命令自动生成的声明文件,不需要做任何其他配置,直接发布到NPM即可

如果是手动编写的,需要满足下面条件之一,才能被正确识别:

  • package.jsontypes或者typings字段指定一个类型声明文件地址
  • 在项目根目录下,编写index.d.ts文件
  • 针对入口文件(package.json中的main字段指定的入口文件)编写一个同名不同后缀的.d.ts文件

内置对象

内置对象是指根据标准在全局作用域上存在的对象,主要分为以下几种:

(1)ECMAScript的内置对象

例如ErrorDateRegExp等,可以在TypeScript中直接将变量定义为这些类型:

let e: Error = new Error('Error occurred');
let d: Date = new Date();
let r: RegExp = /[a-z]/;

(2)DOM和Bom的内置对象

例如DocumentHTMLElementEventNodeList等,在TypeScript中也可以直接使用它们来定义变量类型:

let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div');
document.addEventListener('click', function(e: MouseEvent) {
  // Do something
});

(3)TypeScript核心库的定义文件

TypeScript核心库定义了所有浏览器环境需要用到的类型,预置在TypeScript中。当我们在使用一些常用的方法中,实际上TypeScript已经帮我们进行了类型判断:

Math.pow(10, '2');

// index.ts(1,14): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

在TypeScript的核心库lib.es5.d.ts中定义了Math的接口类型:

interface Math {
  /**
   * Returns the value of a base expression taken to a specified power.
   * @param x The base value of the expression.
   * @param y The exponent value of the expression.
   */
  pow(x: number, y: number): number;
}

要注意,TypeScript核心库中不包含Node.js部分内容

(4)Node.js

Node.js不是内置对象,如果要使用TypeScript写Node.js,需要引入第三方声明文件:

npm install @types/node --save-dev

参考

相关标签: TypeScript