⚡TS内功心法-学完感觉我可以啦

前言

我JS用的很顺手，为什么要用TS呢？ 这不是会白白多了很多工作量吗？？？

相信很多小伙伴都有这个疑问，翻了网上大神的回答再结合工作中的经验，主要有以下四点：

  • 面向项目：

    • TS - 面向解决大型项目，架构设计以及代码维护有一定的优势

      • 比如某个函数的传参定义为number, 函数内部的逻辑也是基于number类型开发的，这时候其他人传个string，函数内部逻辑就会出错，TS可以从起点就规避这种场景

    • JS - 脚本化语言，简单场景且轻量化

  • 自主检测

    • TS - 编译时检测，主动发现并纠正错误
    • JS - 运行时报错

  • 类型规范上

    • TS - 弱类型，支持动态和静态类型检测
    • JS - 弱类型，无静态类型选项

  • 运行流程

    • TS - 依赖编译，依靠编译打包实时生成浏览器可以运行的js
    • JS - 可直接在浏览器中运行

其实，以上都是次要的，主要现在很多公司的岗位都要求会TS，哈哈~~~


本篇参考了一些大佬的真传干货，汇总提炼出的TS方面的知识点，看完可以上手常规的TS项目啦~~~

image.png

正文开始

1，定义变量

五种基本类型都在下面啦~~~

给变量定义了什么类型，值就要是什么类型，要进行统一的

let a: number = 1; //number小写
let b: string = "1";
let c: undefined = undefined;
let d: null = null;
let e: boolean = true;

如果不按照规范写的话，会报如下的错误：

image.png

2，定义数组

定义数组类型的两种方式

//普通数组
let arr1: number[] = [1, 1];
let arr2: Array<number> = [1, 1];

定义联合类型，让数组的成员可以存在多种类型

// 联合类型（和元组的达成结果一样）
let arr3: Array<number | string> = [1, "1"];

3，定义元祖

数组合并了相同类型的对象，元祖合并了不同类型的对象

let x: [number, string];
x = [5, "abc"];
let y: [number, string] = [5, "abc"];

4，定义对象

interface Phone {
  name: string; //必填
  size: number; //必填
  color?: string; //选填
  action(): void; //必填
  [propName: string]: any; //任意属性
}
let obj: Phone = {
  name: "诺基亚",
  size: 100,
  action: function () {},
};
let obj1: Phone = {
  name: "诺基亚",
  size: 100,
  action: function () {},
  color: "blue",
  other: "测试",
};

4.1， [propName: string]: any;的使用场景

如果有很多参数定义，但是你不想全部都定义，那你就是可以定义几个主要的，其他用这个表示就行了。

还在疑惑为啥这里不解释下interface的使用场景吗，下文有专门的区域讲解的~~~

5，定义函数

5.1，函数入参的声明

// 第一种
function fuc1(a: string, b: string) {
  return ["1", "2"];
}
fuc1('a', 'b')
// 第二种
interface MyParams {
  x: number;
  y: number;
}
function fuc2(params: MyParams) {
  return ["1", "2"];
}
fuc2({x: 1, y: 2})

5.2，函数检查类型

场景：项目有一个公共函数传参类型（SearchFun），后续的函数继承这个接口后，都得按照这个规范来

interface SearchFun {
  (a: number, b: number): boolean;
}
let fuc6: SearchFun = function (c: number, d: number): boolean {
  return c > d;
};

fuc6(1, 2);

如果没按规则来的场景如下：

image.png

5.3，函数出参的声明

声明出参为字符串(): string

function fuc2(a: number | string, b: number): string {
  return a + "" + b;
}
fuc2('1', 2)

6，定义类

  • public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的；
  • private 修饰的属性或方法是私有的，不能在声明它的类的外部访问；
  • protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的；
  • static 不需要实例化 调用类，直接调用
class Cat2 {
  name: string;
  color: string;
  constructor(name, color) {
    this.name = name;
    this.color = color;
  }
  static eat() {
    return "吃";
  }
}
var c2 = new Cat2("黑猫", "黑");
c2.name;
Cat2.eat();

7，interface和type的异同

7.1，先来两句实际工作中的使用诀窍：

  • 写法类似，通常用 interface，其他无法满足需求的情况下用 type。

  • type不会声明合并，interface会声明合并。

7.2，异同之处：

type

  • 可以描述对象和函数

  • 可以被继承

  • 可以声明基本类型，联合类型，交叉类型，元组

  • 不会声明合并（重复声明会报错提示）

  • 不会有索引签名问题

