第三十二期:对TypeScript的简单理解

2022-07-15 10:11:09 浏览数 (1)

我不喜欢写那些具体实现某个功能的东西,然后咔咔贴出来一堆代码。

因为如果我们真的需要去实现某个功能,那么首先我们自己就会去思考实现功能的方案,然后用代码将自己的想法变成现实,在这个从思考到实践的过程当中,才能真正的学习到我们想要的知识。

我更喜欢去分享一些思考的过程,或者说是学习的方法。

TypeScript

虽然从早几年TypeScript的热度已经非常高了,但是实际上除了大厂里某些项目是真正的用TS进行开发以外,其他的也还是我们现在写的es6语法居多,当然了,大厂里项目其实用TS开发的项目其实也不多。

如果对TS语法特别熟悉,那么我们可以做很多有趣的事情,比如我们可以毫无违和感的切换到Flutter的开发中去,因为Fullter使用的Dart语言,跟TypeScript的差别不大。我们也可以用白鹭引擎去开发一些游戏,因为语法跟TypeScript基本上是一样的。

很多人在学习TypeScript的时候,或者看到比较复杂的TypeScript代码会觉看不明白,不明白为什么要那样写。

比如这段代码:

代码语言:javascript复制
export declare class Store<S> {
  constructor(options: StoreOptions<S>);

  readonly state: S;
  readonly getters: any;

  replaceState(state: S): void;

  dispatch: Dispatch;
  commit: Commit;

  subscribe<P extends MutationPayload>(fn: (mutation: P, state: S) => any, options?: SubscribeOptions): () => void;
 
 
}

export interface MutationPayload extends Payload {
  payload: any;
}

export interface Payload {
  type: string;
}

其实,只要我们理解了TypeScript能够解决什么问题,就可以很容易的看明白,也可以很容易的写出来TypeScript的代码。

我自己的理解是TypeScript基本解决的是类型检查的问题,可以提前发现我们代码中的错误,然后顺带着解决了文档的问题。TypeScript写习惯了,你会发现其实不用文档注释,我们也可以很轻松的知道代码里写的是什么。

上面的代码是从Vuex的源码中的类型定义的文件里复制的,它定义了一个名叫Store的类,构造函数的参数options是一个StoreOptions的类,它有两个只读属性state和getters,dispatch属性是Dispatch类,commit需要符合Commit的格式。

然后有一个subscribe方法。为什么subscribe是一个方法?因为按照平时的写法它应该这样写:

代码语言:javascript复制
function subscribe (fn,options){
  console.log('subscribe')
}

然后它的参数fn接受两个参数mutation和state:

代码语言:javascript复制
function fn (mutation,state){
  console.log('fn')
}

上面TS的中定义的subscript首先是一个函数,因为它最后的表现形式是:

代码语言:javascript复制
()=>void

表示的是一个没有返回值的函数。

然后它接受两个参数,fn和options,options后面带了个问号,表示可选参数。

然后参数fn又是一个函数,fn自己也接受两个参数,mutiation和state,当然冒号后面声明了参数的类型。

举个例子,参数P 继承了 MutationPayload,MutationPayload又继承于interface 定义的Payload,其实就是这么个关系。

当然,真正能够灵活运用需要我们对它的基本概念有个深刻的理解,比如类,接口,泛型等等,这些需要我们自己去体会,去理解。

平时开发中,还是这种代码写的比较多一些:

代码语言:javascript复制
function getAddress(province:string,village:string):string{
  return province   village;
}

0 人点赞