加载中......
输入验证码,即可复制
微信扫码下载好向圈APP, 登陆后即可进入消息页面查看验证码
只需要3秒时间
前言

<li data-track="2">用 React 全家桶 + TS 写项目快一年了,大大小小的坑踩了很多,在此整理了在项目中遇到的疑惑和问题。<li data-track="3">体会:不要畏惧 TS,别看 TS 官方文档内容很多,其实在项目中常用的都是比较基础的东西,像泛型运用、一些高级类型这种用的很少(封装库、工具函数、UI组件时用的比较多)。只要把常用的东西看熟,最多一个小时就能上手 TS。如果本文对你有所帮助,还请点个赞,谢谢啦~~<li data-track="25">如果大家想参考下整个开源的实践的项目,vue3+ts的vban-admin react和ts的可以参考datart。什么是 TypeScript?

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第21天,点击查看活动详情。
TypeScript,简称 ts,是微软开发的一种静态的编程语言,它是 JavaScript 的超集。 那么它有什么特别之处呢?

  • 简单来说,js 有的 ts 都有,所有js 代码都可以在 ts 里面运行。
  • ts 支持类型支持,ts = type +JavaScript。
那么 ts 和 js 有什么区别呢?

JavaScript 属于动态编程语言,而ts 属于静态编程语言。

  • js:边解释边执行,错误只有在运行的时候才能发现
  • ts:先编译再执行,在写的时候就会发现错误了(ts不能直接执行,需要先编译成 js )
ts 完全支持 js ,可以直接转换



TS保姆级教程,吐血整理常见问题-1.jpg

简单的去理解

JS 有的, TS 都有, JS 没有的, TS 也有,毕竟 TS 是 JS 的超集嘛。
TS 的缺点:

  • 不能被浏览器理解,需要被编译成 JS
  • 有学习成本,写习惯了 JS 的我们,要上手需要花时间去理解,而且 TS 中有一些概念还是有点难,比如泛型。
什么是类型注解?

就是给变量添加类型约束,可以显示标记出代码中的意外行为,从而降低了发生错误的可能性 语法:
let 变量名: 类型 = 初始值let age: number = 18这样写有啥好处呢?更好地规定了数据的类型,避免了不必要的错误。 如果你不小心写错了,他会直接提示你类型错误哦。是不是很贴心呢?
比如:
let a:number = '1'  代码中的 : number 就是类型注解
这个时候是时候介绍下ts的数据基本类型
    //字符串    let str: string = "Domesy"        // 数字    let num: number = 7        //布尔    let bool: boolean = true        //symbol    let sym: symbol = Symbol();         //bigint    let big: bigint = 10n            //null    let nu: null = null        //undefined    let un: undefined = undefined需要注意:

  • nullundefined 两个类型一旦赋值上,就不能再赋值给任何其他类型
  • symbol是独一无二的,假设再定义一个 sym1,那么sym === sym1 为 false
引用类型

Array
两种方式:

  • 类型名称 + []
  • Array<数据类型>
    let arr1: number[] = [1, 2, 3]        let arr2: Array<number> = [1, 2, 3]        let arr2: Array<number> = [1, 2, '3'] // error         //要想是数字类型或字符串类型,需要使用 |    let arr3: Array<number | string> = [1, 2, '3'] //okTuple(元组)

Tuple 可以说是 Array 的一种特殊情况,针对上面的 arr3,我们看他的类型可以是string也可以是number,但对每个元素没有作出具体的限制。
那么 Tuple 的作用就是限制元素的类型并且限制个数的数组,同时 Tuple这个概念值存在于TS,在JS上是不存在的
这里存在一个问题:在TS中,是允许对 Tuple 扩增的(也就是允许使用 push方法),但在访问上不允许
    let t: [number, string] = [1, '2'] // ok    let t1: [number, string] = [1, 3] // error    let t2: [number, string] = [1] // error    let t3: [number, string] = [1, '1', true] // error    let t5: [number, string] = [1, '2'] // ok    t.push(2)    console.log(t) // [1, '2', 2]    let a =  t[0] // ok    let b = t[1] // ok    let c = t[2] // error另外还有object 和定义函数;
元祖越界问题

let aaa: [string, number] = ['aaa', 5];// 添加时不会报错aaa.push(6);// 打印整个元祖不会报错console.log(aaa); // ['aaa',5,6];// 打印添加的元素时会报错console.log(aaa[2]); // error什么是函数类型接口


  • 对方法传入的参数和返回值进行约束
// 注意区别// 普通的接口interface discount1{  getNum : (price:number) => number}// 函数类型接口interface discount2{  // 注意:  // “:” 前面的是函数的签名,用来约束函数的参数  // ":" 后面的用来约束函数的返回值  (price:number):number}let cost:discount2 = function(price:number):number{   return price * .8;}// 也可以使用类型别名type Add = (x: number, y: number) => numberlet add: Add = (a: number, b: number) => a + b什么是类类型接口


  • 如果接口用于一个类的话,那么接口会表示“行为的抽象”
  • 对类的约束,让类去实现接口,类可以实现多个接口
  • 接口只能约束类的公有成员(实例属性/方法),无法约束私有成员、构造函数、静态属性/方法
// 接口可以在面向对象编程中表示为行为的抽象interface Speakable {    name: string;                   // ":" 前面的是函数签名,用来约束函数的参数    // ":" 后面的用来约束函数的返回值    speak(words: string): void}interface Speakable2 {    age: number;}class Dog implements Speakable, Speakable2 {    name!: string;    age = 18;    speak(words: string) {        console.log(words);    }}let dog = new Dog();dog.speak('汪汪汪');什么是混合类型接口


  • 一个对象可以同时做为函数和对象使用
interface FnType {    (getName:string):string;}interface MixedType extends FnType{    name:string;    age:number;}interface Counter {    (start: number): string;    interval: number;    reset(): void;}function getCounter(): Counter {    let counter = <Counter>function (start: number) { };    counter.interval = 123;    counter.reset = function () { };    return counter;}let c = getCounter();c(10);c.reset();c.interval = 5.0;继承 vs 多态


  • 继承:子类继承父类,子类除了拥有父类的所有特性外,还有一些更具体的特性
  • 多态:由继承而产生了相关的不同的类,对同一个方法可以有不同的响应
这个如果有学过Java的 就非常容易理解,我是之前做Java开发的。
比如:
class Animal {    speak(word: string): string {        return 'Animal: ' + word;    }}class Cat extends Animal {    speak(word: string): string {        return 'Cat:' + word;    }}class Dog extends Animal {    speak(word: string): string {        return 'Dog:' + word;    }}let cat = new Cat();console.log(cat.speak('hello'));let dog = new Dog();console.log(dog.speak('hello'));什么是可选链运算符的使用


  • 可选链运算符是一种先检查属性是否存在,再尝试访问该属性的运算符,其符号为 ?.


  • 如果运算符左侧的操作数 ?. 计算为 undefined 或 null,则表达式求值为 undefined 。否则,正常触发目标属性访问、方法或函数调用。
  • 可选链运算符处于 stage3 阶段,使用 @babel/plugin-proposal-optional-chaining 插件可以提前使用,TS 3.7版本正式支持使用,以前的版本会报错
a?.b;// 相当于 a == null ? undefined : a.b;// 如果 a 是 null/undefined,那么返回 undefined,否则返回 a.b 的值.a?.[x];// 相当于 a == null ? undefined : a[x];// 如果 a 是 null/undefined,那么返回 undefined,否则返回 a[x] 的值a?.b();// 相当于a == null ? undefined : a.b();// 如果 a 是 null/undefined,那么返回 undefined// 如果 a.b 不是函数的话,会抛类型错误异常,否则计算 a.b() 的结果什么是扩展全局变量的类型

interface String {    // 这里是扩展,不是覆盖,所以放心使用    double(): string;}String.prototype.double = function () {    return this + '+' + this;};console.log('hello'.double());// 如果加了这个,就会报错// export {}如何编写 react + ts 版的 HOC

interface Greeting {    name: string;    age: number;}const Hello:React.FC<Greeting> = (props) => <h1>Hello {props.name}</h1>;// 推荐使用第二种const Hello2 = (props:Greeting) => <h1>Hello {props.name}</h1>;函数赋值

JS 中变量随便赋值没问题,
但在 TS 中函数不能随便赋值,会报错的,
TS 进阶

这一部分的内容就需要费点脑细胞了,毕竟学习一门语言,还是没那么容易的,最好把基础的内容都理解透彻之后再来学进阶。
主要要掌握联合类型,交叉类型,类型别名,类型保护,类型断言
抽象类,多态,条件类型等
总结:

我之前学习 TS,是死磕 TS 文档,非常枯燥,上手难度大,学习效率很低,而且学了就忘。
后来我才发现,我们不一定需要学习那么多知识,能上手就行,TS 的文档比较适合入门之后查阅用,而不适合初学者用。基础类型 · TypeScript中文网 · TypeScript——JavaScript的超集
很多对 TS 学习得很深的人,甚至还在做 TS 类型体操,把 TS 像 LeetCode 一样刷,作为一个搬砖人,真的没必要去跟风,毕竟应付日常增删改查不需要学那么深。
我的理念一直是,用到了再去学,不要焦虑,人精力有限。比如当我需要去理解 Vue3 的源码或者设计一个库的时候,目前的 TS 知识储备不够了,再去做做类型体操,也不迟。
最近重学一次 TS,查阅了很多相对官方文档更通俗易懂的教程,总结了学习中的重点,形成了本文。
广告圈
8791 查看 0 0 反对

说说我的看法高级模式

您需要登录后才可以回帖 登录|立即注册

还没人评论此主题哦

相关阅读