• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

TypeScript,初次见面,请多指教 ?

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

为什么用 TS ?

说实话,最开始并没有想把 TS 用到实际项目中来,一来是感觉“类型”会限制 JS 的优势(好吧,就是浪写浪惯了);二来听闻 TS + Redux 的酸爽滋味,有点望而却步;三来 TS 环境使用的库需要加类型的声明,很多库并不支持,有点担心推进的流畅度 ...

这个时候,就需要有一股无形的力量推你一把。推我的是团队正在日益普及 TS, 我希望推动你的可以是这篇文章 ~

接下来,会有 React + TS 的项目为背景,介绍我在初学 TS 开发项目中遇到的一些问题,希望对你有所帮助。

一. 如何优雅的声明类型

1. 基础

不就是比 JS 多了一个类型声明吗?老夫撸起袖子拎起键盘就是一梭子:

interface Basic {
  num: number;
  str: string | null;
  bol?: boolean;
}

轻轻松松,五种 JS 值类型就声明好了。那数组、函数呢?再来:

interface Func {
  func(str: string): void;
}

interface Arr {
  str: string[];
  mixed: Array<string | number>;
  fixedStructure: [string, number];
  basics: Basic[];
}

除此之外,竟然还可以定义自己的类型呢,比如常用的回调函数,在声明处需要指定回调函数的类型:

event.on('change', function() {});

那这个 on 方法需要如何声明呢?试试看 Function当 cb 函数的类型呢

on(type: string, cb: Function): {}

然后就恭喜了,你会得到一个 tslint error :

庆幸的是,在这个 error 里面它告诉了你应该怎么做:声明一个专用的函数类型就可以了:

type Cb = () => void;

on(type: string, cb: Cb);

至此,我们的 TS 人生算是起步了


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
typescript精简版1:用ts表示常见数据类型发布时间:2022-07-18
下一篇:
Typescript高级类型与泛型难点详解发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap