Typescript笔记

前端规范

强类型与弱类型语言（安全层面）

• 强类型：实参与形参类型必须相同，编译阶段判断，不允许隐式类型转换
• 弱类型：不会限制实参类型，只能在运行时类型校验，允许隐式类型转换

静态类型和动态类型语言（类型层面）

• 静态类型：变量声明时明确类型，且声明后不允许改变类型
• 动态类型：运行阶段才能明确变量类型，变量的类型也可以随时改变
  

弱类型产生的问题

1.类型异常导致运行报错
2.类型不一致导致结果不一致

强类型优势

1.错误更早暴露，编译时检测类型
2.代码更智能，编码更准确，有智能提示
3.重构更可靠
4.减少不必要的类型判断

JS与 ES 与TS的关系

• JavaScript: 脚本语言，不需要编译就可以在运行环境运行。弱类型的动态类型语言
• ECMAScript: JavaScript的规范, 浏览器不能识别ES6的语法，需要babel编译生成ES5的语法才能去运行
• TypeScript: 是JavaScript的超集TypeScript兼容ES高版本的语法，最低可以编译为ES3的语法，支持任何JavaScript的运行环境。

CommonJs与ECMAScript的区别

• ECMAScript：规定了浏览器脚本语言的标准
• CommonJs： 指不运行在浏览器的js代码，运行的其他平台的js的规范（如node.js环境）

javascript诞生之初的目的是用在web， 由浏览器执行。那么脱离浏览器，javascript就不能执行了，因为只有浏览器里才有javascript解释器。所以nodejs就诞生了。各家浏览器商都有自己的javascript解释器， nodejs用的是chrome的V8 javascript引擎。

ES6模块化和CommonJS模块化的区别

原生浏览器不支持 require/exports，可使用支持 CommonJS 模块规范的 webpack打包工具，它们会将 require/exports 转换成能在浏览器使用的代码。
import/export 在浏览器中无法直接使用，我们需要在引入模块的 <script> 元素上添加type="module" 属性。js文件的import/export需要babel 将ES6的模块系统编译成 CommonJS 规范， webpack会将 require/exports 转换成能在浏览器使用的代码。

• require是CommonJS规范的模块化语法，import是ECMAScript 6规范的模块化语法；
• require是运行时加载（加载一次，exports对象缓存），import是编译时加载；
• require可以写在代码的任意位置，import只能写在文件的最顶端且不可在条件语句或函数作用域中使用；
• require通过module.exports导出的是exports对象拷贝值，import通过export导出是指定输出的代码；
• require运行时才引入模块的属性所以性能相对较低，import编译时引入模块的属性所所以性能稍高。

TypeScript

什么是Typescript

Typescript是强类型的Javascript超集，支持ES6语法，支持面向对象编程的概念，如类、接口、继承、泛型等。Typescript并不直接在浏览器上运行，需要编译器编译成纯Javascript来运行。

Typescripy和Javascript的区别

数据类型

• boolean（布尔类型）

• number（数字类型）

• string（字符串类型）

• array（数组类型）

• tuple（元组类型）：明确元素数量和元素类型的数组，各元素的类型不必相同

• enum（枚举类型）：一个对象的所有可能取值的集合

• any（任意类型）：可以指定任何类型的值

• null 和 undefined 类型： 是所有类型的子类型（除了never）

• void 类型: 用于标识方法返回值的类型，表示该方法没有返回值

• never 类型: never是其他类型 （包括null和 undefined）的子类型，可以赋值给任何类型，代表从不会出现的值

• object 对象类型
  

  
  

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. 交叉类型
   interface extends interface

   interface Name { 
     name: string; 
   }
   interface User extends Name { 
     age: number; 
   }
   

   type 与 type 交叉

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

   interface extends type

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

   type 与 interface 交叉

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

• 不同点
  type可以定义 基本类型的别名，如 type myString = string
  type可以通过 typeof 操作符来定义，如 type myType = typeof someObj
  type可以申明 联合类型，如 type unionType = myType1 | myType2
  type可以申明 元组类型，如 type yuanzu = [myType1, myType2]

1. type 可以声明基本类型别名，联合类型，元组等类型

   // 基本类型别名
   type Name = string
   
   // 联合类型
   interface Dog {
       wong();
   }
   interface Cat {
       miao();
   }
   
   type Pet = Dog | Cat
   
   // 具体定义数组每个位置的类型
   type PetList = [Dog, Pet]
   

2. interface 能够声明合并

   interface User {
     name: string
     age: number
   }
   
   interface User {
     sex: string
   }
   
   /*
   User 实际为 {
     name: string
     age: number
     sex: string 
   }
   */
   

Ts中Interface class区别

• interface - interface是仅存在于TS上下文中的一种虚拟结构，TS编译器依赖接口用于类型检查，最终编译为JS后，接口将会被移除。

• class – 与interface不同，class作为TS的一种变量类型存在于上下文之中，class中可以提供，变量、方法等的具体实现方式等。

    在TS中class和interface都可以用来约束数据的结构，但是频繁使用class约束数据结构会使程序的性能受到影响。