为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第46天 TypeScript(2)

【九月打卡】第46天 TypeScript(2)

2022.09.20 00:18 50浏览

类型注解和类型推断

TS开发准则:只要是变量或者对象属性,都应该有一个明确的类型

// bad
const user: any = 'tz'
user.toUpperCase()

// good
const user: string = 'tz'
user.toUpperCase()

类型注解
人工的告诉TS,变量或者对象属性的类型

// 显示地声明user的类型为string
const user: string = 'tz'

类型推断
TS可以自动推断出变量或者对象属性的类型

// TS自动推断出age类型为18
const age = 18;

注意点
1、如果可以自动推断,就没有必要写类型注解
2、有些无法推断出来的或者推断的不正确,就需要写类型注解

// 无法自动推断`first`和`second`的类型,需要进行类型注解
function sum(first: string, second: string) {
	return first + second
}

// userInfo的name属性自动推断是string类型;如果推断的不正确,需要手动注解
const userInfo: {
	name: 'tz',
	age: number
} = {
	name: 'tz',
	age: 18
}

3、对象解构的类型的写法

const function fn({a, b} : { a: string, b: string}) {
	return a + b
}

// 或者使用type
type User = { a: string, b: string}
const function fn({a, b} : User) {
	return a + b
}

// 或者使用interface
interface User {
	a: string;
	b: string
}
const function fn({a, b} : User) {
	return a + b
}

4、变量类型以定义变量时为准

let user = 'tz'
user = 123 // 报错:因为user定义时是string类型;不能赋值其他类型的值

类型收窄

  • 类型收窄就相当于到if…else 或者switch…case等流程控制语句中加上条件,从而达到收窄的效果。

  • 常用的类型收窄有 typeof收窄、真值收窄、相等收窄、in、instanceof、

typeof收窄

function upper(val: string | number) {
  if(typeof val === 'string') {
    return val.toUpperCase();
  }
  return val;
}

真值收窄

function upper(val?: string) {
  if(val){
    return val.toUpperCase()
  }
}

相等收窄
x和y相等,会自动推断出x和y的类型都是string,可以执行toUpperCase方法

function upper(x: string | number, y: string | boolean) {
  if(x === y) {
    return x.toUpperCase()
  }
}

in 收窄

interface Fish {
  swim: () => {};
}

interface Bird {
  fly: () => {};
}

function action(animal: Fish | Bird) {
  if ('swim' in animal) {
    animal.swim();
  } else {
    animal.fly();
  }
}

instanceof 收窄

function getDate(params: Date | string) {
  if(params instanceof Date) {
    return params.getTime()
  }
  return params.toUpperCase()
}

使用类型陈述实现类型收窄

interface Fish {
  swim: () => {};
}

interface Bird {
  fly: () => {};
}

// animal is Fish属于类型陈述
function isFish(animal: Fish | Bird): animal is Fish {
  if ((animal as Fish).swim !== undefined) {
    return true;
  }
  return false;
}

function action(animal: Fish | Bird) {
  if (isFish(animal)) {
    animal.swim();
  } else {
    animal.fly();
  }
}
点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
2
获赞与收藏
6

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消