TypeScript经常使用知识之--变量和函数的约定

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

由于Typescript的持续火爆，分享下TS的经常使用知识点，咱们一块儿学习交流，一块儿加油！

变量的约定

1.基本类型

// number
let number: number = 1;

//boolean
let boolean: boolean = true;

//string
let string: string = "string";

// array
let array: string[] = ["1", "2", "3"];
let array1: Array<number> = [1, 2, 3];

//null
let nullnull: null = null;

//undefined
let undefinedundefined: undefined = undefined;

//any 任何类型均可以
let anyany: any = "any";

//元组 tuple
let tupletuple: [string, number] = ["1", 11];

// 枚举
enum Color {
  Green,
  Red,
}

console.log(Color.Green, Color.Red);

// HTML类型
let htmlEle: HTMLElement = document.querySelector("p");
复制代码

2.非空断言

若是一个元素有可能为空，那么取当中的属性可能会报错，这个时候须要用！进行非空断言

let div: HTMLElement | null = document.getElementById("id");
div!.style.color;
复制代码

3.never 和 void的区别

1.never 是永不可能执行到的

2.void 是空

3.never 和任何类型交叉都是never

function f1(a: string): void {}

function f2(a: string): never {
  // 由于永远执行不到 全部返回是never
  throw new Error();
}

type A = string | number;
type B = never;

type AB = A & B; // never 和任何类型交叉都是never

复制代码

4.联合类型

type C = number | string;
type C2 = boolean | string | number;
复制代码

5.断言

有时候咱们在不知道什么类型的时候调用一些属性，直接调用会报错，可是使用断言就能够避免这个问题

function fn3(a: string | Array<number>) {
  // 好比string是没有join的 这个时候就须要强转
  (a as Array<number>).join();
}
复制代码

函数的约定

1.定义函数

1.可使用interface 和 type 对函数进行约束

2.定义的类型能够是多类型 使用 | 分隔

//type
type GetName = (id: string | number) => string | number;

//interface
interface GetName1 {
  (id: string | number): string | number;
}

let getName: GetName = function (id: string | number): string | number {
  return id;
};

let getName1: GetName1 = function (id: string | number): string | number {
  return id;
};

let name = getName("id");
let name2 = getName1("id");

复制代码

2.函数参数

1.可选参数

2.默认参数

3.剩余参数

// 可选参数
function optional(a: string, b?: boolean): void {}
optional("1");
optional("1", true);

// 默认参数
function defaultFn(a: string, b: boolean = true) {}
defaultFn("1");

// 默认参数
function restFn(x1, x2, ...x: string[]) {
  for (let i = 0; i < x.length; i++) {
    console.log(x[i]);
  }
  console.log(x1, x2);
}
restFn("1", "2", "3", "4", "5");
复制代码

3.函数重载

1.函数的定义能够进行重载，相似于Java

2.重载的意义在在于更好的约束传入的参数

function getAge(id: string, gender: boolean): number;
function getAge(id: number, gender: string): number;
function getAge(id: string | number, gender: boolean | string): number {
  if (typeof id === "string") {
    return Number(id);
  }

  if (typeof id === "number") {
    return id;
  }
}

getAge("1", true);
getAge(1, "male");
// 下面这种状况就会报错
// getAge(1,true);
复制代码

相关资料

• TypeScript 官网

你们喜欢的能够看看个人专栏 (TypeScript经常使用知识) 我会尽可能保持天天晚上更新，若是喜欢的麻烦帮我点个赞，十分感谢

你们若是喜欢“算法”的话，能够看看我分享的另一个专栏（前端搞算法）里面有更多关于算法的题目的分享,但愿能帮助你们更深的理解算法

文章内容目的在于学习讨论与分享学习算法过程当中的心得体会，文中部分素材来源网络，若有侵权，请联系删除，邮箱 182450609@qq.com