[JavaScript知识库]TS（基础）

TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。

基础类型

boolean、number、string、null、undefined

/* 
原始数据类型
*/
// let isDone: boolean = 123;
let isDone: boolean = false;

let age: number = 13;
let binaryNumber: number = 0b1111; //es6  二进制和八进制

let firstName: string = "haohao";
let message: string = `Hello,${firstName},age is ${age}`;

let u: undefined = undefined;
let n: null = null;

// let num: number = "string"; //报错
let num: number = undefined;

any类型

有时候变量的值可能是动态的，不知道它是什么类型的值时，想让它直接通过编译阶段的检查，这时候就用到了any

let notSure: any = "4";
notSure = `maybe it is a string`;
notSure = true;

notSure.myName;
notSure.getName();

// any类型 在.调用方法时没有提示
firstName.charCodeAt; //string 有提示
notSure.charCodeAt; //any  没提示

void

void类型与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，其返回值类型也是 void

function User(): void {
  console.log("This is my warning message");
}
User();
// 注意：声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null
let unusable: void = undefined;

never

never类型表示的是那些永不存在的值的类型。

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

通俗理解 void 与 never：
void 可以理解为一个没有 return 但能执行完毕的函数；
never 是一个函数体无法结束执行的函数；

联合类型

/* 
联合类型  可以赋值几个类型
*/
let numberOrString: number | string = 5;
numberOrString = "55";
// numberOrString = true; //报错

数组

/* 
数组 
类型 + [] 表示
*/
// let arrOfNumber: number[] = [1, 2, "str", 4];//报错
let arrOfNumber: number[] = [1, 2, 3, 4];
arrOfNumber.push(5);
// arrOfNumber.push("str");//报错

类数组

/* 
类数组
*/
function test() {
  console.log(arguments); //IArguments
  // arguments.length
  // arguments[1]
  // arguments.forEach//报错，类数组找不到数组原型的方法
  //   let arr: any[] = arguments;//报错
}

元祖

/* 
元组   tuple
*/
// 第一项  字符串 第二项 boolean  第三项  数字   用any就丧失了意义
// let user: [string, number] = ["string"];//数组里多参数，少参数也会报错
let user: [string, number] = ["string", 1];
// user = [1, "string"];//报错，类型不能给错，按顺序

类型断言

有时候你清楚地知道一个实体具有比它现有类型更确切的类型。 TypeScript会假设你，已经进行了必须的检查。

类型断言有两种形式。 其一是“尖括号”语法：

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;

类型别名

// type aliases 类型别名
type PlusType = (x: number, y: number) => number;
function sum(x: number, y: number) {
  return x + y;
}
const sum2: PlusType = sum;

object

这里是引用object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。使用object类型，就可以更好的表示像Object.create这样的API。例如：

declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

枚举

枚举类型可以由枚举值得到它的名字,这种感觉像对象的键值对。

// enums 枚举

// 数字枚举
// enum Direction {
//   Up,
//   Down,
//   Left,
//   Right,
// }
// console.log(Direction.Up); //0
// console.log(Direction[0]); //'Up'

/* 
// tsc 编译后 -> js文件
var Direction;
(function (Direction) {
    Direction[Direction["Up"] = 0] = "Up";
    Direction[Direction["Down"] = 1] = "Down";
    Direction[Direction["Left"] = 2] = "Left";
    Direction[Direction["Right"] = 3] = "Right";
})(Direction || (Direction = {}));
console.log(Direction.Up); //0
console.log(Direction[0]); //'Up'
*/


// 字符串枚举
// enum Direction {
//   Up = "UP",
//   Down = "DOWN",
//   Left = "LEFT",
//   Right = "RIGHT",
// }
// const value = "UP";
// if (value === Direction.Up) {
//   console.log("go up!");
// }


// 常量枚举 const enum
const enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}
const value = "UP";
if (value === Direction.Up) {
  console.log("go up!");
}

// tsc 编译后 -> js文件
// var value = "UP";
// if (value === "UP" /* Up */) {
//     console.log("go up!");
// }

interface接口

/* 
interface 接口  ：规范 和 契约  规定了样子
对对象的形状进行描述
对类进行抽象
Duck Typing (鸭子类型)

描述  object 的样子
描述 类， 函数 ，数组  都可以用 interface 描述
*/

// 定义一个接口

// 完全匹配形状
interface Person {
  //Person -> IPerson 有的名字前加I 告诉是 Interface
  //这里面属性分隔就是分号分隔，不是逗号
  name: string;
  age: number;
}

// viking -> Person 类型 ，约束 viking 的  object 类型就是Person那样
let viking: Person = {
  //对象里不能少个属性或者多个属性
  name: "songJing",
  age: 20,
};

// 不完全匹配形状 age?: number;
interface PersonLiu {
  name: string;
  age?: number;
}

let vikingLiu: PersonLiu = {
  // age 可以写或者不写
  name: "songJing",
};

// 创建的时候的只读属性  readonly
interface PersonShe {
  readonly id: number; //用于属性上的  放在前面
  name: string;
  age?: number;
}

let vikingShe: PersonShe = {
  id: 1245,
  name: "songJing",
};
// vikingShe.id = 1111;//报错  只读属性，不能重新赋值

泛型

// BUG
// function echo(arg: any): any {
//   return arg;
// }
// const result: string = echo(123);

// 在函数中使用泛型
//泛型出现的动机 ，在函数名称后面加 <>  里面可以写泛型的名称 T  类似占位符或者变量

function echo<T>(arg: T): T {
  return arg;
}
// const str: string = "str";
// const result = echo(str);

// const result: string = echo(true);//报错，不会像之前一样不报错

function swap<T, U>(tuple: [T, U]): [U, T] {
  return [tuple[1], tuple[0]];
}
const result2 = swap(["str", 12]);
// result2[1].  //调用字符串的方法

// 约束泛型
function echoWithArr<T>(arg: T[]): T[] {
  console.log(arg.length);
  return arg;
}
const arrs = echoWithArr([1, 2, 3]);

interface IWithLength {
  length: number;
}

function echoWithLength<T extends IWithLength>(arg: T): T {
  console.log(arg.length);
  return arg;
}
const str = echoWithLength("str");
const obj = echoWithLength({ length: 10, width: 10 });
const arr2 = echoWithLength([1, 2, 3]);

// echoWithLength(13); //报错，类型“13”的参数不能赋给类型“IWithLength”的参数。

// 在 interface 中使用泛型
interface KeyPair<T, U> {
  key: T;
  value: U;
}
let kp1: KeyPair<number, string> = { key: 123, value: "str" };
let kp2: KeyPair<string, number> = { key: "22", value: 123 };

let arr: number[] = [1, 2, 3];
let arrTwo: Array<number> = [1, 2, 3];

//
interface IPlus<T> {
  (a: T, b: T): T;
}
function plus(a: number, b: number): number {
  return a + b;
}
function connect(a: string, b: string): string {
  return a + b;
}
const a: IPlus<number> = plus;
const b: IPlus<string> = connect;