typescript 基础类型

Posted 2020-12-13 lok660

tuple

//	一项数组的项数已知,其中每一项的类型也已知

const arr: [string,number,string] = [‘1‘,1,‘1‘]

unknow any

//	any类型		变量可以进行任意赋值,实例化,函数执行
//	unknown类型	只允许赋值,不允许实例化,函数执行
//	unknown类型只允许赋值操作,不允许对象取值(Getter),函数执行操作,相对更加安全

let demandOne: any
let demandTwo: unknown

demandOne = ‘Hello Tuture‘		//	ok
demandTwo = ‘Hello,Ant Design‘	//	ok

demandOne.foo.bar()		//	ok
demandTwo.foo.bar()		//	error

never

//	一般用于给函数进行类型声明,函数绝不会有返回值的时候调用,比如函数内部抛出错误

function responseError (message: string): never {
    //	...	具体操作,接受信息,抛出错误
}

interface

//	相当于类型中的JS对象,用于对函数,类等进行结构类型检查(如果两个类型结构一样,那么他们的类型就是兼容的)

interface Todo {
    content: string;
  	readonly user: string;	//	只读
  	time?: string;			//	可选
  	isCompleted: boolean;
    [propName: string]: any		//	多余属性(定义了任意属性取string类型的值)
}

const todo: Todo = {
    content: ‘予力内容创作，加速技术传播‘,
  	user: ‘pftom‘,
  	isCompleted: false,
}
todo.user = ‘hello‘		//	error	readonly

todo.hello = ‘123‘		//	ok	propName
todo.world = ‘456‘		//	ok	propName

//	一旦定义了任意属性,那么确定属性和可选属性的类型必须是它的类型子集
interface Person {
    name: string;
    age?: number;
    [propName: string]: string;
}

let tom: Person = {
    name: ‘Tom‘,
    age: 25,	//	error number不是string的子集
    gender: ‘male‘
};

//	一个接口只能定义个任意属性,如果接口中有多个类型的属性,则可以在任意属性中使用联合类型
interface Person {
    name: string
    age?: number
    [propName: string]: string | number
}
let tom: Person = {
    name: ‘Tim‘,
    age: 25,
    gender: ‘male‘
}

//	接口定义函数形状
interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}

enum

//	定义一系列命名常量,用于给一类变量做类型注解
//	它们的值是一组值里面的某一个
//	每个枚举默认都对应数字,0开始依次叠加,如设置某一个数组,从设置后的数字也将依次叠加

enum UserId {
    jack,		//	0
    rose,		//	1
    amy = 6,	//	6
    lok			//	7
    holy = ‘123456‘
}

interface Todo {
    content: string,
    user: UserId,	//	应该是UserId枚举中的其中之一
    time: string,
    isCompleted: boolean
}

function

//	类型
const add: (x: number,y: number): number = function(x,y){
    return x + y
}

//	可选
function buildName{fitstName: string,lastName?: string}{
    //	...
}
                   
//	重载	为函数多返回类型,根据不同的条件返回不同的值
let suits = ["hearts", "spades", "clubs", "diamonds"];

function pickCard(x: { suit: string; card: number }[]): number;
function pickCard(x: number): { suit: string; card: number };
function pickCard(x): any {
  // 如果 x 是 `object` 类型，那么我们返回 pickCard 从 myDeck 里面取出 pickCard1 数据
  if (typeof x == "object") {
    let pickedCard = Math.floor(Math.random() * x.length);
    return pickedCard;
  }
  // 如果 x 是 `number` 类型，那么直接返回一个可以取数据的 pickCard2
  else if (typeof x == "number") {
    let pickedSuit = Math.floor(x / 13);
    return { suit: suits[pickedSuit], card: x % 13 };
  }
}

交叉类型/联合类型

//	交叉类型&	合并成一个类型,类型包含了多个类型中 所有类型成员
interface ErrorHandling {
    success: boolean,
    error?: { message: string }
}
interface ArtistsData {
    artists: { name: string }[]
}
const handleArtistsResponse = (response: ArtistsData & ErrorHandling) => {
    //	请求失败返回请求失败的状态,以及错误信息
    if(response.error){
        console.error(response.error.message)
        return
    }
    //	请求成功返回标志成功的状态,以及目标数据
    console.log(response.artists)
}

//	联合类型|	将多个类型进行联合,组成一个符合类型(最终只能取一个类型,类似枚举)
function padLeft(value: string, padding: any) {
    if (typeof padding === ‘number‘) {
        return Array(padding + 1).join(‘ ‘) + value
    }
    if (typeof padding === ‘string‘) {
        return padding + value
    }
    throw new Error(`Expected string or number,got ${padding}`)
}

padLeft(‘Hello world‘, true)	//	报错

function padLeft(value: string,padding: string | number){	//	引入联合类型
    //	...	中间一样
}

字面量类型与类型守卫

//	数字字面量
let tuture: 520
tuture = 520 	//	ok
tuture = 521	//	error	Type ‘521‘ is not assignable to type ‘520‘

//	字符串字面量
let tutre: ‘520‘
tuture = ‘520‘	//	ok
tuture = ‘521‘	//	error	Type ‘"521"‘ is not assignable to type ‘"520"‘



//	联合类型+字面量类型实现简单枚举
function getUserInfo(osType: ‘Linux‘ | ‘Mac‘ | ‘Windows‘) {
    //  ...doSomething
}
//	效果等同于上
enum EnumOSType {
    Linux,
    Mac,
    Windows
}
function getUserInfo(osType: EnumOSType) {
    //  ...doSomething
}

interface Linux {
    type: ‘Linux‘;
    linuxUserInfo: ‘极客‘;
}

interface Mac {
    type: ‘Mac‘;
    macUserInfo: ‘极客+1‘;
}

interface Windows {
    type: ‘Windows‘;
    windowsUserInfo: ‘极客+2‘;
}

function getUserInfo(os: Linux | Mac | Windows) {
    console.log(os.linuxUserInfo);	//	error	linuxUserInfo只有os为Linux类型时才有,当os为Mac或Windows时不存在
}

//	引入类型守卫
function getUserInfo(os: Linux | Mac | Windows) {
    switch (os.type) {
        case ‘Linux‘:
            console.log(os.linuxUserInfo);
            break;
        case ‘Mac‘:
            console.log(os.macUserInfo);
            break
        case ‘Windows‘:
            console.log(os.windowsUserInfo);
            break
        default:
            break;
    }
}

类型别名

//	接口用来定义一个结构的类型,而类型别名可以使任意细粒度的类型定义
//	能用interface实现就用interface,不能就用type
type Name = string;
type NameResolver = () => string;
type NameParams = Name | NameResolver;

function getName(n: NameParams): Name {
  // ... 其他一样
}