为什么用 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,初次见面,请多指教 ?的更多相关文章

  1. Python,初次见面请多指教

    特点 1.可读性强: 可读性远比听上去重要的多得多.一个程序会被反复的修改,可读性强意味着让你可以在更短的时间内学习和记忆,直接提高生产率. 2.简洁,简洁,简洁: 研究证明,程序员每天可编写的有效代 ...

  2. 端午节佳节从CSDN博客搬家来这,请多多指教

    端午节佳节从CSDN博客搬家来博客园,请多多指教

  3. 初次接触nodejs,请多指教。

    一  安装nodejs 1.下载node.js.在http://nodejs.org/download/下载最新版的node.exe文件,我下载时是v0.10.33.下载完成后,在F盘新建nodejs ...

  4. 仿照jQuery写一个关于选择器的框架(带了注释,请多多指教~)

    var select = (function () { //这是一个异常与捕获的代码,它表示的意思是:如果push方法出现了错误那么就需要重写push方法 try { //这边是自己模拟一个场景,来使 ...

  5. 打开手机摄像头扫描二维码或条形码全部操作(代码写的不好,请提出指教,共同进步,我只是一个Android的小白)

    (1)下载二维码的库源码 链接:http://pan.baidu.com/s/1pKQyw2n 密码:r5bv 下载完成后打开可以看到 libzxing 的文件夹,最后添加进 Android  Stu ...

  6. 两种开源聊天机器人的性能测试(二)——基于tensorflow的chatbot

    http://blog.csdn.net/hfutdog/article/details/78155676 开源项目链接:https://github.com/dennybritz/chatbot-r ...

  7. oracle练习--@余生请指教多

    --1.查询出每个员工的编号,姓名,职位select Emp_id,Ename,job from emp;--2.查询每个员工的岗位名称select Ename,job from emp;--3.计算 ...

  8. 我是sakebow:新人报到,请多关照!

    大家好 这里是sakebow,实际上是从CSDN转生过来的(说得好像在CSDN死了一样),在那边是ordinary_brony.我的GitHub名字也是sakebow 来这里干什么 主要还是想试试做个 ...

  9. 列表页url参数格式分析【求指教】

    运营对列表页url制定静态化模式,与区区观点相悖.遂请大家指教点解. 动态参数包含6个,分别是: 1认证(有机),2品类(水果),3地区(丰台),4状态(众筹中),5排序(评分),6分页 使用状态非常 ...

随机推荐

  1. ubuntu 16.04卸载不必要默认安装软件

    两个办法,一个在ubuntu软件里一个一个删,明显的windows下做法. 还有一个通过终端来删除.ctrl+alt+t打开终端. 1.卸载libreoffices(要删一起删了,然后去装office ...

  2. SQL Server Service Broker创建单个数据库会话(消息队列)

    概述 SQL Server Service Broker 用来创建用于交换消息的会话.消息在目标和发起方这两个端点之间进行交换.消息用于传输数据和触发消息收到时的处理过程.目标和发起方既可以在同一数据 ...

  3. Javascript中的this关键字用法详解

    在javascript里面,this是一个特殊的对象,它不像其他编程语言那样,是存储在实例中的值,直接指向此实例. 而是作为一个单独的指针,在不同的情况之下,指向不同的位置,这也是为什么我们会将它搞混 ...

  4. [Swift]LeetCode52. N皇后 II | N-Queens II

    The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no two queens ...

  5. linux入门--Linux发行版本详解

    从技术上来说,李纳斯•托瓦兹开发的 Linux 只是一个内核.内核指的是一个提供设备驱动.文件系统.进程管理.网络通信等功能的系统软件,内核并不是一套完整的操作系统,它只是操作系统的核心.一些组织或厂 ...

  6. 使用jquery日期选择器flatpickr.js,使用js动态创建input元素时插件失效

    最近写页面时需要用到,日期选择器,网上搜索了一些插件,最后使用了flatpickr.js.我是从npm 上拉下的依赖  npm install flatpickr --save 随后在页面中引入css ...

  7. React 实现拖拽功能

    实现效果:(可戳 https://codepen.io/wenr/pen/EGEQxp 查看) 因为工作中会用到 JIRA 所以想实现一下相似的功能,顺便学习一下 H5 的拖拽.不支持拖拽改变顺序,感 ...

  8. Xapian使用入门

    关键字:搜索引擎.Xapian 一篇拖了两三年的入门总结文章,今天发出来,一方面是自己的总结,另一方面是给自己和他人的备忘.读者需要对搜索引擎有初步了解,譬如了解倒排.term.doc.相似度打分等概 ...

  9. Python内置函数(5)——bin

    英文文档: bin(x) Convert an integer number to a binary string. The result is a valid Python expression. ...

  10. 学习-xlsxwriter模块

    Xlsx是python用来构造xlsx文件的模块,可以向excel2007+中写text,numbers,formulas 公式以及hyperlinks超链接. 可以完成xlsx文件的自动化构造,包括 ...