ts 详细-学习

TS基础（一）变量声明

ts的类型主要包括两种数据类型：原始数据类型和对象数据类型

原始数据类型和js的数据类型相似包括以下几种：布尔值，字符串，null,undefined以及Se6中的Symbol和BigInt的原址数据类型

复制代码

//布尔类型
let done :boolean = false
//数值类型
let age :number  =1
//字符串类型
let name = "view"
let age:number = undefined
......

注意：所有的包装类型返回的是包装类型比如Boolean

复制代码

let done:Boolean = new Boolean(1)
let complete:boolean = Boolean(1) //这是相当于调用普通函数声明返回值

2.原始类型的字符是没有对应的方法的，那么为什么像字符串可以调用valueOf方法了。这是因为在运行的时候，原始类型会重新被包装类型初始化。获得一个新的包装类型对象，包装类型对象有相应的方法，在执行完毕这条代码的时候，生成的包装类型也相应的删除回收掉。实例如下。这个过程在java过程叫做拆箱和装箱

复制代码

let name :string ="view"
console.log(name.length())
//在运行时候处理如下
//执行到name.length()之后，系统会如下处理
let value :String  = new String(name)
value.length()
//删除，回收掉value

TS基础（二）变量声明任意类型 any

任意类型定义（any）：用来可以赋值给任意类型的类型

在TS中一个普通类型的数据在赋值的过程中因为类型已经被定义了，在原型过程中不能被随意改变

复制代码

let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;

// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

TS基础（三）类型推断

类型推断指的是：数据没有指定明确的类型，那么ts会按照类型推论的规则推断出一个类型

复制代码

let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
//myFavoriteNumber  被推断成字符串了，不在能被赋值给数值型数据了
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

有一种情况需要注意，如果定数变量的时候，如果没有赋值初始值，那么它会推断成任意类型，之后再赋值，它也会被推断成任意类型

复制代码

let myFavoriteNumber;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

TS基础（四）联合类型

联合类型表示取值可以参考多种类型中的一种。联合类型使用|来对多种类型进行分割

复制代码

let myFavoriteNumber: string | number;
    myFavoriteNumber = 'seven';
    myFavoriteNumber = 7;

联合类型在实际的使用中可以使用type来定义，可以是类型声明更贱简洁

复制代码

 type m =  string | number
    let c:m  ;
    c = 1;
    c = "11"

Ts不确定联合类型不确定变量使用哪种类型的时候，我们只能访问联合类型中共有属性和方法

复制代码

function getLength(something: string | number): number {
    return something.length;
}
//length属性number不存在
// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
//   Property 'length' does not exist on type 'number'.

联合类型的变量在赋值的时候，会根据赋值类型推断出规则中的一个类型

复制代码

myFavoriteNumber = 'seven';
console.log(myFavoriteNumber.length); // 5
myFavoriteNumber = 7;
console.log(myFavoriteNumber.length); // 编译时报错  myFavoriteNumber已经被推断为number类型，不存在length属性

// index.ts(5,30): error TS2339: Property 'length' does not exist on type 'number'.

TS基础（五）接口

TS中接口是用来定义对象的类型。TS中接口和泛型属于十分重要的类型。

在面向对象语言中，接口它是对行为的抽象，行动由类(Class)去实现（Implement）,一个类可以实现多个接口

接口（interface）定义对象的类型

复制代码

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

let tom: Person = {
    name: 'Tom',
    age: 25
};

使用接口定义对象的时候，定义的类型比接口少是不允许的，多一些属性也是不允许的

复制代码

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

let tom: Person = {
    name: 'Tom'
};

// index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'.
//   Property 'age' is missing in type '{ name: string; }'.

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

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

同时接口允许使用可选参数，即在参数后面加上?,表示这个参数可以没有

复制代码

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

let tom: Person = {
    name: 'Tom',
    age: 25
};

有时候，需要一个接口允许有任意的属性，可以使用以下方法

复制代码

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

使用 [propName: string] 定义了任意属性取 string 类型的值。

注意：一旦定义了任意属性，那么确定属性和可选属性的类型必须是它类型的子类.一般情况下，可以设置任意属性的值类型设置为任意类型（any）

复制代码

