TypeScript初识

# 什么是typeScript

- typeScript是javaScript的超集，主要提供了类型系统和对ES6的支持。

- typeScript的代码通过 ts编译工具可以编译成javaScript代码，从而能在浏览器上运行。类似于java代码需要变成class文件。

- ts代码 => js代码需要编译， js代码 => ts代码直接改后缀名为.ts即可，这也是因为ts是js的超集，它包含js但不限于js。

# ts的编译工具

- 上面有提到ts要在浏览器上运行必须编译成js，这里就需要使用ts的编译工具，这个工具其实就是在全局安装tpeyScript。命令如下

-- npm install -g typescript

-- 安装之后我们可以在命令行使用 tsc 命令（类似与javac）对ts文件进行编译。

-- 例如编译 hello.ts 文件，在命令行执行： tsc hello.ts 命令。这时你的目录里面就会生产一个hello.ts编译之后的js文件 hello.js

# ts 初体验

- 我们先编写一个hello.ts文件，代码如下

```javaScript (ts)

function sayHello(person: string) {

return 'Hello, ' + person;

}

let userName = 'world';

console.log(sayHello(userName));

```

- 再进行编译得到hello.js文件，代码如下

```javaScript

function sayHello(person) {

return 'Hello, ' + person;

}

var userName = 'world';

console.log(sayHello(userName));

```

1. 我们可以看到ts代码中sayHello函数的参数为person: string，规定了只能是字符串类型。如果你传入的是其他类型，编译的时候会编译，但是会报错。

# 基本数据类型

- 和js中一样ts也包含布尔值，数值，字符串，null，undefined这集中基本数据类型。当然还有es6中提供的Symbol类型。

## 布尔值类型

- 布尔值作为基本类型中的一种，在ts中使用boolean定义布尔值，注意，不是Boolean，在上面ts初体验中我们定义参数使用的也是string，而不是String

```javaScript (ts)

let isShow : boolean = false; //这里是可以编译通过的

```

- 如果我们ts中像js一样使用构造函数的方法定义一个布尔值是会报错的

```javaScript

let createdByNewBoolean: boolean = new Boolean(1);

// index.ts(1,5): error TS2322: Type 'Boolean' is not assignable to type 'boolean'.

/**

* 事实上在ts中boolean表示的是基本数据类型呢，let createdByNewBoolean: boolean 实际上就是规定了createdByNewBoolean只能是boolean类型。

* 而Boolean无论是在js中还是ts中他都是一个构造函数，通过new构造函数的方式得到值就是一个对象，而对象是属于引用数据类型。

* 其实在js中也是一样，只是js没有如此严格类型系统。

* 这一点ts的基本类型中其他基本类型都是一样，后面就不再赘述（除了null和undefined）

```

## 数值类型

- ts中使用number定义数值类型，直接上代码吧

```javaScript (ts)

let decLiteral: number = 6;

// 十六进制

let hexLiteral: number = 0xf00d;

// ES6 中的二进制表示法

let binaryLiteral: number = 0b1010;

// ES6 中的八进制表示法

let octalLiteral: number = 0o744;

let notANumber: number = NaN;

let infinityNumber: number = Infinity;

```

-以上ts代码经过编译之后

```javaScript

var decLiteral = 6;

// 十六进制数

var hexLiteral = 0xf00d;

// ES6 中的二进制表示法

var binaryLiteral = 10;

// ES6 中的八进制表示法

var octalLiteral = 484;

var notANumber = NaN;

var infinityNumber = Infinity;

/**

* 我们可以看到ts经过编译以后，2进制，8进制都被转化成了10进制数。16进制没有。

* 为啥16进制不转呢？

* Infinity是啥？简单的说（复杂的我也不会）他是表示所有超出javaScript处理范围的数值。他可以进行运算，但是结果不是Infinity（加）就是NaN（乘除减）。

* 我们知道数学中0不能作为除数，任何数除以0都是没有意义的。在js中也是一样，任何数除以0得到的值都是Infinity包括Infinity本身（0除外，0/0=NaN）。

```

## 字符串类型

