TypeScript基础知识

目录

TS编译流程图

基础类型&高级类型使用

常见问题

1. ts的好处是什么？

2. type 和 interface的异同

3.如何基于一个已有类型，扩展出一个大部分内容相似，但是有部分区别的类型？

4.什么是泛型，泛型的具体使用？

---

官方写的是，TypeScript是JS类型的超集，它可以编译成纯JavaScript。TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。

支持ECMAScript6标准。

TS编译流程图

 

基本概念：TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式

基础类型：number、string、boolean、array、object、undefined、void

Any Void Null 和 Undefined Never Object

类型推论 

可赋值性：数组、布尔、数字、对象、函数、类、字符串、字面量，满足以下任一条件时，A类型可以赋值给B类型

1. A是B的子类型
2. A是any类型

基础类型&高级类型使用

1. enum：枚举
2. type，interface
3. 联合类型 ｜（联合类型一次只能一种类型；而交叉类型每次都是多个类型的合并类型）
4. 交叉类型 & （联合类型一次只能一种类型；而交叉类型每次都是多个类型的合并类型）
5. typeof： 可以用来获取一个变量声明或对象的类型

   function toArray(x: number): Array {
     return [x];
   }
   
   type Func = typeof toArray; // -> (x: number) => number[]

6. keyof：可以用来一个对象中所有的key值

   interface Person {
       name: string;
       age: number;
   }
   
   type K1 = keyof Person; // "name" | "age"

7. in：用来遍历枚举类型

   type Keys = "a" | "b" | "c"
   
   type Obj =  {
     [p in Keys]: any
   } // -> { a: any, b: any, c: any }

8. extends
   有时候我们定义的泛型不想过于灵活或者说想继承某些类等，可以通过extends关键字添加泛型约束。

   interface ILengthwise {
     length: number;
   }
   
   function loggingIdentity(arg: T): T {
     console.log(arg.length);
     return arg;
   }
   
   loggingIdentity(3);
   loggingIdentity({length: 10, value: 3});

9. Partial
   Partial 的作用就是将某个类型里的属性全部变为可选的类型  ？。

   interface Props {
       a: number;
       b: string;
   }
   const obj: Props = { a: 6 }
   // obj报错： 类型 "{ a: number; }" 中缺少属性 "b"，但类型 "Props" 中需要该属性。
   
   const obj2: Partial = { a: 6 }; // 不会报错
   const obj3: Partial = {}; // 不会报错

10. Required
    Required 的作用就是将某个类型里的属性全部变为必选的类型。

    interface Props {
        a?: number;
        b?: string;
    }
    
    const obj: Props = { a: 6 };
    
    const obj2: Required = { a: 6 }
    // obj2报错：类型 "{ a: number; }" 中缺少属性 "b"，但类型 "Required" 中需要该属性。
    
    const obj3: Required = { a: 6, b: 'b' }; //正确写法
    

11. Readonly
    Readonly 的作用是将某个类型所有属性变为只读属性，也就意味着这些属性不能被重新赋值。

    interface Todo {
        title: string;
    }
    
    const todo: Readonly = {
        title: 'Hello'
    }
    
    todo.title = 'Word';
    // title 报错：无法分配到 "title" ，因为它是只读属性。

12. Record
    Record 的作用是将 K 中所有的属性的值转化为 T 类型。

    interface PageInfo {
      title: string;
    }
    
    type Page = "home" | "about" | "contact";
    
    const x: Record = {
      about: { title: "about" },
      contact: { title: "contact" },
      home: { title: "home" }
    };

13. Pick
    通过从中选择一组属性Keys（字符串文字或字符串文字的并集）来构造类型Type。

    interface Todo {
        title: string;
        desc: string;
        test: boolean;
    }
    
    type TodoPreview = Pick;
    
    const todo: TodoPreview = {
        title: 'hello',
        test: false,
    }
    
    todo;
    // const todo: TodoPreview

14. Omit
    通过从中选择所有属性Type然后删除Keys（字符串文字或字符串文字的联合）来构造类型。

    interface Todo {
        title: string;
        desc: string;
        test: boolean;
        createdTime: number;
    }
    
    type TodoPreview = Omit;
    
    const todo: TodoPreview = {
        title: 'Hello',
        desc: 'Word',
        test: false,
    }
    
    todo;
    // const todo: TodoPreview
    
    type TodoInfo = Omit;
    
    const todoInfo: TodoInfo = {
        title: 'Hello',
        test: true
    }
    
    todoInfo;
    // const todoInfo: TodoInfo

