typescript之入门篇一

个人的理解是typescript就是es+类型检查，首先我们看一个最简单的例子

interface InnerErrorProps {
  code: number
}

const InnerError = (props: InnerErrorProps) => <h1>i am {props.code}</h1>

export const Errors = () => <InnerError code={405} />

• 在这里我们定义了两个组件，一个是InnerError， 一个是Errors。Errors是InnerError的父组件，并且传入一个code作为子组件的props。
• 子组件接收一个参数，参数是key，value格式，key表示传入的参数值，value则表示值的类型。
• InnerErrorProps即参数所定义的类型。

元组：定义一个已知元素数量和元素类型的数组

let x: [string, number, any]

枚举：

• 枚举类似于对象，会默认给每一项增加一个元素编号，枚举的第一项为0，依次递增

enum Color = { blue, red, green }

• 当然也可以给枚举指定元素编号, 其中red的元素编号是3

enum Color = { blue = 2, red, green=5 }

• 根据枚举项获取元素编号

let x: Color = Color.red
console.log(x) // 3

• 根据元素编号获取枚举项

let x: string = Color[3]
console.log(x) // 'red'

类型断言

以下是两种类型断言的方式

let numValue: any = 'i am mana'
// 第一种
let valueLength = (<string>numValue).length
// 第二种, jsx只能用第二种
let valueLength = (numValue as string).length

• 关于类型断言，官网没有解释太多，我个人的理解是，在执行某一行代码时，能够让编译器和读者更精确的知道代码如何执行。