关于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');

未完待续。。。

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据