interface Person {
    name: string;
    age?: number;
    [propName: string]: string;
}

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

// index.ts(3,5): error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'.
// index.ts(7,5): error TS2322: Type '{ [x: string]: string | number; name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Index signatures are incompatible.
//     Type 'string | number' is not assignable to type 'string'.
//       Type 'number' is not assignable to type 'string'.

接口也可以使用修饰符号修饰。readonly 代表只读属性

复制代码

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
};

tom.id = 9527;

// index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

注意：只读的约束发生在给对象第一次赋值的时候，而不是只读属性赋值的时候

复制代码

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
//已经赋值过
    name: 'Tom',
    gender: 'male'
};

tom.id = 89757; //重复赋值

// index.ts(8,5): error TS2322: Type '{ name: string; gender: string; }' is not assignable to type 'Person'.
//   Property 'id' is missing in type '{ name: string; gender: string; }'.
// index.ts(13,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

约束类型构造类型，使用new来约束

new():A :表示接受一个构造参数

复制代码

 class  AnimalA {
        constructor(public name:string) {
            
        }
    }
    interface withAnimal {
        new (c:string):AnimalA //表示该接口中必须需要一个构造函数
    }
    function createAnimal(clzz:withAnimal,name:string){
        return new clzz(name)
    }
    createAnimal(AnimalA,"zw")

TS基础（六）数组类型

第一种【类型+方括号】表示方法 string[]

复制代码

let fibonacci: number[] = [1, 1, 2, 3, 5]; //定义一个数值数组

数组中不允许出现其他的类型

复制代码

let fibonacci: number[] = [1, '1', 2, 3, 5];

// Type 'string' is not assignable to type 'number'.

也对数组的方法进行了限制

复制代码

let fibonacci: number[] = [1, 1, 2, 3, 5];
fibonacci.push('8');

// Argument of type '"8"' is not assignable to parameter of type 'number'.

第二种数组泛型 Array<T>

复制代码

let fibonacci: Array<number> = [1, 1, 2, 3, 5];

第三种用接口表示数组

复制代码

interface NumberArray {
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];

第四种用接口表示数组

复制代码

    let args: {
        [index: number]: number;
        length: number;
        callee: Function;
    } = arguments;
}

TS基础（七）函数

在JavaScript中函数是一等公民。有两种常见定义函数的方式，函数声明和函数表达式。函数声明和函数表达式还是有稍微的区别：函数声明有变量提升的作用

复制代码

// 函数声明（Function Declaration）
function sum(x, y) {
    return x + y;
}

// 函数表达式（Function Expression）
let mySum = function (x, y) {
    return x + y;
};

函数有输入和输出，要在TS中对齐进行约束。需要把输入和输出考虑到，其中比较简单的定义如下

复制代码

function sum(x: number, y: number): number {
    return x + y;
}

使用接口约束函数

可以使用接口的方式来定义一个函数需要符合条件的形状

复制代码

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}

使用接口来定义函数的目的主要有如下几个方面的好处

1:当一个函数当参数传递的时候，可以清楚知道函数的信息。

2：可以保证以后函数参数个数，返回值类型不改变

函数可选参数

输入多余的参数是不被允许的，但是如果参数使用?，那么表示这个参数是可以不传递的。

注意：带？的参数，写在最后才能被省略，否则会报错

复制代码

function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

