【TS】TypeScript基础入门篇以及实践案例
Array 和 Tuple
//最简单的方法是使用「类型 + 方括号」来表示数组：
let arrOfNumbers: number[] = [1, 2, 3, 4]
//数组的项中不允许出现其他的类型：
//数组的一些方法的参数也会根据数组在定义时约定的类型进行限制：
arrOfNumbers.push(3)
arrOfNumbers.push('abc') // 报错
// 元祖的表示和数组非常类似，只不过它将类型写在了里面 这就对每一项起到了限定的作用
let user: [string, number] = ['viking', 20]
//但是当我们写少一项 就会报错 同样写多一项也会有问题
user = ['molly', 20, true] // 报错
interface 接口
// 我们定义了一个接口 Person
interface Person {
name: string;
age: number;
}
// 接着定义了一个变量 viking，它的类型是 Person。这样，我们就约束了 viking 的形状必须和接口 Person 一致。
let viking: Person = {
name: 'viking',
age: 20
}
//有时我们希望不要完全匹配一个形状，那么可以用可选属性：
interface Person2 {
name: string;
age?: number;
}
let viking2: Person2 = {
name: 'Viking'
}
//接下来还有只读属性，有时候我们希望对象中的一些字段只能在创建的时候被赋值，那么可以用 readonly 定义只读属性
interface Person3 {
readonly id: number;
name: string;
age?: number;
}
let viking3: Person3 = {
id: 89757,
name: 'Viking'
}
viking3.id = 9527 // 报错
Function 函数
// 第一个例子，约定输入，约定输出
function add(x: number, y: number): number {
return x + y;
}
// 可选参数
function add2(x: number, y: number, z?: number): number {
if(typeof z === 'number'){
return x + y + z;
} else {
return x + y;
}
}
// 函数本身的类型
const add3: (x: number,y: number, z?: number) => number = add2;
// interface描述函数类型
const sum = (x: number, y: number) => {
return x + y;
}
interface ISum {
(x: number, y: number): number;
}
const sum2: ISum = sum;
类型推论、联合类型和类型断言
类型推论
地址：https://www.typescriptlang.org/docs/handbook/type-inference.html
let x = 3;
自动推导出x的类型为number类型。
联合类型 union types
// 我们只需要用中竖线来分割两个
let numberOrString: number | string
// 当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法：
numberOrString.length // 报错
numberOrString.toString()
类型断言 types assertions
// 这里我们可以用 as 关键字，告诉typescript 编译器，你没法判断我的代码，但是我本人很清楚，这里我就把它看作是一个 string，你可以给他用 string 的方法。
function getLength(input: string | number): number {
const str = input as string
if (str.length) {
return str.length
} else {
const number = input as number
return number.toString().length
}
}
类型守卫 types guard
// typescript 在不同的条件分支里面，智能的缩小了范围，这样我们代码出错的几率就大大的降低了。
function getLength2(input: string | number): number {
if (typeof input === 'string') {
return input.length
} else {
return input.toString().length
}
}
枚举 Enums
// 数字枚举，一个数字枚举可以用 enum 这个关键词来定义，我们定义一系列的方向，然后这里面的值，枚举成员会被赋值为从 0 开始递增的数字,
enum Direction {
Up,
Down,
Left,
Right,
}
console.log(Direction.Up) // 0
// 还有一个神奇的点是这个枚举还做了反向映射
console.log(Direction[0]) // 'Up'
字符串枚举：
// 字符串枚举
enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT',
}
const value = 'UP'
if (value === Direction.Up) {
console.log('go up!')
}
对应上面的代码，我们编译后的JS：
var Direction;
(function (Direction) {
Direction["Up"] = "UP";
Direction["Down"] = "DOWN";
Direction["Left"] = "LEFT";
Direction["Right"] = "RIGHT";
})(Direction || (Direction = {}));
var value = 'UP';
if (value === Direction.Up) {
console.log('go up!');
}
如果我们把它改成常量枚举，可以提高性能，代码如下：
const enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT',
}
const value = 'UP'
if (value === Direction.Up) {
console.log('go up!')
}
编译成JS后的代码：
var value = 'UP';
if (value === "UP" /* Direction.Up */) {
console.log('go up!');
}
泛型 Generics
基础介绍
泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。
function echo<T>(arg: T): T {
return arg
}
const result = echo(123)
// 泛型也可以传入多个值
function swap<T, U>(tuple: [T, U]): [U, T] {
return [tuple[1], tuple[0]]
}
const result2 = swap(['string', 123])
泛型约束
在函数内部使用泛型变量的时候，由于事先不知道它是哪种类型，所以不能随意的操作它的属性或方法
function echoWithArr<T>(arg: T): T {
console.log(arg.length)
return arg
}
上例中，泛型 T 不一定包含属性 length，我们可以给他传入任意类型，当然有些不包括 length 属性，那样就会报错,那么我就需要使用泛型约束来解决，如下示例：
interface IWithLength {
length: number;
}
function echoWithLength<T extends IWithLength>(arg: T): T {
console.log(arg.length)
return arg
}
echoWithLength('str')
const result3 = echoWithLength({length: 10})
const result4 = echoWithLength([1, 2, 3])
泛型与类和接口的应用
如下示例：
class Queue {
private data: any[] = []
push(item) {
return this.data.push(item)
}
pop() {
return this.data.shift();
}
}
const queue = new Queue();
queue.push("1");
const poped = queue.pop();
if(poped) {
const res = poped.toFixed();
console.log(res);
}
当我们跟queue实例添加了一个1进去，然后再拿出来，把拿出来的这个内容调用toFixed方法，当这个数是数字，当然不会报错，如果是上面的字符串，那么在运行的时候就会报错，如下所示：
var res = poped.toFixed();
^
TypeError: poped.toFixed is not a function
使用泛型调整后的代码：
class Queue<T> {
private data: T[] = []
push(item: T) {
return this.data.push(item)
}
pop(): T {
return this.data.shift();
}
}
const queue = new Queue<number>();
queue.push("1"); // 这样这儿就会报错了
const poped = queue.pop();
if(poped) {
const res = poped.toFixed();
console.log(res);
}
泛型和interface示例：
interface keyPair<T,U> {
key: T;
value: U;
}
let kp1: keyPair<number,string> = {key: 1, value: 'str'};
let kp2: keyPair<string,number> = {key: 'str', value: 1};
类型别名和交叉类型
let sum: (x: number, y: number) => number = function(x: number, y: number):number {
return x + y
}
const result = sum(1,2)
type PlusType = (x: number, y: number) => number
let sum2: PlusType
// 支持联合类型
type StrOrNumber = string | number
let result2: StrOrNumber = '123'
result2 = 123
// 字符串字面量
type Directions = 'Up' | 'Down' | 'Left' | 'Right'
let toWhere: Directions = 'Up'
声明文件
官方声明文件库：https://github.com/DefinitelyTyped/DefinitelyTyped/
例如，我们声明一个axios函数，它有get和post两个方法。
interface IAxios {
get: (url: string) => string;
post: (url: string, data: any) => string;
}
declare const axios: IAxios;
使用方式：
axios.get('url地址')
axios.post('url地址',{name: 'zhangsan'})
类型声明示例
如下示例，我们要实现如下这样的调用方式：
calculator('minus', [1, 2]);
calculator('plus', [1, 2]);
calculator.minus([1, 2]);
calculator.plus([1, 2]);
我们要实现calculator('minus', [1, 2]) 这样的形式，就相当于我们调用一个函数，有两个参数，我们可以借助类型别名来实现。
如下声明，即实现了calculator('minus', [1, 2])的声明调用：
type IOperator = 'plus' | 'minus';
type ICalculator = (operator: IOperator, numbers: number[]) => number;
declare const calculator: ICalculator;
那我们怎样才能实现在一个函数中添加两个属性，那么我们可以使用接口的定义来调整声明代码：
type IOperator = 'plus' | 'minus';
// type ICalculator = (operator: IOperator, numbers: number[]) => number;
interface ICalculator {
(operator: IOperator, numbers: number[]): number;
plus: (numbers: number[]) => number;
minus: (numbers: number[]) => number;
}
declare const calculator: ICalculator;
这样我们再进行下面的调用就不回报错了：
calculator('minus', [1, 2]);
calculator('plus', [1, 2]);
calculator.minus([1, 2]);
calculator.plus([1, 2]);
内置类型
const a: Array<number> = [1,2,3]
// 大家可以看到这个类型，不同的文件中有多处定义，但是它们都是 内部定义的一部分，然后根据不同的版本或者功能合并在了一起，一个interface 或者 类多次定义会合并在一起。这些文件一般都是以 lib 开头，以 d.ts 结尾，告诉大家，我是一个内置对象类型欧
const date: Date = new Date()
const reg = /abc/
// 我们还可以使用一些 build in object，内置对象，比如 Math 与其他全局对象不同的是，Math 不是一个构造器。Math 的所有属性与方法都是静态的。
Math.pow(2,2)
// DOM 和 BOM 标准对象
// document 对象，返回的是一个 HTMLElement
let body: HTMLElement = document.body
// document 上面的query 方法，返回的是一个 nodeList 类型
let allLis = document.querySelectorAll('li')
//当然添加事件也是很重要的一部分，document 上面有 addEventListener 方法，注意这个回调函数，因为类型推断，这里面的 e 事件对象也自动获得了类型，这里是个 mouseEvent 类型，因为点击是一个鼠标事件，现在我们可以方便的使用 e 上面的方法和属性。
document.addEventListener('click', (e) => {
e.preventDefault()
})
Typescript 还提供了一些功能性，帮助性的类型，这些类型，大家在 js 的世界是看不到的，这些类型叫做 utility types，提供一些简洁明快而且非常方便的功能。
// partial，它可以把传入的类型都变成可选
interface IPerson {
name: string
age: number
}
let viking: IPerson = { name: 'viking', age: 20 }
type IPartial = Partial<IPerson>
let viking2: IPartial = { }
// Omit，它返回的类型可以忽略传入类型的某个属性
type IOmit = Omit<IPerson, 'name'>
let viking3: IOmit = { age: 20 }
配置文件
配置文件官网地址：https://www.typescriptlang.org/tsconfig/
{
"files": ["test.ts", "test2.d.ts"],
"compilerOptions": {
"outDir": "./output",
"module": "ESNext",
"target":"ES5",
"declaration": true
}
}
