学习学习 TypeScript 备战 Vue3吧!

·  阅读 2180
学习学习 TypeScript 备战 Vue3吧!

我正在参与掘金创作者训练营第4期,点击了解活动详情,一起学习吧!

src=http___pic1.zhimg.com_v2-21cc1bf0ff22f54cfe781e0a633b8b73_1440w.jpg_source=172ae18b&refer=http___pic1.zhimg.jpg

学习学习 TypeScript 备战 Vue3吧!

都 2202 年了(狗头), 大家开始用 TypeScript 了吗?

是不是有点没信心用好 TypeScript,害怕变成 AnyScript 呢?

没事没事,现在、立刻、马上: ( (val = '加入学习小分队') => '提高提高提高!' )()

微信图片_20210924160139.gif

为啥使用TypeScript呢?

  • TypeScriptJavaScript的超集,支持Javascript的所有语法和语义,同时作为EACMAScript的超集提供一些额外的功能,如类型检测和更丰富的语法。

  • Javascript是一门弱类型语言,变量的数据类型具有动态性,只有执行的时候才能确定变量的类型,这种后知后觉的认错方法会让开发者成为调试大师,但无益于编程能力的提升,还会降低开发效率。

    src=http___upload-images.jianshu.io_upload_images_1645208-81fe3436c7160df9.png&refer=http___upload-images.jianshu.jfif

TypeScript中的一些关键词总结

接下来对其特有的知识点进行简单的概括总结

! 断言操作符

信息大家使用TypeScript对接后端数据的时候总会遇到这种情况

image.png 这样的调用咋一看是没啥问题,我们在使用Javascript的时候也是这样进行调用的没毛病,但是作为大哥的TypeScript却不干了,报错! 必须报错

! 断言操作符就体现出他的作用了:

  • ! 的作用是断言某个变量不会是 null/undefined,告诉编辑器停止报错。使用! 只是消除编辑器报错,不会对运行有任何影响。

  • 属性或者参数中使用 !,表示强制解析(告诉 typescript 编译器,这里一定有值);变量后使用 !: 表示类型推荐排除 null/undefined

?. 可选链(这个js也是有的哦!)

image.png

后端返回了这样的数据给我们,但我们如下使用的时候

const age = data.family.son.age
复制代码

上面这种写法,很容易出现这种问题 data.family.son is undefined,稍微有些经验的我们立马就能想到,肯定是代码中 data.family.sonnull 或者 undefined ,这样,你肯定获取不到 age。所以经验丰富的我们在遇到获取层级比较多的对象的时候,一般都是像下面这样写。

const age = data && data.family && data.family.son && data.family.son.age
复制代码

太长了太长了,有了可选链我们就能这样用

const age =  data?.family?.son?.age
复制代码

?? 空值合并运算符

这个比较简单

 name ?? 'Tom'
复制代码
  • 它是 ES2020 的一个新特性,
  • 只会在左侧表达式是 nullundefined 时返回右侧的表达式
  • 不同于逻辑或,空值合并运算符会允许0空字符串 '' 作为有效的数值。
  • 必须在配合逻辑或/与(&& ||) 使用时用上括号,否则报错
(firstName || lastName) ?? "Tom" // 不加的话会报错
复制代码

TypeScript 中的一些关键词

type 类型别名用来给一个类型起个新名字

类型别名常用于联合类型(联合类型表示取值可以为多种类型中的一种),比如常见的如下写法

type sex = 'nan' | 'nv';

let person: sex = 'nan'
复制代码

interfacetype 的用法其实差不多,interface 也是用来定义类型的

interface Person = {
    (name: string, age: number) => any;
}
复制代码

但是,还是有些许区别的

  • typeinterface 的区别

都支持拓展,但是语法不同

interface Name { 
    name: string; 
}
interface Person extends Name { 
    age: number; 
}

type Name = { 
    name: string; 
}
type Person = Name & { age: number  };
复制代码

typeoftype配合的一些妙用

JavaScript 中, typeof 可以判断一个变量的基础数据类型, 在 TypeScript 中,它还可以获取一个变量的声明类型

const obj = { a'1' };

type val = typeof obj;
复制代码

这里 val的值就变成了{ a: string } ,当然还可以做深层的嵌套:

const obj = { a: { b: { c: 1}}};

type val = typeof obj; 
复制代码

这里 val的值就变成了const obj: { a: { b: { c: number; }; }; }

keyoftype配合的一些妙用

keyof 可以获取一个对象接口的所有 key 值,和 type 配合我们就能获取某个类型的键值

type Obj = { a: string; b: string }

type val = keyof obj;

// type val = 'a' | 'b';
复制代码

intype配合的一些妙用 可以遍历枚举类型

in 遍历 Keys,并为每个值赋予 string 类型

type Keys = 'a' | 'b' | 'c';
type Obj = { 
    [ T in Keys]: string;
}
复制代码

这里 obj 的值就是

 type Obj = {
    a: string,
    b: string,
    c: string
 }
复制代码

参考资料

[1] TypeScript 入门教程:可以在线模拟练习哦!

[2] TypeScript Docs: 对于外语不好的我阅读起来真吃力。。。

[3] 细数 TS 中那些奇怪的符号

[4] TypeScript入门教程

[5] TypeScript入门教程列表

优秀文章

真的很推荐读一读,TypeScript官方文档中,整理的不是很仔细,阅读起来不是非常的舒服。。。诶

[1] TypeScript中高级应用与最佳实践

[2] TS 常见问题整理(60多个,持续更新ing)

[3] TS 中的内置类型简述

[4] TypeScript 的工具类型

[5] 深入理解 TypeScript

[6] 一份不可多得的 TS 学习指南(1.8W字)

[7] TypeScript 菜鸟教程

看到这里了!点个赞再走吧!

src=http___dingyue.ws.126.net_1kNX5UOlvvZhqzVi4eMVTefclpP9NYP6nSIQPkU9McOAq1553651252093compressflag.jpg&refer=http___dingyue.ws.126.jpg

收藏成功!
已添加到「」, 点击更改