function buildName(firstName?: string, lastName: string) {
    if (firstName) {
        return firstName + ' ' + lastName;
    } else {
        return lastName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName(undefined, 'Tom');

// index.ts(1,40): error TS1016: A required parameter cannot follow an optional parameter.

参数默认值

ES6中参数支持默认值，TS中同样支持默认值

复制代码

function buildName(firstName: string, lastName: string = 'Cat') {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

省略参数

复制代码

//...items 代表省略参数，是一个数组
function push(array: any[], ...items: any[]) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a = [];
push(a, 1, 2, 3);

函数重载

重载允许一个函数接口不同数量不同类型的参数时候，做出不同的处理。重载样式如下

复制代码

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

TS基础（八）类型断言

是一种告诉编译器你对某个值的类型有比编译器更准确的了解的方式。这通常用于当你确定某个值的类型，但编译器无法推断出这个类型时。类型断言有两种形式：尖括号语法和as语法

语法：值as类型或者<类型>值

在tsx中必须使用前者

类型断言用途

讲一个联合类型断言为其中一个类型

复制代码

interface Cat {
    name: string;
    run(): void;
}
interface Fish {
    name: string;
    swim(): void;
}

function isFish(animal: Cat | Fish) {
//这里讲animal 断言成Fish对象 强制类型转换，运行报错
    if (typeof (animal as Fish).swim === 'function') {
        return true;
    }
    return false;
}

注意：类型断言只是七篇编译器，让编译器可以通过，但是图个强制类型转换，让执行的过程中回报错

尖括号语法

复制代码

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;

非空断言

在ts中当你确定某个变量不是null或undefind时，可以使用非空断言操作符 |，这会从类型中一处null和undefind

复制代码

let mayNullOrUndefinedValue: string | null | undefined = "Hello";

let length: number = mayNullOrUndefinedValue!.length; // 使用非空断言

可以将任意类型断言成any类型

总结：

1.联合类型可以被断言成其中一个类型

2.父类可以断言成子类

3.任何类型可以断言成any'

4.any可以断言成any

TS基础（九）类型别名

类型别名一般用于给一个联合类型取新的名字，对代码的整洁还时有很大的帮助

复制代码

    type c = number | string | boolean
    let a :c= 10

interface 和type区别

1.interface只能定义对象类型，和type可以定义组合类型，和原始类型。如果type声明的，会导致一些功能缺失

2.interface可以实现接口merge，但是type不行

interface merage 合并实例

复制代码

   interface A{
       a:number 
    }
    interface A{
        b:number 
     }
     let C :A ={
         a:10,
         b:20
     }

TS基础(十)字符串字面量类型

字符串字面量类型用来约束取值只能是某几个字符中的一个

复制代码

type EventNames = 'click' | 'scroll' | 'mousemove'
    function handleEvent(el:EventNames) :void
    {
    
    }
    handleEvent('click')

注意：当字符串作为类型的时候，表示的是一种类型，而不是一个赋值。切记

TS基础(十一)元组

数组合并想用类型的对象，而元素（Tuple)合并了不同类型的对象

元素可以属于理解成一个任意类型并且长度有限的数组

简单的例子

复制代码

let tom: [string, number] = ['Tom', 25];

let tom: [string, number];
tom[0] = 'Tom';
tom[1] = 25;

tom[0].slice(1);
tom[1].toFixed(2);

元素越界

当添加的元素越界的时候，越界的类型会被限制为元素类型的联合类型

复制代码

let tom: [string, number];
tom = ['Tom', 25];
tom.push('male');
tom.push(true);

TS基础(十二)枚举enum

枚举类型定义取值被限定在一定范围内的场景

复制代码

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

枚举成员会被赋值从0开始递增的数字，同时也会对枚举值到枚举名进行反射

复制代码

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true

枚举手动赋值

枚举支持手动赋值，当使用手动赋值之后的所有都会街上上一个枚举递增

复制代码

enum Days {Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 3); // true
console.log(Days["Wed"] === 3); // true
console.log(Days[3] === "Sun"); // false
console.log(Days[3] === "Wed"); // true

常数枚举和计算所的枚举

常数枚举使用const定义的枚举类型

复制代码

const enum Directions {
    Up,
    Down,
    Left,
    Right
}

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

常数枚举和普通枚举的区别，它在编译阶段被删除，并且不能包含计算成员

复制代码

//编译结果
var directions = [0 /* Up */, 1 /* Down */, 2 /* Left */, 3 /* Right */];

计算所得枚举

计算机枚举就是一个枚举中使用计算方法组合成的一个枚举。当前面的一个枚举成员是计算得到的，那么下一个枚举成员需要进行手动赋值，不然会因为初始值而报错

复制代码

enum Color {Red = "red".length, Green, Blue};

// index.ts(1,33): error TS1061: Enum member must have initializer.
// index.ts(1,40): error TS1061: Enum member must have initializer.

void 类型

如果一个函数没有返回值那么它返回值的类型就是 void。

复制代码

let fun4 = (num1: number, num2: number): void => {
  console.log(num1, num2);
};
fun4(11, 22);

泛型

泛型可以在保证类型安全的前提下让函数等多种类型一起工作从而实现服用，泛型在保护类型安全的同时，也可以让函数等多种不同的类型一起工作，实现服用。

想要函数之类的做到可以同时支持多种不同的类型，有可以做到类型的安全，此时可以使用泛型

泛型基本使用

复制代码

function id<type>(item: type): type {
  return item;
}
interface obj {
  name: string;
}
console.log(id<number>(1111));
console.log(id<string>("!!!!!!!!!!!!!!!!!"));
console.log(id<obj>({ name: "Q" }));

定义泛型的语法是function xxx<type> {item:type} :type{return item},<> 里的内容是调用者传过来的类型这个type是一个类型变量存放的是类型而不是值

这样就可以做到传入值的类型和返回值想和她，也可以答道服用效果

调用的语法：funName<type>{}. type 就是传递过期的类型

简化调用泛型函数

复制代码

function id<type>(item: type): type {
  return item;
}
let str = id("11");

在调用泛型函数是，可以把 <> 去掉达到简写调用，因为 TS 会根据传递实参自动推断出类型。比如传的是 'Q' 那么 TS 会自动推断出是 string 的类型，但如果无法推断出或推断出的类型不准确时就要自己手动传递类型。

泛型约束

添加泛型约束的作用是收缩类型，以免想用某些属性的时候不能用。添加泛型约束主要有两种方式：

指定具体类型
添加约束

如果不添加约束的话无法访问任何属性，因为泛型可以代表任何类型，不确定当前类型是否拥有这个属性所以不能访问任何类型。

复制代码

function fun1<type>(value: type): type {
  value.length; // 类型"type"上不存在属性"length"
  return value;
}

指定具体类型

复制代码

function fun1<type>(value: type[]): type[] {
  value.length;
  return value;
}
let str = fun1<string>(["1", "2", "3"]);

上面指定了 value 为 type 类型的数组，所以可以访问 value.length。

添加约束

使用 extends 关键字来添加约束，语法是：<Name extends xxx>，这代表着 Name 的类型必须要满足 xxx。

复制代码

interface Length {
  length: number;
}
function fun2<type extends Length>(value: type): type {
  value.length;
  return value;
}
let str2 = fun2<number>(1); // 类型"number"不满足约束"Length"
let str3 = fun2<string>("1");

str2 报错是因为传进的类型是 number，但 number 类型没有 length 属性。str3 传的是 string 类型，它有 length 属性所以不报错。

泛型接口

复制代码

interface NameFun<Type> {
  name: (value: Type) => Type;
  names: (value: Type[]) => Type[];
}

let obj: NameFun<string> = {
  name(value) {
    return value;
  },
  names: value => value
};
console.log(obj.name("Q"));
console.log(obj.names(["Q", "Q", "Q"]));

上面的 NameFun 就是一个泛型接口，泛型接口也可以提高接口的复用性。在调用泛型接口的时候跟调用泛型函数一样，都是在 <> 里传递一个类型。在调用的时候传一个 string 然后下方 name 里的 value 就自动是 string 的类型了。

TS基础（一） 变量声明

TS基础（二）变量声明 任意类型 any

TS基础（三）类型推断

TS基础（四）联合类型

TS基础（五）接口

约束类型构造类型，使用new来约束

TS基础（六）数组类型

第一种【类型+方括号】表示方法 string[]

第二种 数组泛型 Array<T>

第三种 用接口表示数组

第四种 用接口表示数组

TS基础（七）函数

使用接口约束函数

函数可选参数

参数默认值

省略参数

函数重载

TS基础（八）类型断言

尖括号语法

as语法

非空断言

TS基础（九）类型别名

interface 和type区别

TS基础(十)字符串字面量类型

TS基础(十一)元组

元素越界

TS基础(十二)枚举enum

常数枚举和计算所的枚举

void 类型

泛型

泛型约束

指定具体类型

添加约束

泛型接口

TS基础（一）变量声明

TS基础（二）变量声明任意类型 any

第二种数组泛型 Array<T>

第三种用接口表示数组

第四种用接口表示数组