interface

  • 可以描述对象和函数

  • 可以被继承

  • 不可以声明基本类型，联合类型，交叉类型，元组

  • 会声明合并（声明过的接口可以再次声明，进行合并）

  • 有索引签名问题

type声明基本类型，联合类型，交叉类型，数组，元组的案例也给小伙伴放下面了

type userName = string; // 基本类型 
type userId = string | number; // 联合类型
type arr = number[]; // 数组
// 元组
type tuple = [string, boolean];
let tupleType: tuple;
tupleType = ["cluo", true];

// 对象类型 
type Person = { 
  id: userId; // 可以使用定义类型 
  name: userName; 
}; 
const user: Person = { 
  id: "901", 
  name: "椿"
};
// 泛型 
type Tree<T> = { value: T };

7.3，声明合并

声明合并指的是可以声明多次，重名的会合并

interface Person { name: string } 
interface Person { age: number }

let user: Person = { 
  name: "cluo", 
  age: 666, 
};

喝口水，休息一会吧~~~

image.png

8，泛型

定义的时候不指定类型，用的时候指定类型

function fuc3<T>(a: T, b: T): T[] {
  return [a, b];
}
fuc3<number>(1, 2);
// 或者
fuc3<string>('a', 'b');

上面的代码片段中，fuc3<T>中的T表示任意类型，供入参和出参使用。

用的时候可指定number 或者 string，函数的入参和出参类型也会相应改变。

8.1，不同类型的函数


function fuc4<T>(a: T, b: T): string {
  return a + "" + b + c;
}
fuc4<number | string>(1, "2");

8.2，泛型约束

泛型不支持number,因为number没有length

错误的

function f4<T>(arg: T): T {
 console.log(arg.length); // 错误: T不存在length属性 比如数值等
}
f4<number>(123)

正确的

interface LengthN {
  length: number;
}
function myHello<T extends LengthN>(arg: T): T {
  //约束了传参必须包含length属性的类型
  // console.log(arg.length);
  return arg;
}
myHello<string>("123");

9，enum - 枚举

9.1，数字类枚举

不赋值就是数字类枚举，默认从零开始，依次递增

 enum Score {
        BAD,  // 0
        NG,   // 1
        GOOD, // 2
        PERFECT, // 3
    }
    let score:Score = Score.BAD;

9.2，字符串枚举

enum Score {
        BAD = 'BAD',
        NG = 'NG',
        GOOD = 'GOOD',
        PERFECT = 'PERFECT',
    }

9.3，反向映射

指的是取值的时候，因为做了双向映射，所以 Score[0] 的值是 BAD

 enum Score {
        BAD,
        NG,
        GOOD,
        PERFECT,
    }

    let scoName = Score[0]; // BAD
    let scoVal = Score['BAD'];  // 0

9.4，异构

enmu Enum {
        A,  // 0
        B,  // 1
        C = 'C',
        D = 'D',
        E = 6,
        F,  // 7 逐个递增，上面一个是数字类型6，所以它是7
    }

JS实现异构枚举

let Enum;
    (function(Enum) {
        // 正向
        Enum['A'] = 0;
        Enum['B'] = 1;
        Enum['C'] = 'C';
        Enum['D'] = 'D';
        Enum['E'] = 6;
        Enum['F'] = 7;

        // 逆向
        Enum[0] = 'A';
        Enum[1] = 'B';
        Enum[6] = 'E';
        Enum[7] = 'F';
    })(Enum || (Enum = {}))

10，类型断言

使用场景：通常发生在你比TS更知道某个值的类型

这时，就可以使用类型断言解决TS报错。

  • 尖括号写法
let someValue:any = 'this is a string'；
let strLength:number = (<string>someValue).length；
  • as写法
let someValue:any = 'this is a string'；
let strLength:number = (someValue as string).length；

下面的padding根据不同场景可以为number 可以为string，但是在下面的场景，我们自己知道肯定为number

function padLeft(value: string, padding: string | number) {
  // 报错: Operator '+' cannot be applied to 
  // types 'string | number' and 'number'
  return Array(padding + 1).join(" ") + value;
}

改为

function padLeft(value: string, padding: string | number) {
  return Array(padding as number + 1).join(" ") + value;
}

11，类型守卫

书接上文，有些场景as写的过多未免有些劳累。于是，有了类型守卫

主要有三种

  • typeof: 用于判断 "number"，"string"，"boolean"或 "symbol" 四种类型.
  • instanceof : 用于判断一个实例是否属于某个类
  • in: 用于判断一个属性/方法是否属于某个对象
function padLeft(value: string, padding: string | number) {
  console.log((padding as number) + 3);
  console.log((padding as number) + 2);
  console.log((padding as number) + 5);
  return Array((padding as number) + 1).join(' ') + value;
}

