Typescript 2+迷你书 :从入门到不放弃

前言

  • 文中会穿插部分ES6&7的代码(此处不在解释什么作用域什么的,作用什么的),能言简意赅的绝不废话哈;
  • 文中的ts或者ts2皆指typescript;

这不是一个合格的手册,要想深入和更全应该看官方的手册文档加以练习和尝试


Typescript 三问三答

  1. Typescript是什么!
    • ts不是编程语言,可以理解为一种补充(超集),让JS具有后端的部分特点(类型推断)
    • ts不等同于js,但是可以理解为类似CoffeeScript,可以编译成js,跨平台且项目是开源的
  2. Typescript能做什么!
    • 能提升你的代码质量,只要你愿意遵循它的套路(标准)
    • 能简化你的代码复杂程度
      • ts对于ECMAScript的特性和支持一直很超前,有些特性还没发布,ts上就能使用了(各种语法糖,还能转编译到ES5乃至ES3)
      • ECMAScript的部分特性还是参考ts的,其实微软也是TC39委员会成员之一啦
      • 有部分后端语言的特性,比如implements,extends,inteface,abstract等。。
  3. Typescript难么
    • 不夸大的说,若是常规使用,上手还是相当快的(有后端经验的小伙伴)
    • 浓浓的C#风格,目前最新版本是typescript 2.2,我简称它为ts2

注:文章的部分内容是会结合实际应用经验来说,基于ts最新的2.2来说;


迷你文档手册

基础类型及常规声明

众所周知:JS中有这么几种类型的数据: Symbol,boolean,Number,Object[Array在js中也属于对象],undefind,null,String;

那么在TS中如何来声明一个变量或者对象亦或者声明返回对象的值类型呢?

// 最简单的一个声明, 在需要推导的后面加上冒号和类型
let a: number;  

/*但是有些人有强迫症的,比如会出现这类的写法,但是这类写法在最新版
*中会变成一个警告,说是该类型没必要再写推导类型了,建议移除;
*/
let b: number = 0; // 会出现警告,应该改成下面这个
let c: boolean = false;

let b = 0; // 推荐的写法;
let c = false;

//--------------- 在TS中类型会比JS稍微多一些,记得ts中类型全部是小写---------------//

let temp1: number; // 二进制,八进制,浮点,整数皆归这类
let temp2: string; // 字符串类型,ES6的模板字符串也属于这货
let temp3_1: number[]; // 代表返回值均为数字的数组
let temp3_2: Array<any>; // 数组泛型,代表数组内可以包含所有类型
let temp3_3: [string,number,boolean]; 元组数组,子元素的类型强制一一对应
let temp4: any; // any代表任意类型都可以,万金油
let temp5: void;  // 只能赋值undefined或者null
let temp6: undefined; // 只能赋值undefined,在--strictNullChecks模式下只能赋值给: void
let temp7: null; // 只能赋值null,在--strictNullChecks模式下只能赋值给: void
let temp8: object; // 类似Object.create的皆可以

//------ 特殊类型
// 对于异常这类的永远得不到正确返回值的,使用: never
try{
 ...
}catch(e): never{
    ...
}

// 不需要推断的--- 类型断言,简言之,我不需要ts推导,本来就知道这货是什么
// 最常见的是用于引入一些第三方的js库的时候,比如echarts的作用域必须全局window
const echarts = (<any>window)['echarts'];

接口

ts中的作用,可以简单的理解为规范类型

export interface Personal{
    name: string; 
    age: number;
    sex: string;
    colthColor?: string[]; // 衣服颜色,[?]可选参数,返回字符串数组
    readonly idCard: number | string; 
    /* readonly是新版本加进来的,和const大同小异,
    *两者区分readonly用于接口声明而const能作用于变量, 
    *后面number | string其实另外一部分的内容点,叫做联合推导,就是值可以是数字或者字符串
    */
    // 接口也能描述函数参数这些,写法都差不多
}

//------使用,比如用于接口上传 ----- 记得导入
// 接口内的字段及类型会强制对应,不然会报错,这会让代码更加严谨;
uploadUserInfo( personalParam: Personal ): Observable<any> {
    return this.authHttp.upload( environment.baseUrl + 'xxxx/UpdateInfo', personalParam );
}

// 接口也可以用实现某些方法,和C#或Java里接口的基本作用一样
// 关键字implements
export class MitUpdateUserInfo implements  Personal{
 ...
}

// 接口与接口之间可以实现单继承或者多继承
// 关键字extends
interface extraParam{
    favority:any
}

interface Personal extends extraParam{
    ....
}

ts内的类其实就是es6的类写法,只是可以完整支持而已

export class test{
    public a: number; // 在类直接声明的作用域整个类内,默认为public,写不写看自己了
    constructor(){
        // 构造函数,构造函数必须可以带上什么范围
        // public,private,protected
    }

    test(){
        函数。。。。
    }
}

/** 修饰符:更细致的解释请看官方文档手册
* public : 默认,公共开放
* private: 自身类使用
* protected : 派生类可以使用【子类这类】
* readonly : 只读
*/


// 同理类也是必然可以继承的,但是不能多继承,不能多继承,不能多继承
// 依旧关键字是extends
export class test1{
    constructor(private hh:string){
        this.hh = hh;
    }

    test(a){
        console.log(this.hh + a);
    }

}

export class test2 extend test1{
    public a = 'sfasdf';
    constructor(a:string){
        super(a);
    }

    test(){
        super.test(); // 继承方法
    }
}


// 当然,类中不可能少了抽象类,这货的作用就是让一堆人继承实现它带的东西
export abstract class test3 {
  constructor(public name: string) {

  }

  eat(): void {
    console.log(this.name + '吃吃吃');
    // 可以在抽象内实现默认方法,然后子类复写或者直接用
  }

