作者
目录
简单的 ts 介绍
hfutsora 6月30日 19 1 0 19 1 0

typesciprt

如果你从未使用过 typescript, 要将传统 js 项目升级,刚开始的迁移工作可能会非常艰难,且开发进度甚至会有所滞后,但是在长远看来,类型系统将极大降低代码的维护成本,甚至提高整体项目开发效率。

下面将简单介绍相关知识点,方便快速入门:

Types

  • string
  • number
  • boolean
  • array
  • any
  • function

    • 参数类型声明 parameter type annotation

      function hello(name: string) {}
      
    • 返回类型声明 return type annotation

      function hello(name: string): string {
        return `hello ${name}.`;
      }
      
      // equal to this
      const hello: (name: string) => string = name => `hello ${name}.`;
      
  • object

    • 可选属性 optional propertiy

      当你的对象某个属性可能不存在时,你将使用 可选属性 符号:

      type Person {
        name: string;
        age?: number;
      }
      

      顺便相关 js 语法相关联的包括:

      可选链 optional chain

      const age = (person as Person)?.age ?? 18;
      

      非空断言 Non-null assertion operator

      // !. means the age property is existed definitely.
      const age = (person as Person)!.age;
      
  • union type

    联合类型作为配置项时很常用:

    type Method = 'get' | 'post';
    
    type send = (method: Method) => Promise<{}>;
    

    此时在使用 send 函数时,若参数不是 Method 中的一个,ts 将给出错误提示。

  • interface, type

    interface Animal {
      name: string;
    }
    

    注意,typeinterface 是十分相似的,但是 interface 可以扩展而 type 并不能

    interface Cat extends Animal {
      age: number;
    }
    

    type 的扩展只能通过 交叉 & 或 并联 | 语法实现

    type Animal { name: string; };
    type Cat = { age: number } & Animal;
    

    通常情况下我们默认使用 interface 来代替 type

  • type assertion

    const person = data as Person;
    const person = <Person>data;
    
  • enum

    enum Job {
      Student = 1,
      Teacher = 'teacher'
    }
    

    通过值获取属性名:

    const jobName = Job['teacher']; // Teacher
    

Narrow

类型缩窄 只能由大到小,正如

等边三角形是一种特殊的等腰三角形,但是等腰三角形并不一定是等边三角形

常用操作,通过 if 判断进行类型缩窄:

type Option = string | { name: string };

const option = data as Option;

if(typeof option === 'string') {
  name = option; // option's type is string
} else {
  name = option.name; // option's type is { name: string }
}

type guard

可能会有人经常用 类型断言 直接指定类型,如在接收返回数据时:

const response = getUserInfo().info as UserInfo;

这里我们将函数返回值直接当作了 UserInfo 类型,当该函数可能返回错误的数据时,这实际上是不安全的,这里我们可以用类型守卫来优化:

const { info } = getUserInfo();

if(isUserInfo(info)) {
  const userInfo = info;
}


function isUserInfo<T>(info: T): T is UserInfo {
  return typeof info === 'object' && info.name;
}

通过 类型守卫,我们便能安全地将类型缩窄。

Generics

通过泛型,我们可以进行简单或复杂的类型体操,比如常见的

// 返回 Info 对象中的一个值
type Info = {
  name: string;
}

function getInfoValue<T extends Info, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const info: Info = { name: 'ts' };
getInfoValue(info, 'name');

同时 ts 提供了很多辅助函数,请查看 utility-types

Never

never 在进行函数枚举等进行情景举例时,通常可以通过抛出错误防止遗漏:

function handleEvent(event: { type: number }): void | never {
  switch (event.type) {
    case 0: { break; }
    case 1: { break; }

    default: {
      throw `Unhandle event type ${event.type}.`;
    }
  }
}

如果之后 type 增加时,如果此处没相应增加 case 那么将会抛出错误。

扫码分享到移动端
0 条评论
快来写一写读后感吧~
参与评论互动
登录即可参与评论互动哦