美文网首页typescript
ts学习(基础篇二)

ts学习(基础篇二)

作者: 爱吃土豆丝杉杉 | 来源:发表于2019-07-11 20:14 被阅读0次

类型别名

类型别名是用来给一个新类型取一个新名字,一般用作优雅代码的时候使用,参考用法:

// 类型别名全都是以type开头
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;

我感觉这个用的意义不太大,用的话也就是使代码更加的优雅好看。而且类型别名常用于联合类型。

字符串字面类型变量(常用)

字符串字面量类型用来约束取值只能是某几个字符串中的一个。

type test = 'click' | 'scroll' | 'mousemove';
const test1: test = 'no';
// 开始报错了!!!只能是上面click,scroll和mousemove其中的一个

元组

名字起的很玄幻,,其实没什么大用,定义类型的时候,合并不同类型,并只针对于数组。参考代码:

let xcatliu: [string, number] = ['Xcat Liu', 25];

唯一有一点注意的就是,加入想给他初始化赋值的时候,那么值必须将所有的类型都涵盖到

let xcatliu: [string, number] = ['Xcat Liu'];

// index.ts(1,5): error TS2322: Type '[string]' is not assignable to type '[string, number]'.
//   Property '1' is missing in type '[string]'.

枚举(常用)

枚举使用enum关键字来进行定义。一般分为两个,一个是常数项,一个是计算所得项。示例代码如下:

enum test = {Sun, Mon, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true

枚举成员会被赋值从0开始递增的数字,同时也会对枚举值到枚举名进行反向映射。事实上,上面的例子可以编译为:

var Days;
(function (Days) {
    Days[Days["Sun"] = 0] = "Sun";
    Days[Days["Mon"] = 1] = "Mon";
    Days[Days["Tue"] = 2] = "Tue";
    Days[Days["Wed"] = 3] = "Wed";
    Days[Days["Thu"] = 4] = "Thu";
    Days[Days["Fri"] = 5] = "Fri";
    Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));

使用枚举的时候尽量不要设置想同下标的枚举,因为会造成覆盖的情况,而且ts并不会报错。

常数枚举是我们经常用的枚举。

const enum Directions {
    Up,
    Down,
    Left,
    Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
编译的结果是:
directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

类(重点)

在传统方法中,JS通过构造函数实现类的概念,但是在ES6中,我们可以使用Class来进行。下面来进行一些基本的概念:

  • 类(Class):定义了一件事物的抽象特点,包含它的属性和方法
  • 对象(Object):类的实例,通过 new 生成
  • 面向对象(OOP)的三大特性:封装、继承、多态
  • 封装(Encapsulation):将对数据的操作细节隐藏起来,只暴露对外的接口。外界调用端不需要(也不可能)知道细节,就能通过对外提供的接口来访问该对象,同时也保证了外界无法任意更改对象内部的数据
  • 继承(Inheritance):子类继承父类,子类除了拥有父类的所有特性外,还有一些更具体的特性
  • 多态(Polymorphism):由继承而产生了相关的不同的类,对同一个方法可以有不同的响应。比如 Cat 和 Dog 都继承自 Animal,但是分别实现了自己的 eat 方法。此时针对某一个实例,我们无需了解它是 Cat 还是 Dog,就可以直接调用 eat 方法,程序会自动判断出来应该如何执行 eat
  • 存取器(getter & setter):用以改变属性的读取和赋值行为
  • 修饰符(Modifiers):修饰符是一些关键字,用于限定成员或类型的性质。比如 public 表示公有属性或方法
  • 抽象类(Abstract Class):抽象类是供其他类继承的基类,抽象类不允许被实例化。抽象类中的抽象方法必须在子类中被实现
  • 接口(Interfaces):不同类之间公有的属性或方法,可以抽象成一个接口。接口可以被类实现(implements)。一个类只能继承自另一个类,但是可以实现多个接口

参考:https://ts.xcatliu.com/advanced/class

泛型(常用)

泛型是指在定义函数,接口和类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。

泛型参考代码:

function createArray<T>(length: number, value: T): Array<T> {
    let result: T = [];
  for (let i = 0; i < length; i ++) {
    result[i] = value;
  }
  return result;
}
createArray<string>(3, 'x') 或者不指定类型,让泛型自己自动确定类型 createArray(3, 'x')

多个类型参数:

function swap<T,U>(tuple: [T,u]): [U, T]{
  return [tuple[1], tuple[0]];
}
swap([7, 'seven']); // ['seven', 7]

但是使用泛型的时候会存在泛型约束

最后的最后,代码检查

TS的代码检查主要参考两种方式:TSlint 或者使用 Eslint + typescript-eslint-parser

TSlint的优点在于,能够通过typescript的语法解析,利用类型系统做一些Eslint做不到的检查,

TSLint 的优点:

  1. 专为 TypeScript 服务,bug 比 ESLint 少

  2. 不受限于 ESLint 使用的语法树 ESTree

  3. 能直接通过 tsconfig.json 中的配置编译整个项目,使得在一个文件中的类型定义能够联动到其他文件中的代码检查

ESLint 的优点:

  1. 基础规则比 TSLint 多很多(249 : 151)

  2. 社区繁荣,插件众多(50+ : 9)

为什么我们需要Eslint搭配 typescript-eslint-parser一起使用??

因为Eslint默认使用Espree进行语法解析,无法识别ts的一些语法,所以我们需要再安装typescript-eslint-parser。由于 typescript-eslint-parser 对一部分 ESLint 规则支持性不好,故我们需要安装 eslint-plugin-typescript,弥补一些支持性不好的规则
参考:https://ts.xcatliu.com/engineering/lint

相关文章

  • ts学习(基础篇二)

    类型别名 类型别名是用来给一个新类型取一个新名字,一般用作优雅代码的时候使用,参考用法: 我感觉这个用的意义不太大...

  • ts基础学习

    1. 原始数据类型: (1)布尔值(boolean):let isDone: boolean = false;(2...

  • TypeScript基础入门 - 变量声明(二)

    转发地址 TypeScript基础入门 - 变量声明(二) 项目实践仓库 为了保证后面的学习演示需要安装下ts-n...

  • 2020-05-07

    #2020/5/4到 2020/5/10 1、完成TS基础语法的学习 2、学会TS在react中如何使用(vue暂...

  • Typescript基础

    发表于 http://blog.poetries.top/2019/09/03/ts-in-action/ 基础篇...

  • RxJava——基础学习(三),简单实践

    RxJava——基础学习(一)RxJava——基础学习(二)前两篇基础学习,了解了RxJava最基础的部分知识。这...

  • TS基础篇8:函数基础

    第一:基础语法 第二:参数 第三:重载(函数名一样,参数不一样)

  • TS基础篇7:类基础

    第一:基本语法 第二:修饰符 第三:get , set 访问器(用public修饰符) 第四:静态属性 第五:类继承

  • 2021-01-28

    一:ts初步了解 基础类型 ts的基础类型中有如下几种:boolean/number/string/object/...

  • TypeScript基础入门 - 基础类型

    转载地址 TypeScript基础入门 - 基础类型 项目实践仓库 为了保证后面的学习演示需要安装下ts-node...

网友评论

    本文标题:ts学习(基础篇二)

    本文链接:https://www.haomeiwen.com/subject/vcdjkctx.html