11.1，用typeof可以改为如下：

function padLeft(value: string, padding: string | number) {
  if (typeof padding === 'number') {
      console.log(padding + 3); //正常
      console.log(padding + 2); //正常
      console.log(padding + 5); //正常 
      return Array(padding + 1).join(' ') + value; //正常
  }
  if (typeof padding === 'string') {
      return padding + value;
  }
}

11.2，instanceof的使用场景

class Man {
    handsome = 'handsome';
}
class Woman {
    beautiful = 'beautiful';
}

function Human(arg: Man | Woman) {
    if (arg instanceof Man) {
        console.log(arg.handsome);
        console.log(arg.beautiful); // 会报错，因为Man这个类里没有beautiful
    } else {
        // 这一块中一定是 Woman
        console.log(arg.beautiful);
    }
}

11.3，in的使用场景

interface Teacher {
        name: string,
        courses: string[];
    }

    interface Student {
        name: string,
        startTime: Date;
    }

    type Course = Teacher | Student;

    function startCourse(cls:Course) {
        if ('courses' in cls) {
            console.log('teacher', cls.courses);
        }
        if ('startTime' in cls) {
            console.log('student', cls.startTime);
        }
    }

12，any, unknown, void, never

12.1，any

绕过所有类型检查 => 类型检测和编译筛查全部失效

 let anyValue:any = 123;

    anyValue = 'anyValue';
    anyValue = false;

    let value1:boolean = anyValue;

12.2，unknown

绕过赋值检查 => 禁止更改传递

let unKnownValue:unknown;

    unKnownValue = true;
    unKnownValue = 123;
    unKnownValue = 'unKnownValue';

    let value1:unknown = unKnownValue; // OK
    let value2:any = unKnownValue;  // OK
    let value3:boolean = unKnownValue; // 报错

12.3，void

void(与any相反) => 声明函数返回值

function voidFunction():void {
        console.log('no return');
    }

12.4，never

永不返回任何东西 或者 永远抛出error

    function error(msg:string):never {
        throw new Error(msg);
    }
    function longlongloop():never {
        while(true) {
            // ……
        }
    }

13，常用内置工具类型

13.1，Record

定义一个对象的 key 和 value 类型


type AnimalType = 'cat' | 'dog' | 'frog';
type AnimalDescription { name: string, title: string }
const AnimalMap: Record<AnimalType, AnimalDescription> = {
    cat: { name: '猫', title: 'cat' },
    dog: { name: '狗', title: 'dog' },
    frog: { name: '蛙', title: 'wa' },
};

13.2，Partial

生成一个新类型，该类型与 T 拥有相同的属性，但是所有属性皆为可选项

interface Foo {
        name: string
        age: number
    }
    type Bar = Partial<Foo>
    // 相当于
    type Bar = {
        name?: string
        age?: number
    }

13.3，Required

生成一个新类型，该类型与 T 拥有相同的属性，但是所有属性皆为必选项

interface Foo {
        name: string
        age?: number
    }
    type Bar = Required<Foo>
    // 相当于
    type Bar = {
        name: string
        age: string
    }

13.4，Readonly

生成一个新类型，T 中的 K 属性是只读的，K 属性是不可修改的。

interface Foo {
        name: string
        age: number
    }
    type Bar = Readonly<Foo>
    // 相当于
    type Bar = {
        readonly name: string
        readonly age: string
    }

13.5，Pick

生成一个新类型，该类型拥有 T 中的 K 属性集 ; 新类型 相当于 T 与 K 的交集

白话：借别人家的粮食吃

interface Foo {
        name: string;
        age?: number;
        gender: string;
    }
    type Bar = Pick<Foo, 'age' | 'gender'>
    // 相当于
    type Bar = {
        age?: number
        gender: string
    }

13.6，Omit

和Pick相反

生成一个新类型，该类型拥有 T 中除了 K 属性以外的所有属性

type Foo = {
        name: string
        age: number
    }

    type Bar = Omit<Foo, 'age'>
    // 相当于
    type Bar = {
        name: string
    }

13.7，Exclude

如果 T 是 U 的子类型则返回 never 不是则返回 T

取差集

type A = number | string | boolean
   type B = number | boolean

    type Foo = Exclude<A, B>
    // 相当于
    type Foo = string

13.8，Extract

和 Exclude 相反

取交集

type A = number | string | boolean
   type B = number | boolean

    type Foo = Extract<A, B>
    // 相当于
    type Foo = number | boolean

完结

这篇文章我尽力把我的笔记和想法放到这了，希望对小伙伴有帮助。

