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

【九月打卡】第45天 TypeScript(1)

2022.09.18 19:06 47浏览

JavaScript(简称JS)的问题

由于JS是动态类型的语言,灵活的同时也会产生一些问题

比如

function compare(n){
    if(1 < n < 5) {
        console.log('success')
    }
}
compare(100)  // 'success'

和预想中的不同,上述会先比较 1 < n得到值 true,然后 true再和5比较

let obj = {name: 'tom'}
console.log(obj.nmae)

上述把属性名写错,程序并不会报错,无形中会隐藏着bug

JS动态语言,写起来比较灵活,但是对于代码维护以及debug来说都不太容易,运行时会报错。

由此引申出TypeScript

TypeScript(简称TS)是什么?

  • TS是JS的超集
  • TS引入了静态类型,可以在编译阶段就提前发现一些错误
  • TS不会在浏览器或者node中运行,TS最终会编译成JS

TypeScript基础使用

  • 常见的基础类型有 string,number,boolean,symbol,null, undefined
const name: string = 'tom'
const age: number = 18
const bool: boolean = true
const nul: null = null
const und: undefined = undefined
  • 数组
const arr: number[] = [1, 2, 3]
const arr1: Array<string> = ['name', 'relation'] //泛型
  • 对象
const obj: {name: string, age: number} = {name: 'tom', age: 18}
const obj: {name: string, age?: number} = {name: 'tom'} // ?代表可选
  • 联合类型
function fn(id: string | number) {
	console.log(id)
}
  • 类型别名
type User = {name: string, age: number}
const student: User = {name: 'tom', age: 18}
  • any
function fn(msg: any) {
	console.log(msg)
}
  • 函数类型
function fn(num: number): number {
	return num
}

// 或者
const fn: (num: number)=> number = (num: number) => {
	return num
}
  • 接口类型
interface Person {
	name: string;
	age?: number
}
// 接口的继承
interface Student extends Person{
	sex: string
}
const student: Student = {name: '小明', sex: 'male'}
  • 交叉类型
type Person = {name: string, age: number}
type Student = Person & {sex: string}

const student: Student = {name: '小明', sex: 'male'}
  • 断言 Assersion
const dom: undefined = document.getElementById('root') as undefined;
// 或者
const dom: undefined = <undefined>document.getElementById('root');
  • 字面量类型
function getPosition(position: 'left' | 'right'): string {
	reurn position;
}

const bool: true = true
const name: '小明' = '小明'
  • void (没有返回值)
function getPosition(): void {
	console.log('hello')
}
  • never
// 函数永远不会有返回值时,例如 while(true){}
const fn: ()=> never = () => {
      while(true){  }
}

// 抛出错误
const fn: ()=> never = () => {
      throw new Error('error')
}
点击查看更多内容
0人点赞

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

评论

作者其他优质文章

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

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

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

风间影月说签约讲师

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

进入讨论

Tony Bai 说签约讲师

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

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

举报

0/150
提交
取消