TypeScript基础学习

最终还是没有逃过ts的魔爪，哈哈哈也不能说魔爪，工作这段时间，感觉每天都在学习新的知识，最近在看源代码的时候看到了部分源码是用ts写的，之前没接触过，今天就来学习一下ts。

文章参考：

TypeScript超详细入门教程

TypeScript 入门教程——菜鸟教程

TypeScript 入门教程-阮一峰

Typescript 和 Javascript之间的区别

一、了解TypeScript

1、 TypeScript是什么

我在看ts代码的时候发现 大量的ts代码其实是在js的代码上增加了类型注释之后变成的，（这只是一个初学ts者的理解），对js玩家很友好。对js代码有兼容性。

2、TypeScript和javascript的区别

TypeScript 是JavaScript 对象的扩展。

TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 中的数据要求带有明确的类型，JavaScript不要求。

TypeScript 为函数提供了缺省参数值。

TypeScript 引入了 JavaScript 中没有的“类”概念。

TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。

3、TypeScript的优点

1. 静态输入
   静态类型化是一种功能，可以在开发人员编写脚本时检测错误。查找并修复错误是当今开发团队的迫切需求。有了这项功能，就会允许开发人员编写更健壮的代码并对其进行维护，以便使得代码质量更好、更清晰。
   
   
2. 大型的开发项目
   有时为了改进开发项目，需要对代码库进行小的增量更改。这些小小的变化可能会产生严重的、意想不到的后果，因此有必要撤销这些变化。使用TypeScript工具来进行重构更变的容易、快捷。
   
   
3. 更好的协作
   当发开大型项目时，会有许多开发人员，此时乱码和错误的机也会增加。类型安全是一种在编码期间检测错误的功能，而不是在编译项目时检测错误。这为开发团队创建了一个更高效的编码和调试过程。
   
   
4. 更强的生产力
   干净的 ECMAScript 6 代码，自动完成和动态输入等因素有助于提高开发人员的工作效率。这些功能也有助于编译器创建优化的代码。
   
   

4、TypeScript特性

类型批注和编译时类型检查 ：在编译时批注变量类型

类型推断：ts中没有批注变量类型会自动推断变量的类型

类型擦除：在编译过程中批注的内容和接口会在运行时利用工具擦除

接口：ts中用接口来定义对象类型

枚举：用于取值被限定在一定范围内的场景

Mixin：可以接受任意类型的值

泛型编程：

名字空间：名字只在该区域内有效，其他区域可重复使用该名字而不冲突。

元组：元组合并了不同类型的对象，相当于一个可以装不同类型数据的数组。

Await：

二、TypeScript基础知识

1、安装

npm install -g typescript 

编译：

tsc hello.ts //hello.ts是文件名 

2.hellow world ts实例

function sayHello(person: string) { 
    return 'Hello, ' + person; } let user = 'Tom'; console.log(sayHello(user)); 

在上面的代码中 ：string 就是我们为person指定的变量的类型。其他语法与js相同。

3、原始数据类型

4、任意值 （any）

mix类型：可以接受任意类型的值

注：在ts中 如果一个变量没有被指定类型，那么它默认就是any类型

5、类型推断（Type Inference）

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

6、联合类型（Union Types）

let pc： string | number; pc = one ； pc = 1 ; 

在上面这个例子中 pc这个变量被同时定义为string和number，这就是所谓的联合类型。

联合类型中 数据类型中用 | 隔开

7、接口（Interfaces）

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

1、定义的变量属性数量要和接口的保持一致，不能多也不能少

2、接口中可以使用任意属性的方法来定义接口

 name: string; age?: number; [propName: string]: any; } let tom: Person = { name: 'Tom', gender: 'male' }; 

3、接口中可以使用readonly定义只读属性

 readonly id: number; 

注意，只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候

8、数组

在ts中 数组有多中定义方式

1、类型 + 方括号」来表示数组：

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

2、使用数组泛型（Array Generic） Array 来表示数组：

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

3、接口也可以用来描述数组：

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

4、用 any 表示数组中允许出现任意类型：

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

9、函数

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

ts的函数参数必须和定义的保持一致，不能多也不能少

10、类型断言

值 as 类型 如果是在react中使用 必须使用这个 <类型>值 

类型断言

这一部分内容比较多 我单独写一篇文章

11、声明文件

这里补充几个概念：

声明语句：在我们使用第三方库的语法时，ts不认识此语法 因此我们要先写出声明语句来标识使用了该第三方库

声明文件：把所有的声明语句放到一个单独的文件中，这个语句就是声明文件。声明文件必需以 .d.ts 为后缀。

第三方声明文件：有一些常用的声明文件已经是写好的，比如jQuery文件。直接下载安装即可

npm install @types/jquery --save-dev 

declare var 声明全局变量

declare function 声明全局方法

declare class 声明全局类

declare enum 声明全局枚举类型

declare namespace 声明（含有子属性的）全局对象

interface 和 type 声明全局类型

export 导出变量

export namespace 导出（含有子属性的）对象

export default ES6 默认导出

export = commonjs 导出模块

export as namespace UMD 库声明全局变量

declare global 扩展全局变量

declare module 扩展模块

///
三斜线指令

这块内容也非常多 后续单独补

12、内置对象

在ts中 沿用了js中的内置对象。

这些在ts中都是可以直接使用的。