typescript
typescript
编辑器这边的操作
-
全局安装 typescript
npm/yarn/cnpm i/install/add typescript -g -
编辑器 atom/vs code
vscode :
搜索： typescripttypescript Importer typescript toolbox -
使用typescript的语法
-
全局多一个管理器 tsc
什么是 TypeScript:
**TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 es7 的支持**，它由 Microsoft 开发，代码开源于 GitHub 上。
官网：https://www.tslang.cn 中文 https://www.tslang.org
特点：
可以在编译阶段就发现大部分错误，这总比在运行时候出错好
不显式的定义类型，也能够自动做出类型推论
即使 TypeScript 编译报错，也可以生成 JavaScript 文件
Google 开发的 Angular 就是使用 TypeScript 编写的
Angular 1.0 Angular.js 2010
Angular 2.0 Angular.ts 2016
Angular 2.0 第 10 个 版本 半年更新一次
TypeScript 拥抱了 ES6 规范，也支持部分 ES7 草案的规范
缺点：
有一定的学习成本，需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）等前端工程师可能不是很熟悉的东西
短期可能会增加一些开发成本，多写一些类型的定义，长期维护的项目，TypeScript 能够减少其维护成本
安装：
npm install -g typescript
编译一个 TypeScript 文件：
tsc hello.ts 类型不匹配时，编辑报错，但可以生成js（编辑通过），如果不希望编译通过需要配饰tsconfig.json
类型：
原始数据类型：布尔值、数值、字符串、null、undefined、symbol、void、any
内置对象类型：Boolean, Error, Array, Date, Math, RegExp
Document,HTMLElement,Event,NodeList .... MouseEvent
自定义类型: 类、接口、
类型定义:
数值、字符串
布尔值 let isDone: boolean = false;
NewBoolean: boolean = new Boolean(1);返回对象
null undefined 同理
空值 let unusable: void = undefined
function alertName(): void{}
注意：undefined 和 null 是所有类型的子类型，可以赋值给 number 类型的变量，而 void 类型的变量不能赋值给 number 类型的变量
任意值：any 允许被赋值为任意类型，任何操作都返回任意值,是任意类型的父类型
类型推论
没有明确的指定类型，依照值推断出一个类型。
联合类型
取值可以为多种类型中的一种,没列出的不可以
let myFavoriteNumber: string | number;
对象类型：依赖接口|类 来描述,不给类型可以推论
接口定义：后续接口会单说
interface Person {
name: string;
age: number;
}
let p:Person={name:'xx',age:11}
注意：定义的变量比接口少了一些属性是不允许
可选属性: age?: number;
任意属性: [propName: string]: any; 任意值
注意：必填属性和可选属性都必须是任意属性的子属性
例如：[propName: string]: string 其他属性要是string子属性
只读属性: readonly id: number; 只能创建的时候被赋值
数组的类型:
变量:类型[]:
let arr: number[] = [1, 1, 2, 3, 5];
let arr: any[] = [1, 1, 2, 3, 5];
Array<elemType>: 泛型 后面会单说
let arr: Array<number> = [1, 1, 2, 3, 5];
函数的类型：
一个函数有输入和输出，进行约束，需要把输入和输出都考虑到
function sum(x: number, y: number): number {}
注意：输入多余的（或者少于要求的）参数，是不被允许的
函数表达式：let mySum = function (x: number, y: number): number {}
let mySum: (x: number, y: number) => number = function (x: number, y: number): number {}
变量:输入类型=>输出类型=function(参数){}
可选参数: function buildName(a: string, b?: string) {}
注意：可选参数在后
参数默认值: lastName: string = 'Liu' 默认值在后
接口中函数的定义:
interface SearchFunc {
(a: string, b: number): boolean;
}
let c: SearchFunc=function() {return true}
c('qq',11)
声明文件
ts 使用第三方库时，我们需要引用它的声明文件
ts 并不知道 $ 或 jQuery 是什么东西
declare 关键字来定义它的类型,帮助 TypeScript 判断我们传入的参数类型对不对
declare var jQuery: (string) => any;
jQuery('#div1');
类型声明放到一个单独的文件中，这就是声明文件jQuery.d.ts
declare var jQuery: (string) => any;
用到的文件的开头用「三斜线指令」表示引用了声明文件
/// <reference path="./jQuery.d.ts" />
安装第三方声明文件
npm install @types/jquery --save-dev
引入第三方方声明文件
import * as jQuery from 'jquery';
import * as $ from 'jquery';
类:
类(Class)：定义了一件事物的抽象特点，包含它的属性和方法
对象（Object）：类的实例，通过 new 生成
面向对象（OOP）的三大特性：封装、继承、多态
封装（Encapsulation）：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要（也不可能）知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意更改对象内部的数据
实例属性: 定义在类内部 name = 'Jack'; | public xx:string 定义在构造器内部 | get|set 属性(){}
继承（Inheritance）：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性
es6: 使用 extends 关键字实现继承，子类中使用 super 关键字来调用父类的构造函数和方法
存取器（getter & setter）：用以改变属性的读取和赋值行为
es6: 使用 get 属性(){return this._属性} 和 set 属性(val){this._属性=val} 可以改变属性的赋值和读取行为
静态方法 | 类方法: static 方法名(){} 类名.方法()
静态属性 | 类属性: static 定义在类内部 name = 'Jack'; ts实现了但转换到js暂不支持 调用：类名.方法()
访问修饰符（Modifiers ts实现）：修饰符是一些关键字，用于限定成员或类型的性质。比如 public 表示公有属性或方法
public：修饰的属性或方法是公有的，默认所有的属性和方法都是 public 的
private 修饰的属性或方法是私有的，不能在声明它的类的外部访问
protected 修饰的属性或方法是私有的+子类中允许访问
类的类型 公司里面： 董事长位置： 继承制
public name: string;
constructor(name: string)
sayHi(): void{}
p1: Person = new Person
接口:
可以用于对象的形状描述，函数的类型描述，类的行为进行抽象
思想：实现（implements）不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用 implements 关键字来实现
门是一个类，防盗门是门的子类。防盗门有一个报警器的功能，给防盗门添加一个报警方法。车类，也有报警器的功能，就可以考虑把报警器提取出来，作为一个接口，防盗门和车都去实现它
interface Action{ 定义接口
readonly id: number;//只读属性
name:string;
age?:number;可选
[propName: string]: any;//任意属性
eat?():string 可选方法的返回值
}
类实现接口：class 类 implements 接口{}
类实现多个接口：class 类 implements 接口1,接口2{}
泛型:
定义"变量" 时不确定类型,希望在使用时再来确定类型
在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性
function 函数<T,U>(length: number, value: T,arg:U): Array<T|U> {}
函数名后添加了 <T>，指代任意输入的类型 value: T 接收任何输入类型 Array<T>输出数组泛形
函数<string,number>(参数) 使用的时候再指定类型
浙公网安备 33010602011771号