- 前面有提到ts中使用string来定义字符串

```javaScript (ts)

let myName: string = 'Tom';

let myAge: number = 25;

// 模板字符串

let sentence: string = `Hello, my name is ${myName}.I'll be ${myAge + 1} years old next month.`;

```

- 以上ts代码编译之后得到以下js代码

```javaScript

var myName = 'Tom';

var myAge = 25;

// 模板字符串

var sentence = "Hello, my name is " + myName + ".\nI'll be " + (myAge + 1) + " years old next month.";

/**

* 我们可以到定义的方式语法和数值布尔值类型是一样的，平时我们工作也会使用到es6中模版字符串，使用``包裹模版，${}包裹变量

* 编译之后就回到了我们js中相对low逼的字符串拼接模式。

```

## 空值（ts新增基本类型）

- ts中使用viod来定义空值，但是我们一般不会去定义一个空值，因为你只能给他赋值null或者undefined。

- 我们可以用viod来表示一个函数没有没有任何返回值

```javaScript （ts）

let unusable: void = undefined; // 你只能给他赋值unll和undefined

function alertName(): void { //这表示alertName函数没有任何返回值

alert('My name is Tom');

}

```

## null和undefined

- 这是两种基本数据类型，由于特点相似所以放在一起讲

- null和undefined 是所有类型的子类型，也就是说，不论你定义的任何数据类型的变量都可以赋值null和undefined。

- 这也是null/undefined 和空值viod的不同之处，被定义为viod类型的变量是不能赋值到其他类型的数据的。

```javaScript (ts)

/**

* 我们前面提到定义void的变量可以给他赋值null和undefined的，

* unll和undefined可以赋值给任何类型的变量，那么我先给void变量u赋值unll, 再将变量u赋值给数值类型n会不会报错呢？

* 如下列代码，是会报错的。

let u:void = null

let n:number = u

let a:number = null

```

## 任意值

- 任意值在ts中使用any定义。

- 个人理解是和js中定义变量一样，当你规定这个变量是一个any类型的时候，你可以给他赋值任何类型的数据。

- 对任意值类型进行任何操作得到的数据都是任意值类型。

```javascript (ts)

let myFavoriteNumber: any = 'seven';

myFavoriteNumber = 7;

console.log(myFavoriteNumber);

myFavoriteNumber = [];

console.log(myFavoriteNumber);

/**

* 当定义后没有马上赋值，并且没有定义类型。默认为任意类型

let arry;

arry = 0;

console.log(arry);

arry = [1,2,3]

console.log(arry);

```

```javascript

var myFavoriteNumber = 'seven';

myFavoriteNumber = 7;

console.log(myFavoriteNumber);

myFavoriteNumber = [];

console.log(myFavoriteNumber);

/**

* 当定义后没有马上赋值，并且没有定义类型。默认为任意类型

var arry;

arry = 0;

console.log(arry);

arry = [1, 2, 3];

console.log(arry);

```

### 类型推论，恰好讲到任意类型先定义后赋值，该定义数据默认为any类型，Ts中还有类型推论规则

- 当你定义数据没有定义类型的时候，并且在定义的同时给他赋值了，那么ts就会推论，你这个数据为你所赋值的类型。

- 这里需要和上面先定义后赋值的情况区分。

- let arry; ==> arry 为任意值类型， let arry = '123' ==> arry 为字符串类型，后续也只能使用字符串为他赋值

## 联合类型

- 顾名思义，表示取值可以为多种类型之一

- 定义类型时使用 | 将类型隔开

```javascript （ts）

let lianhe: string | number = 3;

lianhe = 'seven';

lianhe = 7;

```

```javascript

var lianhe = 3;

lianhe = 'seven';

lianhe = 7;

```

### 访问联合属性的类型和方法

```javascript (ts)

/**

* something是一个联合类型，他可以是string，也可以是number

* 在函数getLength中我们我们尚不清楚他传入的是什么类型，所以只能调取string和number的公共属性或者方法。

function getLength(something: string | number){

// return something.length; // 报错

return something.toString(); // 不报错

}

/**

* 联合类型也适用类型推论

let abc : string | number;

abc = 100 ; // 此时犹豫类型推论原则，ts认为abc是一个数字

// console.log(abc.length) // 报错

abc = 'hello' ;

console.log(abc.length) // 5

```

# 引用类型

## 对象的类型-接口

- 在ts中我们使用interfaces来定义对象的类型

- 什么是对象的类型，我是这么理解，他是一个规则，假设你通过某个接口去定义了一个对象，那么这个对象必须按照这个接口规则去写。

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

- 一个简单的例子

```javascript

// 定义接口

interface Person { // 接口一般首字母大写。有的编程语言中会建议接口的名称加上 I 前缀。

name: string;

age: number;

}

// 通过定义的接口，来约束对象（定义对象）

let tom: Person = {

name: 'Tom',

age: 25

};

```

### 接口特点

1. 固定属性-当你使用接口去约束你定义的对象后，你为你对象定义的属性/方法，都应该和接口一致，包括数量和命名

2. 可选属性-约束得太死难免会有不愉快的事情发生，所以接口允许设置可选属性，属性名后面加一个问号即可。

- 可选属性可以不存在。

3. 任意属性

- 使用 [propName: string] 定义了任意属性取 string 类型的值。

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

- 目前我认为这个属性有点鸡肋，放开一个属性，限制了可选属性和确定属性。

4. 只读属性

- 通过readonly定义只读属性

- 只读属性必须在定义类的时候定义并赋值，后期不可修改。

## 数组类型

1. 在ts中数组类型的定义有很多种

- 「类型 + 方括号」表示法

- 规定了数组成员的类型，不能在该数组中添加其他类型属性（null和undefined除外，上面有讲，他是其他类型子集）

```javascript (ts)

let arryList:number[] = [1,2,3,4,5] // 定义arrayList为一个数值数组

console.log(arryList);

arryList.push(10);

arryList.push(null);

arryList.push(undefined);

// arryList.push('1'); // 往里面添加字符串是会报错的。

console.log(arryList);

// 当然如果你定义的类型为any，那你就可以随意push进任意数据类型了

```

2. 用接口定义数组（接口是用来定义对象的类型和形状的。万物皆对象，数组也是对象咯）

```javascript (ts)

interface NewArry {

[a : number] : number; //定义这个数组对象的每一项只能是数值

}

let arr1:NewArry = [1,2,3,4,"1"];

```

3. 还有一种方式叫做数组泛型，在此不做分享，后面进阶内容有详细解说。

## 类数组

- 类数组不属于数组类型，比如arguments:

- 事实上常见的类数组都有自己的接口定义，如 IArguments, NodeList, HTMLCollection 等：

```javascript (ts)

function sum() {

let args: number[] = arguments; // 会报错

}

function sum2() {

let args: IArguments = arguments; // 使用他们自己的接口定义就不会报错

}

```

## 函数

- 在ts中函数也和js中一样，使用函数声明和函数表达式定义函数

- 不同的是ts对函数输入和输出进行了更多的约束

1. 定义规则

- 输入多余的（或者少于要求的）参数，是不被允许的。

2. 函数声明

```javascript (ts)

function fn1( x : number,y : number ) : number {

return x+y

}

```

3. 函数表达式

```javascript （ts）

/**

* 这里的 => 要和es6中的箭头函数区分，=> 在这里左边表示函数的参数定义，右边表示函数的返回值定义。

let fn2 : ( x: number, y : number ) => number = function( x: number, y: number) : number {

return x+y

}

```

4. 接口定义函数

```javascript (Ts)

// 定义接口

interface SearchFunc {

(source: string, subString: string): boolean;

}

// 接口约束函数

let fn3: SearchFunc;

fn3 = function(source: string, subString: string) {

return source.search(subString) !== -1;

}

```

5. 可选参数

- 可选参数使用？标识

- 需要注意的是，可选参数必须接在必需参数后面。换句话说，可选参数后面不允许再出现必须参数了

```javascript (ts)

function fn4(firstName: string, lastName?: string) {

if (lastName) {

return firstName + ' ' + lastName;

} else {

return firstName;

}

let tomcat = fn4('Tom', 'Cat');

let tom = fn4('Tom');

```

6. 参数默认值

- 在 ES6 中，我们允许给函数的参数添加默认值，TypeScript 会将添加了默认值的参数识别为可选参数

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

```javascript (Ts)

function fn5(firstName: string = 'Tom', lastName: string) {

return firstName + ' ' + lastName;

}

let tomcat = fn5('Tom', 'Cat');

let cat = fn5(undefined, 'Cat');

```

7. 剩余参数

- ES6 中，可以使用 ...rest 的方式获取函数中的剩余参数（rest 参数）

- 剩余参数只能是最后一个参数

```javascript (Ts)

function push1(array, ...items) {

items.forEach(function(item) {

array.push(item);

});

}

let a = [];

push(a, 1, 2, 3);

// 事实上，剩余参数 items 是一个数组。所以我们可以用数组的类型来定义它：

function push2(array: any[], ...items: any[]) {

items.forEach(function(item) {

array.push(item);

});

}

let a = [];

push2(a, 1, 2, 3);

```

8. 重载

- 什么是重载，就是函数的方法名相同，但是参数不同，调用的时候根据参数的不同去执行不同的执行体。

- js中不存在重载，如果方法名相同，他永远执行的是写在最后的一个方法。

- 重载允许一个函数接受不同数量或类型的参数时，作出不同的处理。

- 比如，我们需要实现一个函数 reverse，输入数字 123 的时候，输出反转的数字 321，输入字符串 'hello' 的时候，输出反转的字符串 'olleh'。

- 利用联合类型，我们可以这么实现

```javascript (Ts)

function reverse1( x: string | number) : number|string{

if( typeof x === 'number') {

return Number(x.toString().slipt('').reverse().join(''))

}else if(typeof x === 'string'){

return x.slipt('').reverse().join('')

}

/**

* 然而这样有一个缺点，就是不能够精确的表达，输入为数字的时候，输出也应该为数字，输入为字符串的时候，输出也应该为字符串。这时，我们可以使用重载定义多个 reverse 的函数类型

function reverse2(x: number): number;

function reverse2(x: string): string;

function reverse2(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，前几次都是函数定义，最后一次是函数实现。

* 注意，TypeScript 会优先从最前面的函数定义开始匹配，所以多个函数定义如果有包含关系，需要优先把精确的定义写在前面

```

## 类型断言

1. 语法

- <类型>值

- 值 as 类型 ==> 在 tsx 语法（React 的 jsx 语法的 ts 版）中必须用后一种。

2. 意义

- 之前提到过，当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法

- 这时我们就可以使用类型断言，将一个联合类型的变量指定为一个更加具体的类型，从而使用这个类型的属性

3. 类型断言，不是类型转换，断言一个联合类型中不存在的类型是会报错的。

```javascript (ts)

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;

}

```

## 内置对象

1. JavaScript 中有很多内置对象，它们可以直接在 TypeScript 中当做定义好了的类型。

- 内置对象是指根据标准在全局作用域（Global）上存在的对象。这里的标准是指 ECMAScript 和其他环境（比如 DOM）的标准。

2. ECMAScript

- 标准提供的内置对象有： Boolean、Error、Date、RegExp 等

- 我们可以在 TypeScript 中将变量定义为这些类型：

```javascript (ts)

let b: Boolean = new Boolean(1);

let e: Error = new Error('Error occurred');

let d: Date = new Date();

let r: RegExp = /[a-z]/;

```

3. DOM 和 BOM 提供的内置对象有：Document、HTMLElement、Event、NodeList 等。

```javascript (ts)

let body: HTMLElement = document.body;

let allDiv: NodeList = document.querySelectorAll('div');

document.addEventListener('click', function(e: MouseEvent) {

// Do something

});

```

4. 使用ts写node.js

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

npm install @types/node --save-dev

posted @ 2019-07-04 12:01 Byhua 阅读(273) 评论(0) 编辑收藏举报

刷新页面返回顶部

一目沉浮

TypeScript初识

公告