laizimo/zimo-article

ts实录

laizimo opened this issue · 0 comments

laizimo commented

前言

ts崛起之际，认真的去对待它，变得越来越重要。以往仅仅只是在开发上，认为它仅仅只是具备了类型识别，而在使用上轻视它。但是，随着node端的开发量增多，发现自己对于ts的语法上面有着诸多的不解。所以，趁着年后的空余时光，整理一下typescript的学习笔记。可以关注我的github博客

正文

数据类型

  1. 数字

    const number: number = 1;

  2. 字符串

    const string: string = 'string';

  3. 布尔型

    const boolean: boolean = false;

  4. 数组

    // 类型+[]
const list: number[] = [ 1, 2, 3 ];

//数组泛型
const list: Array<number> = [ 1, 2, 3];

  5. 元组

    const tuple: [string, number] = ['string', 1];

    元组就是一个已知元素数量和类型的数组，数组内元素的类型可以不同。

  6. 枚举型

    enum Color { Red, Green, Yellow };
let c: Color = Color.Red;

  7. any型

    let c: any = 1;

c = 'any';

    any可以指示任何类型，一般在编译的时候无法确定数据类型的时候使用

  8. void: 没有类型，一般作为函数的返回值

  9. Null和undefined: 在TS中，这两个空类型一般没有用处

  10. Never: 永不存在的类型

  11. 联合类型

    在ts中，如果想要表示一个变量多个类型时，我们需要用到的。

    let unite: number | string = '';
unite = 4;

    联合类型，通常被使用在声明文件中居多。

类型断言

ts中有两种类型断言的方式：尖括号和as

let someValue: any = 'string';

//尖括号
const len1: number = <string>someValue.length;

//as
const len2: number = (someValue as string).length;

函数

函数在ts的使用过程中，主要是参数的类型和返回的类型需要确定。如果函数返回类型为空的话，这里会使用到void来表示。

参数部分的话，主要有普通参数、可选参数、默认参数、剩余参数。

其中可选参数的表达在ts中有着不同的用法，如下：

function createName(firstName: string, secondName: string = 'Smith', thirdName?: string) {
	if (thirdName) {
		console.log(firstName + secondName + thirdName);
	} else {
		console.log(firstName + secondName);
	}
}

ts中的所有可选的类型，均需要带上?

函数在ts中，还有一个重要的用法——重载；可能在js中并没有听说过，因为js的函数，参数类型和返回值类型都是不固定的。

下面是重载的例子：

const suits = ['hearts', 'spades', 'clubs', 'diamonds'];

function pickCard( x: {suit: string; card: number}[] ): number;
function pickCard( x: number ): {suit: string; card: number;};
function pickCard(x): any {
	if (typeof x === 'object') {
		return Math.floor(Math.random() * x.length);
	} else if (typeof x === 'number') {
		return { suit: suits[Math.floor(x / 13)], card: x % 13 };
	}
}

接口

接口在ts中，相当于一种没有方法的类。它本身包含一些属性，可以自定义一些对象的类型。

同样的接口中的属性，也可以是可选属性，方便灵活。

interface Shape {
	color: 'RED' | 'GREEN' | 'BLUE',
	length?: number
}

const shape: Shape = {
	color: 'RED',
	length: 10
};

既然接口有类似于类的特性，那它就是可以被继承的。

interface Triangular extends Shape {
	area: number
}

const shape: Shape = {
	color: 'RED',
	length: 10,
	area: 20
};

泛型

当你无法确定你需要使用类型的时候，ts提供了两种方法：

  1. 使用any
  2. 使用泛型

使用any的话，它会导致后面信息的丢失，编译器将不会判断数据类型；而使用泛型的好处就是，能够保证类型的统一。如下：

//在函数中的使用

function func1(param: T): T{
	return param;
}

console.log(func1<number>(1));

//在接口中的使用

interface Indetity<T> {
	prop: T
}

const indetity: Indetity<number> = {
	prop: 1
};

结尾

这里总结了一些学习Typescript中，经常会涉及到的概念点。2019年，ts的发展必然会突飞猛进。我们作为程序员，也需要保持自己的技术，不与时代脱节。