  abstract move(): void;  // 等着子类来实现动的方法
}

// 也有set和get,就是getter和setter

函数 | 泛型 | 枚举 | 交叉及联合类型

  • 函数
exrpot class test4{
    constructor(){}

    sun(leaf:string,drink?:boolean):void{
        ...
        // 传入的参数leaf为字符串类型,该方法没有任何返回
        // 水为可选参数,传入为布尔类型
    }
}

// 应该有人想问this,但是this的范围该怎么样就怎么样,在被调用的上下文中确定
//适量的使用箭头函数会让你写起来更舒服复制代码
  • 泛型 泛型可以简单粗暴的理解为,你传入什么类型,就返回什么类型的值
// TS中的泛型只能用于接口,类(实例),不能用于枚举和命名空间
// 泛型用符号T表示,不一定要用<T>的写法
identity<T>(arg: T): T {
    return arg;
}
  • 枚举 枚举其实就是一组常量,内部的关系是互相映射的
// 这里拿官方的文档例子就很清晰了。。
enum Enum {
    A
}
let a = Enum.A;
let nameOfA = Enum[Enum.A]; // "A"
  • 交叉类型

交叉类型就是复合类型,把多种类型汇总为一种类型,用 & 符号关联 , 常见用于多个对象的组合

test(args1: A,args2: B ): A & B{
   ...
}复制代码
  • 联合类型

就是类型可以或!!!

let a: number | string | null;  // 即a可以赋值为这三种类型的任意一种

杂七杂八的总结

至此,TS2的常规用法相信大部分小伙伴都能一知半解了。。至于更深入的,其实用的并不多,我自己也没用到那些; 【d.ts和tsconfig.json的写法请看官方文档,有很详细的教程】, 安装这些就不说了

在这里汇总下我之前遇到的问题及解决方案;

  1. 引入第三方库该怎么破,比如主流的jquery啥米的,会报类型错误啥的。。 传送门:github.com/DefinitelyT… 安装对应的types,即可解决。。。至于上面没有的只能自己动手丰衣足食了【看官方文档然后自己写个】; 然后放到对应的文件顶部,用/// <reference types="..." />引入
  2. 如何声明一个全局变量? 写一个公用的xx.d.ts;在里面用写,大致如下
declare var System: any;
declare var $: any;
declare var jQuery: any;
declare var _: any;
declare var echarts: any;
declare var BMap: any;
declare var BMapLib: any;

额外的一堆堆的废话,有些新人经常在群里问ES6模块导入有几种方式和什么意思,这里我也来个解释。。

// 从组件中导入AppComponent这个类
import { AppComponent } from './app.component'; 

// 导入所有内部可以导出的
import * from './app.routes';

// 导入某个功能并且把它别名化(alias)
import { MitNotificationsModule as notify } from './widgets/mit-notifications/mit-notifications.module';

// 导入两个功能(成员)
import { UserAdd , UserDelte } from "User.module"; 

// 上面两个的结合
import { UserAdd , UserDelte as d } from "User.module"; 

// 导入默认成员及成员
import defaultMember, { UserAdd  } from "User.module"; 

// 导入默认成员且重命名
import defaultMember, * as name from "module-name"; 

// 导入整个模块,慎重使用,尽量导入一些你需要用到的,避免这种,有可能你们有部分代码会影响全局
import "global.module";


//------- 说了导入,那么顺便扯扯导出把
// 导出的花样也挺多,下至变量常量,上至对象函数
// 比较有差异的就是default 。。 其他的和上面大致对应
export default const name = 'crper'; // 默认成员,一个模块只有一个至多一个默认
export { a , b} // 导出a,b
....

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏开发 & 算法杂谈

Coderbyte-Challenger之Letter Capitalize(单词字母大写)

Have the function LetterCapitalize(str) take the str parameter being passed and...

843
来自专栏deepcc

javascript 中的 delete

3548
来自专栏Java技术栈

10 道关于 Java 泛型的面试题

这是在各种Java泛型面试中,一开场你就会被问到的问题中的一个,主要集中在初级和中级面试中。那些拥有Java1.4或更早版本的开发背景的人都知道,在集合中存储对...

1022
来自专栏黑泽君的专栏

java基础学习_IO流03_字符流、IO流小结、案例_day21总结

812
来自专栏分布式系统和大数据处理

Adapter模式

生活中有很多Adapter的例子。比方说,你买了一款舒适、手感极佳的键盘,它是P/S接口的,然而你的新式电脑已经淘汰了P/S接口,只提供USB接口。此时,为了能...

992
来自专栏PHP在线

PHP 编码规范

该 PHP 编码规范基本上是同 PSR 规范的。有一部分的编码规范 PSR 中是建议,此编码规范会强制要求。 此编码规范 是以 PSR-1 / PSR-2 / ...

1562
来自专栏JMCui

MongoDB系列六(聚合).

 一、概念     使用聚合框架可以对集合中的文档进行变换和组合。基本上,可以用多个构件创建一个管道(pipeline),用于对一连串的文档进行处理。这些构件包...

6825
来自专栏IMWeb前端团队

走进Sass殿堂

最近在学习sass,从sass新手的角度做一个简单的总结,总结的不对的地方期望各位大大们能多多指点,本文是针对sass3.4做的一个总结~ 一、变量篇 1.1 ...

18910
来自专栏游戏杂谈

Objective-C 入门笔记

既然有头文件,所以很多人会拿它与C++进行类比,它最重要的三个特性是:Message、Category、Protocol,与C++类比,二者之间的不同:

963
来自专栏信数据得永生

JavaScript 编程精解 中文第三版 二、程序结构

41115

扫码关注云+社区