欢迎转载，但请注明来源。

最后，希望小伙伴们给我个免费的点赞，祝大家心想事成，平安喜乐。

image.png

全部评论

相关推荐

11-22 16:53
宁德时代_数据产品经理(准入职员工)
宁德时代内推宁德时代面经
宁德时代校招面经‌宁德时代热管理工程师面经面试时长：25分钟面试流程：无笔试，只有一面，英语测评，智力测评（两个测评应该不刷人，我都乱写的）面试官配置：只有一位，应该是经理面试内容：面试体验非常好，面试官教了我专业之外的很多东西。1.如果领导给你个任务，你有7天的时间，你怎么分配？2.电池液冷板的流量是怎么考虑的？3.实习过程中你学到了什么？4.你觉得实习和学校最大的区别是什么？反问：1.用的什么软件，以及怎么应对在学校用的仿真软件和工作的软件不一样这个转变？面试官说用的floefd，然后又说：其实软件的学习都是次要的，你们校招生进来会培训软件的使用，同时工作中也会天天用软件，你更应该关注的是...
点赞 评论 收藏
分享
11-25 00:13
广东工业大学 算法工程师
点赞 评论 收藏
分享
11-22 21:39
已编辑
西安电子科技大学 Java
点赞 评论 收藏
分享
11-25 19:33
南京理工大学 C++
C++选手秋招总结
秋招进行到现在终于能写总结了。完全没想到战线会拉这么长，过程会如此狼狈，不过更应该怪自己太菜了。好在所有的运气都用在了最后，也是有个去处。背景：双2本硕科班，无竞赛，本科一段研究所实习，硕士一段大厂暑期实习但无转正。技术栈是C++&nbsp;&amp;&nbsp;Golang，实习是客户端音视频（而且是鸿蒙端开发），简历两个C++项目一个Golang项目。主要投递岗位：后端，cpp软开，游戏服务端，测开，以及一些不拘泥于Java的岗位。从8月起总共投递123家公司，笔试数不清了，约面大约30家。offer/oc/意向：友塔游戏（第一个offer，面试体验很好，就是给钱好少南瑞继保（计算机科班点击就送（限男生），不...
乡土丁真真：佬很厉害，羡慕~虽然我还没有到校招的时候，也想讲一下自己的看法：我觉得不是CPP的问题，佬的背书双2，技术栈加了GO，有两段实习。投了123，面了30.拿到11个offer。这个数据已经很耀眼了。这不也是CPP带来的吗？当然也不止是CPP。至少来说在这个方向努力过的也会有好的结果和选择。同等学历和项目选java就会有更好的吗？我个人持疑问态度。当然CPP在方向选择上确实让人头大，但是我觉得能上岸，至于最后做什么方向，在我看来并不重要。至于CPP特殊，有岗位方向的随机性，java不是不挑方向，只是没得选而已。也希望自己以后校招的时候能offer满满
25届秋招总结
点赞 评论 收藏
分享
点赞 收藏 评论
分享

全站热榜

正在热议
# 25届秋招总结 #
360197次浏览 3528人参与
# 如果再来一次，你还会选择这个工作吗？ #
93327次浏览 904人参与
# 北方华创开奖 #
50986次浏览 459人参与
# 地方国企笔面经互助 #
5450次浏览 13人参与
# 我的实习求职记录 #
6092336次浏览 83732人参与
# ai智能作图 #
5206次浏览 94人参与
# 阿里云管培生offer #
43580次浏览 1014人参与
# 听到哪句话就代表面试稳了or挂了？ #
95488次浏览 805人参与
# 上班到公司第一件事做什么？ #
14189次浏览 162人参与
# 如何写一份好简历 #
614428次浏览 8690人参与
# 如果有时光机，你最想去到哪个年纪？ #
25726次浏览 536人参与
# 如何一边实习一边秋招 #
1000931次浏览 12702人参与
# 华为工作体验 #
108240次浏览 848人参与
# 当下环境，你会继续卷互联网，还是看其他行业机会 #
38204次浏览 346人参与
# 实习中的菜狗时刻 #
279227次浏览 2745人参与
# 国央企薪资爆料 #
15326次浏览 118人参与
# 阿里求职进展汇总 #
71051次浏览 763人参与
# 腾讯求职进展汇总 #
202171次浏览 1672人参与
# 上班苦还是上学苦呢？ #
93010次浏览 812人参与
# 职场吐槽大会 #
91217次浏览 756人参与
# 国企还是互联网，你怎么选？ #
90494次浏览 708人参与
# 许愿池 #
215958次浏览 2540人参与
牛客网
牛客企业服务