15. Exclude
    Exclude 的作用是将某个类型中属于另一个的类型移除掉。

    type T0 = Exclude<"a" | "b" | "c", "a">; 
    // type T0 = 'b' | c'
    
    type T1 = Exclude<"a" | "b" | "c", "a" | "b">; 
    // type T1 = 'C'
    
    type T2 = Exclude void), Funciton>;
    // type T2 = string | number;

16. Extract
    Extract 的作用是从 T 中提取出 U。

    type T0 = Extract<"a" | "b" | "c", "a" | "f">;
    // type T0 = 'a';
    
    type T1 = Extract void), Function>; 
    // type T1 = () => viod;
    

常见问题

1. ts的好处是什么？

1. TypeScript是JavaScript的加强版，它给JavaScript添加了可选的静态类型和基于类的面向对象编程，它拓展了JavaScript的语法。所以ts的功能比js只多不少.

2. Typescript 是纯面向对象的编程语言，包含类和接口的概念.

3. TS 在开发时就能给出编译错误， 而 JS 错误则需要在运行时才能暴露。

4. 作为强类型语言，你可以明确知道数据的类型。代码可读性极强，几乎每个人都能理解。

5. ts中有很多很方便的特性, 比如枚举值

2. type 和 interface的异同

重点：interface侧重于描述数据结构，type（类型别名）侧重于描述类型。

异同点：

1. 都可以描述一个对象或者函数

   interface User {
     name: string
     age: number
   }
   
   interface SetUser {
     (name: string, age: number): void;
   }
   
   type User = {
     name: string
     age: number
   };
   
   type SetUser = (name: string, age: number)=> void;

2. 都允许拓展（extends）
   interface 和 type 都可以拓展，并且两者并不是相互独立的，也就是说 interface 可以 extends type，type 也可以 extends interface。虽然效果差不多，但是两者语法不同。

   // interface extends interface
   interface Name { 
     name: string; 
   }
   interface User extends Name { 
     age: number; 
   }
   
   // type extends type
   type Name = { 
     name: string; 
   }
   type User = Name & { age: number  };
   
   // interface extends type
   type Name = { 
     name: string; 
   }
   interface User extends Name { 
     age: number; 
   }
   
   // type extends interface
   interface Name { 
     name: string; 
   }
   type User = Name & { 
     age: number; 
   }

3. 只有 type可以做的
   （1）type 可以声明基本类型别名，联合类型，元祖等类型

   // 基本类型别名
   type Name = String
   
   interface Dog {
       wong();
   }
   interface Cat {
       miao();
   }
   // union(联合类型)
   type Pet = Dog | Cat
   
   // tuplle(元组) 具体定义数组每个位置的类型
   type PetList = [Dog, Pet]
   
   // 当你想获取一个变量的类型时，typeof 的返回值
   let div = document.createElement('div');
   type B = typeof div

   
   （2）type 能使用 in 关键字生成映射类型，但 interface 不行

   type Keys = 'firstname' | 'surname';
   
   type DudeType = {
   	[key in Keys]: String;
   };
   
   const test: DudeType = {
   	fitstname: 'Li',
       surname: 'Zhang'
   };

4. 只有interface可以做的
   interface 可以多次定义 并被视为合并所有声明成员，type不支持

   interface Point {
   	x: number;
   }
   interface Point {
   	y: number;
   }
   /* Point的接口为:
    * { x: Number, y: Number };
    */
   const point: Point = { x: 1, y: 2 };

3.如何基于一个已有类型，扩展出一个大部分内容相似，但是有部分区别的类型？

        可以通过Pick和Omit

interface Test {
    name: string;
    sex: number;
    height: string;
}

type Sex = Pick;

const a: Sex = { sex: 1 };

type WithoutSex = Omit;

const b: WithoutSex = { name: '1111', height: 'sss' };

        比如Partial，Required。再者可以通过泛型。

4.什么是泛型，泛型的具体使用？

        泛型是指在定义函数、接口或类的时候，不预定指定具体的类型，使用时再去指定类型的一种特性。

        可以把泛型理解为代表类型的参数。

interface Test {
    userId: T;
}

type TestA = Test;
type TestB = Test;

const a: TestA = {
    userId: '111',
};

const b: TestB = {
    userId: 2222,
};