TypeScript,初次见面,请多指教 ?
为什么用 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 人生算是起步了
TypeScript,初次见面,请多指教 ?的更多相关文章
- Python,初次见面请多指教
特点 1.可读性强: 可读性远比听上去重要的多得多.一个程序会被反复的修改,可读性强意味着让你可以在更短的时间内学习和记忆,直接提高生产率. 2.简洁,简洁,简洁: 研究证明,程序员每天可编写的有效代 ...
- 端午节佳节从CSDN博客搬家来这,请多多指教
端午节佳节从CSDN博客搬家来博客园,请多多指教
- 初次接触nodejs,请多指教。
一 安装nodejs 1.下载node.js.在http://nodejs.org/download/下载最新版的node.exe文件,我下载时是v0.10.33.下载完成后,在F盘新建nodejs ...
- 仿照jQuery写一个关于选择器的框架(带了注释,请多多指教~)
var select = (function () { //这是一个异常与捕获的代码,它表示的意思是:如果push方法出现了错误那么就需要重写push方法 try { //这边是自己模拟一个场景,来使 ...
- 打开手机摄像头扫描二维码或条形码全部操作(代码写的不好,请提出指教,共同进步,我只是一个Android的小白)
(1)下载二维码的库源码 链接:http://pan.baidu.com/s/1pKQyw2n 密码:r5bv 下载完成后打开可以看到 libzxing 的文件夹,最后添加进 Android Stu ...
- 两种开源聊天机器人的性能测试(二)——基于tensorflow的chatbot
http://blog.csdn.net/hfutdog/article/details/78155676 开源项目链接:https://github.com/dennybritz/chatbot-r ...
- oracle练习--@余生请指教多
--1.查询出每个员工的编号,姓名,职位select Emp_id,Ename,job from emp;--2.查询每个员工的岗位名称select Ename,job from emp;--3.计算 ...
- 我是sakebow:新人报到,请多关照!
大家好 这里是sakebow,实际上是从CSDN转生过来的(说得好像在CSDN死了一样),在那边是ordinary_brony.我的GitHub名字也是sakebow 来这里干什么 主要还是想试试做个 ...
- 列表页url参数格式分析【求指教】
运营对列表页url制定静态化模式,与区区观点相悖.遂请大家指教点解. 动态参数包含6个,分别是: 1认证(有机),2品类(水果),3地区(丰台),4状态(众筹中),5排序(评分),6分页 使用状态非常 ...
随机推荐
- c# ef 排序字段动态,构建动态Lambda和扩展方法OrderBy
1.动态构建排序 Lambda /// <summary> /// 获取排序Lambda(如果动态排序,类型不同会导致转换失败) /// </summary> /// < ...
- 盒子模型/div标签/益出处理
/* <div></div>没有任何功能,不属于功能标签 可以放文字,图片以及各种元素的块标签 常常用来布局 span标签属于行内标签,无法设置宽高 */ <!docty ...
- ubuntu16.04开机时的.local问题
开机时显示:您的当前网络有.local域,我们不建议这样做而且这与AVAHI网络服务探测不兼容,该服务已被禁用 解决方法: 在终端输入:sudo gedit /etc/default/avahi-da ...
- topic的leader显示为none的解决办法
1.查看kafka的topic详细信息 bin/kafka-topics.sh --zookeeper 127.0.0.1:2181 --topic test --describe 配置delete. ...
- 手把手教你在CSDN博客中插入图片之剑走偏锋系列
1.在博客园注册账号.你没有看错,就是博客园,在图像上传方面博客园比CSDN这个垃圾强太多了. 2.在博客园进入随笔撰写编辑模块,点击上传图像按钮(点最黄的那个,别点错了). 3.弹出如下窗口 ,点击 ...
- firefox中遇到的offsetX的问题
项目中遇到一个问题,滚轮缩放或鼠标移动svg的时候,当鼠标放置在svg元素上时,firefox浏览器中的offsetX和offsetY是不准确的,导致缩放和移动会产生便宜,其实问题不是firefox计 ...
- [Swift]LeetCode74. 搜索二维矩阵 | Search a 2D Matrix
Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...
- [Swift]LeetCode748. 最短完整词 | Shortest Completing Word
Find the minimum length word from a given dictionary words, which has all the letters from the strin ...
- This relative module was not found:
晚上项目敲完,关机睡觉! 早上醒来-----打开项目,惊呆了 !This relative module was not found: 如图 这个报错,我当时怎么也没看懂!!! 后来经过测试 ...
- Linux 虚拟网络设备详解之 Bridge 网桥
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 前面几篇文章介 ...