重学 typescript 之基础实例

106 阅读2分钟

函数

函数在 javascript 中是传递数据的首要方式,typescript 可以定义函数输入和输出值的类型。

image.png

从上面的例子可以看出,这里面有两个错误。返回的 name 是 string 类型的,而指定的是返回 number 类型,所以会出现错误。传入的 name 是 number 类型的,而指定的是传入 string 类型,所以也会出现错误。

对象

除了基础类型,使用较多的就是对象类型。这里列举了官网使用可选属性的例子。

image.png

从上面的例子可以看出,当对象 name 的 last 是可选属性的时候,不能直接作为字符串类型使用,而是需要进行非 undefined 的判断再作为字符串进行使用,或者是使用可选链运算符

联合类型

联合类型可以包括两种或更多类型,它表明该值可以是联合类型中的任何一种。

image.png

id 是联合类型,可以是 string 或者 number,可是下文直接当作 string 来使用就会报错。解决方法是使用类型收窄,也就是说 typescript 会根据现有代码结构推断出一个具体类型。

类型别名和接口

类型别名可以给任意类型一个名字,而接口是描述对象类型的名称。类型别名和接口有很多相似的地方,但也有不同。

类型别名和接口都可以进行扩展。


type Animal = {
  name: string
}

type Bear = Animal & { 
  honey: boolean 
}

function getBear(): Bear {
    return { name: 'leon', honey: false }
}


const bear = getBear();
bear.name;
bear.honey;
interface Animal {
    name: string
}

interface Bear extends Animal {
    honey: boolean
}

function getBear(): Bear {
    return { name: 'leon', honey: false }
}

const bear = getBear()
bear.name
bear.honey
        

上面的例子可以看出,类型别名和接口都可以表示对象类型,但是实际扩展的方式不同,类型别名使用的是 &,而接口使用的是 extends。

小结

本篇文章主要分析了函数,对象,联合类型,接口和类型别名。参考的是官网的基础例子,之前学习的时候总是想把许多理论看懂从头到尾学习,其实写过一些 typescript 代码,看过一些博客后,自己对一些用法已经了解了,剩下的多动手敲实际的例子,再从实际例子去理解英文介绍,会发现学习英文文档并没有想象的那么艰难。

参考资料:www.typescriptlang.org/docs/handbo…