Typescript小记

typescript

源自百度百科：TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码；
起源背景：TypeScript 设计目标是开发大型应用。由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript ，使得其能够胜任开发大型项目。

使用方法

// 声明类型
type Gender = '男' | '女'
type person = {
	name: string,
	age: number,
	gender: Gender,
	// 声明函数类型
	event: (value: string) => void
}
function event(hi){
	console.log(hi)
}
//函数使用类型用<>
event<person.event>('hellow')
// hellow

例：

// 获取对象类型
// 先用typeof判断类型
type son = typeof person
// Partial可以使typescript只检测son部分的类型而不需要完全匹配
const Else = (obj: Partial<son>)={}


/* 为什么要在FC后加<Props>类型判断，不在参数后面加 :Props
*  因为在React.FC后面添加类型的意思是除了它本身的类型判断额外加上Props的类型
*  如果在props后面加类型则是在FC接收后的参数里判断，因为React函数组件本身没有Props类型所以在参数后面加类型判断会导致检测不出来类型形成冲突
*/
const e: React.FC<Props> = (props// :Props) =>{
	console.log(props)
}

interface

//定义接口
interface Person{
    name: string,
    age: number,  // 必选属性
    job?: string, //可选属性，表示不是必须的参数，
    readonly salary: number,  //表示是只读的属性,但是在初始化之后不能重新赋值，否则会报错
    [ propName : string ] : any,  // 任意类型

}
//定义一个变量，它的类型时接口Person，这样就约束了接口的内容
let person: Person = {
    name: 'jack',
    age: 28,
    job: 'IT dog',
    id: 9872,
    salary: 9999,
}

function printMan(person) {
    console.log( `我是 ${person.name}, 我今年 ${person.age},我的工作是${person.job}`);
}

上面例子中的就是一个接口的实例，利用接口约束了传入变量的内容，注意，在赋值时：变量必须和接口保持一致。

?

// 此处的？ 表示该参数可传可不传
props?: Props

as

// as是使用某处的类型
name: 'supernova' as person.name