TypeScript的日常业务开发用法

二哈有点伤
400 阅读4分钟

hello，大家好，欢迎来到前端小菜鸟的文章，文章内容皆为个人学习知识的看法，本人是个小菜鸟，所以写的不好的地方请多给建议，文章不一定给你带来有用，但是对我自身的学习是有用的！不喜勿喷呀！

WechatIMG96.jpeg

ts的接触从我转岗不久后就接触了，但是那时候只会模仿别人的写法，自己还不懂是啥意思，项目里面现在基本都用ts了，用了ts就回不去js，反正我是这样的感觉！

想要自己去了解ts的更多内容，可以移步到官网

ts官网：https://www.tslang.cn/index.html

一、ts的用途

ts目前楼主在项目开发中就是类型定义以及类型约束，是真的爽，

比如编写react组件时：

interface IProps {
    name: string
}
    const Hello:React:FC<IProps> = ({name}) => {
        return (
            <div>Hello {name}!</div>
        )
    }

这里的IProps就是我们定义这个组件可以接收的所有的参数，别的我不要，我只要我定义好的参数,而且你不能不给我，因为我定义了，我组件内部需要用到这个字段的值，如果你不给我，那类型检测就会给你爆红，那如果你只想部分特定用的人才传对应的值，那只需要加个问号即可： name?: string

二、ts有哪些用法?

1、第一个用法就是一里面的例子，定义组件接收参数类型

2、除了定义组件接收的参数类型以外，项目中一般都会来定义接口返回的数据类型，与后端对接的数据里面，后端可能直接丢给你一堆数据，明明我想要的只有苹果，但是你却把梨子、香蕉、苹果都丢给我， 所以我们可以在接口返回的数据内定义前端所需要的类型字段

interface Foods {
    apple: string
}

    比如我们定义一个获取数据的接口
    
    this.get<Foods[]>(`/api/user/getFoods?${stringify(params)}`);

在这里面我们对这个get请求返回的类型定义了一个是数据返回的类型是Foods,里面只有一个值是apple，但是数据返回里面是有所有的数据的，只不过，接口返回的值里面，通过类型检测出来只有apple这个值而已，而在前端引用的时候，我只看到接口返回apple的值，不会看到梨子，香蕉

3、类型继承：extends

interface Time {
  startTime: number;
  endTime: number;
}

interface SelectTime extends Time {
  selectAreasId: string;
}

在这里面定义的SelectTime，它里面包含的值就包括Time里面的所有类型加上自己的类型，业务开发中，有时候就会遇到这种情况，通过继承的方式，就不需要重复定义类型了

extends这里的用法是比较低级的，除了继承以外extends的另一个常规用法是：条件类型的关系检测，类似三元表达式一样，这里最浅显的用法：

type Time <X, Y> = X extends Y ? true : false
type TimeString = Time<'s', 's'>; // true
type TimeNumber = Time<1, 1>; // true

4、类型筛选： Pick

这个用法在业务中也是用的比较多的，当一个类型定义了很多值得时候，但其他只需要用到其中的一个或者2个值得时候，就可以用Pick

interface Area {
    id: number;
    name: string;
    children: [];
    type: string;
    areaId: string;
    devices: []
}

type iArea = Pick<Area, 'id' | 'name' | 'children'>;

这里定义的iArea的值可以值id，name，children中的任意字段即可，前面的Area值你要在里面挑选的类型的集合

5、as用法，这里一般就是与某些值的类型有一部分一致，但不完全，可以利用as进行强制转换

比如：
const [currentProps, setCurrentProps] = useState<T>({} as any as T);
这里面的对象的类型就是T

以上的内容是业务中比较常用的部分用法了，需要理解更多的，或者想要深入学习的可以到下面的链接去学习，一起进步啊！

哦对了，如果你的业务中已经用了TS，那么在日常的开发中，就不要让自己写出any的类型啦，记住啦。好的类型定义更能提高代码易读性哦，你也不想别人看你的代码就说你写的一坨🐘🙄

深入学习ts链接： https://tsejx.github.io/typescript-guidebook/syntax/basics/basic-types
avatar
文章
阅读
粉丝