TypeScript

1、为什么要用TypeScript?

因为JavaScript 弱类型以及没有命名空间约束,导致很难模块化,不适合开发大型项目。

引入TypeScript方法解决了两个问题:

(1)编译时强类型

可以申明变量的类型,那么其他类型的赋值将会引起编译错误。

强类型还有一个最大的好处就是智能提示,例如你可以知道当前变量具有哪些属性和方法。

(2)模块化

利用TypeScript的关键词module,可以达到类似于命名空间的效果,而export可以控制是否被外部访问。module可以嵌套,访问时用‘.’作分隔符,也可以用“.”分隔符来简写module的嵌套。只有带export关键词的才可以被外部访问,module可以合并,但是非export的对象在其他module下,即使是同一个名称,也不能被访问。

2、TypeScript的优点

(1)TypeScript增加了代码的可读性和可维护性

类型定义是最好的文档,大部分的函数看着类型的定义就可以知道如何使用了

可以在编译阶段就发现大部分错误,比在运行时出错好

增强了编辑器和IDE的功能,包括代码补全,接口提示,跳转到定义,重构等

(2)TypeScript非常的包容

TypeScript是JavaScript的超集,js文件可以直接重名为.ts即可

即使不显示的定义类型,也能够自动做出类型推论

可以定义从简单到复杂的几乎一切类型

即使TypeScript编译报错,也可以生成JavaScript文件

兼容第三方库,即使第三方库不是用TypeScript写的,也可以编写单独的类型文件供TypeScript读取

(3)TypeScript拥有活跃的社区

大部分第三方库都有提供给TypeScript的类型定义文件

Google开发的Angular2就是使用TypeScript编写的

TypeScript拥抱了ES6规范,也支持部分ESNext草案的规范

3、TypeScript的缺点

前端开发需要理解Interfaces,泛型,类,枚举类型类似于后台的概念

增加了一些开发成本,要多些一些类型定义,不过对于一个需要长期维护的项目,TypeScript能够减少其维护成本

集成到构建流程需要一些工作量。

可能和一些库结合的不是很完美。

4.TypeScript的基本用法

TypeScript可以实现类,接口,枚举,泛型,方法重载等,用简洁的语法丰富了javaScript的使用。没有抛弃javaScript的语法,做成了其超集,易上手。

原始数据类型:布尔值,数值,字符串,null,undefined,Symbol

任意值:any --声明时的默认类型

类型推论: TypeScript会再名优明确的指定类型的时候推测出一个类型,这就是类型推论。

联合类型:使用“|”分隔每个类型。string | number

对象的类型: 接口, 数组类型,函数类型

类型断言

声明文件

内置对象

 

下面以todo project为例,进行Typescript的TDD开发:

(1)创建工程

npm install -g typescript 
npx create-react-app my-todo --typescript

   (2)Add Jest

yarn add jest @types/jest ts-jest -D

 (3)拆分

1.component: TodoContainer

2.component: contents include input box && todoList

3.component: input box —>show && blur

4.component: todo-list —>show && change

5.component: check box ‘Mark all as complete’ —>click

6.component: footer include show items counts && clear button  —>show && change

7.component: clear button  —>click

 (4)TDD编码 (测试驱动开发)

先写xx.test.tsx,再写实现 xx.tsx  

5、相关的学习资料

接口,类型定义参考:

https://devdocs.io/typescript/handbook/interfaces#extending-interfaces

 

react 应用参考:

 

https://typescript.bootcss.com/tutorials/react.html

 

TDD 参考:

 

https://jimmylv.github.io/reveal-md.slide/#/title

 

TypeScript基础教程:

 

https://ts.xcatliu.com/basics/type-of-array

原文地址:https://www.cnblogs.com/torri/p/11926569.html