search

adodo0829 / blog

搭建知识体系
29 stars 4 forks source link

typescript笔记小结 #61

Open adodo0829 opened 4 years ago

adodo0829 commented 4 years ago

typescript 总结笔记

前言介绍

理论基础篇

常用类型

基础篇就快速过一下...

枚举类型 enum

枚举: 我们可以理解为一组常量的集合, 可以帮助我们解决一些硬编码问题 特别是 if 语句中的判断值

console.log(Direction['Right'], Direction.Up); // Right Up

- 异构枚举(混合)
```js
enum StrNum {
  n = 0,
  y = 'yes'
}

const up = Direction.Up console.log(up)

### 接口 interface
接口（Interfaces）用于对「对象的形状（Shape）」进行描述
接口通常用来约束我们定义的对象, 函数, 类的结构和类型

- 对象约束
```js
// 赋值的时候，变量的形状必须和接口的形状保持一致(不能多也不能少,类型还必须一致)
interface Person {
  readonly id: number // 只读属性
  name: string
  age: number
  sex?: string // 可选属性
  [key: string]: any //  索引类型, 值为任意属性; 以上必须为 any 的子级
}

class Huhua implements Man { // 类中声明共有属性 name!: string // 赋值断言 age!: number constructor(name: string, age: number) { this.name = name this.age = age } eat() { console.log('eat food') } }

- 接口继承
```js
// 接口继承接口
interface Alarm {
    alert();
}
interface LightableAlarm extends Alarm {
    lightOn();
    lightOff();
}
// 接口继承类
class Point {
    x: number;
    y: number;
}
interface Point3d extends Point {
    z: number;
}

let point3d: Point3d = {x: 1, y: 2, z: 3};

函数类型

class Dog extends Animal { // 声明抽象类中的方法, 这里子类可以对父类方法进行重写; 实现所谓的多态 say() { console.log('汪汪汪'); } }

let dog1 = new Dog() dog1.say() // 汪汪汪 dog1.move() // i can move

- 类实现接口  
不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces, 用 implements 关键字来实现
```js
// 类必须实现接口中声明的所有属性(相当于约束公有属性);可以定义接口未声明的属性
// 接口只能约束类的公有成员 public
// 接口不能约束类的构造函数
interface Alarm {
    alert();
}

interface Light {
    lightOn();
    lightOff();
}

class Car implements Alarm, Light {
    //  类必须实现接口中声明的所有属性
    alert() {
        console.log('Car alert');
    }
    lightOn() {
        console.log('Car light on');
    }
    lightOff() {
        console.log('Car light off');
    }
}

泛型(相当于给类型传参)

泛型：在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。 在声明的同时指定类型变量的类型值

// 1.函数泛型约束
// 类型T不需要预先指定 相当于any类型
// 保证输入类型和返回值类型是一致的 弥补了any类型的缺点
function log<T>(v: T): T {
  return v;
}
let s: string = "generics";
let a = log(s);
console.log(a);
console.log(log(1111));

// 2.函数类型泛型约束
// 联合类型,类型别名与字符串字面量类型都是使用 type 进行定义。
// type Log = <T>(v: T) => T // 类型别名
interface Log {
  <T>(v: T): T;
}
let myLog: Log = log;
console.log(myLog([1, 2, 3]));

// 3.泛型接口
// 接口的所有属性都可以受到泛型变量的约束
// 可以传入默认类型
interface IGeneric<T = string> {
  (v: T): T;
}
let IG1: IGeneric<number> = log;
console.log(IG1(123));

// 4.泛型类
class GenericNumber<T> {
  // 泛型变量不能约束类的静态属性
  // zeroValue: T = T;
  add(x: T, y?: T) {
    console.log(x);
    return x;
  }
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.add(1);
let myG1 = new GenericNumber();
myG1.add("hello ts generics");

// 5.泛型约束
interface Length {
  length: number;
}

// T继承Length接口, 这样的话输入的参数必须具有length属性 获取value.length就是合法的了
function ggg<T extends Length>(value: T): T {
  console.log(value, value.length);
  return value;
}
ggg('hello')
ggg([1, 2, 3])

理论进阶篇

ts类型检查机制

let iobj = { a: 1, b: 2, c: 'ccc' } // 泛型索引约束 function getObjValue<T, K extends keyof T>(obj: T, keys: K[]): T[K][] { return keys.map(key => obj[key]) } console.log(getObjValue(iobj, ['a', 'c'])); // console.log(getObjValue(iobj, ['a', 'd'])); 保错


## 工程实践篇
这里是针对我们在正式开发中使用 ts 的一些技巧及规范说明

### tsconfig.json配置文件
[参考 1](https://segmentfault.com/a/1190000013514680)
[参考 2](http://www.typescriptlang.org/docs/handbook/compiler-options.html)

### 声明文件 xxx.d.ts

declare var 声明全局变量 declare function 声明全局方法 declare class 声明全局类 declare enum 声明全局枚举类型 declare namespace 声明（含有子属性的）全局对象 declare interface 和 type 声明全局类型 export 导出变量 export namespace 导出（含有子属性的）对象 export default ES6 默认导出 export = commonjs 导出模块, import xx = require('xxx') export as namespace UMD 库声明全局变量 declare global 扩展全局变量 declare module 扩展模块

### ts工具类(泛型)
- Partial: 将属性全部变为可选.
```js
type Partial<T> = { [P in keyof T]?: T[P] };
type p = Partial<InterfaceXXX>

vue 项目中使用的一些问题

本人是在 vue 项目中首先使用的, 发现支持并不是很好...但是还是咬牙写完了一个项目, 后续打算在 react使用一下