关于typescript:typescript-实习与实践

一些简略例子

typescript 官网 api 看起来比拟无聊，有时候也不晓得具体应用场景是啥，所以最好的形式就是先粗读，遇到问题再去细读 api，不懂就联合网上的文章。
上面写一些简略的例子，介绍一下一些罕用 api 的个别应用场景。

应用 枚举 enum 定义常量

应用如下：

enum ILevels {
  FIRST = 'first',
  SECOND = 'second',
  THIRD = 'third',
}
// hooks 里初始化值
const [l, setL] = useState({[ILevels.FIRST]: 0,
    [ILevels.SECOND]: 0,
    [ILevels.THIRD]: 0,
})
// 函数参数里应用，更新单个 level
const setLevel = (name: ILevels, value: number) => {
    setL({
        ...l,
        ...{[name]: value},
    })
}
// 调用函数
setLevel(ILevels.SECOND, 2);

以上是 enum 的字符串枚举，数字枚举等形式见官网文档吧：https://www.tslang.cn/docs/ha…

应用泛型来束缚函数参数与返回值类型统一问题

当函数的输出参数类型和返回类型统一，比方都是 string：

function identity<T>(name: T): T {return name;}

让对象和对象的属性的束缚统一

const data = {
  a: 3,
  hello: 'world'
}
// 上面这样写是没法确定实参 name 是 data 中有的属性
function get(o: object, name: string) {return o[name]
}
// => 改成上面这样就稳了
function get<T extends object, K extends keyof T>(o: T, name: K): T[K] {return o[name]
}

keyof 返回类型的属性

这里讲的比拟详尽：http://www.semlinker.com/ts-k…

interface Person {
  name: string;
  age: number;
  location: string;
}

type K1 = keyof Person; // "name" | "age" | "location"
type K2 = keyof Person[];  // number | "length" | "push" | "concat" | ...
type K3 = keyof {[x: string]: Person };  // string | number

常见问题及解决办法

ant.design 单 / 复选等组件的事件 event 类型

ant.design 的单 / 复选等组件事件都有各自不同的 event 类型，刚入门的时候不晓得应该用啥，起初发现 把鼠标移到 有红下划线正告的 onChange 上就会有提示框 ，如下图，点开 index.d.ts 里就能够看到应该援用的类型，这个类型定义在 node_modules 里 ant 组件里。
咱们间接引入这个类型到我的项目里即可：

import {RadioChangeEvent} from 'antd/lib/radio';
...

const fn = () => {const onChange = (ev: RadioChangeEvent) => {
      const value = ev.target.value;
      // use value
    };
    return <Radio.Group onChange={onChange} ... />
}

不过，像这种常常要用到的事件类型最好加到全局配置：

// index.d.ts
import {RadioChangeEvent} from 'antd/lib/radio';
declare global {type IRadioChangeEvent = RadioChangeEvent;}

// use ...

大部分 ts 类型问题的正告信息的解决办法在如下图的提示框里能够找到解决办法。

ts 文件里应用 js 文件里的对象时提醒正告问题

// a.js
export const a = 1;
export const b = 2;
...

// b.ts
import * as data from './a';
const fn = (name: string) => {const c = data[name];   // ` 提醒 eslint 正告 `
    // do something;
} 

如上代码，当我在 ts 文件里调用 js 文件里的对象 data 时，因为 data 是一个 js 的对象，没有接口类型，所以 ts 没法晓得 data 有哪些属性，也没法确定 name 参数是一个正确的 key，就会提醒正告。
解决办法是 把 import 改为 require，间接给 data 强制设置类型为 any：

// import * as data from './a'; 
// => 改为
const data: any = require('./a');

未完待续。。。