typescript会编译成JavaScript，typescript编译工具可以运行在任何的服务器和任何的系统上,typescript开源。

ts优点：1：包容JavaScript。2：定义简单到复杂的一切类型。3：ts编译报错依然可以生成js。4：拥有活跃的社区。
ts缺点：学习成本高，简单的项目效率低，与其他库兼容性不高。

安装

1. 打开vscode编辑器。或者终端或者git bash或者powershell终端。输入npm install -g typescript
   
2. 新建.ts文件。在ts文件内写相应的代码，然后执行tsc test.ts语句，将ts文件编译成js文件。
   
   然后可以在终端执行js代码node test.js
   
   当ts语句在VScode中出现函数实现重复错误时（下划红色波浪线或者终端中出现问题），在项目即文件夹的根目录新建tsconfig.json文件，并复制以下代码，即可解决。

/*tsconfig.json*/
{"compileOnSave": false,"compilerOptions": {"baseUrl": "./","outDir": "./dist/out-tsc","sourceMap": true,"declaration": false,"downlevelIteration": true,"experimentalDecorators": true,"module": "esnext","moduleResolution": "node","importHelpers": true,"target": "es2015","lib": ["es2018","dom","ESNext"]},"angularCompilerOptions": {"fullTemplateTypeCheck": true,"strictInjectionParameters": true}
}

3. 安装angular脚手架angular中文网

npm install -g @angular/cli

4. 新建anglular项目

/*会自动安装node modules，速度比较慢*/
ng new my-first-project
/*忽略node modules等包，之后再进行手动npm install安装相应的依赖包*/
ng new my-first-project --skip-install
/*然后*/
npm install
/*或者，这样速度快*/
cnpm install

1. cd my-first-project 进入相应的目录之后执行ng serve运行项目。
   

• 新建一组component组件（得有目录）

ng g component component/list

这样创建的组件就会自动在app.module.ts里面引入，无需手动引入

• 杂七杂八的示例
  .html

<div class="root"><form action="" #formobj='ngForm'><input type="text" [(ngModel)]="username"  name="username"><input type="password" [(ngModel)] = "password" name="password"><button (click)="printformobj(formobj)">ssss</button></form><hr><app-list [list]="note"></app-list><app-detail></app-detail><hr><h1>test</h1><hr>{{datalist}}<br><div [innerHtml]="htmlStr"></div><!-- 会自动过滤script标签 --><br><!-- <div [style]="['color':'red']">ll</div> --><label for="inp"><input id="inp" type="text" [(ngModel)] = "note"><button (click)="add()">add</button></label><ul><!-- <li *ngFor="let itemss of datalist;index as index;" [attr.key]="index" class="{{title}}" title="{{itemss}} + ' details'" (click)="del(index)">{{itemss}}</li> --><li *ngFor="let itemss of datalist;let i = index;" [attr.key]="i" class="{{title}}" title="{{itemss}} + ' details'">{{itemss}}<button (click)="del(i)">del</button></li><!-- <ng-template ngFor let-item [ngForOf]="datalist" let-i="index"><li>{{item}}</li></ng-template> --></ul><input type="text" #inp1><button (click)="print(inp1)">inpu1</button>
</div>

.ts

import { Component } from '@angular/core';
import { log } from 'util';
import { filter } from 'minimatch';
import { ArrayType } from '@angular/compiler/src/output/output_ast';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {htmlStr = '<h1>htmlStr<script>alert("88")</script></h1>';title = 'angular-test';datalist: string[] = ['note1', 'note2', 'note3'];note = '';password = '';username = '';add() {console.log(this.note, '***');this.datalist.push(this.note);}del(id: number) {// this.datalist = this.datalist.filter( ()=>{} )this.datalist = this.datalist.filter((item, index)  => {return index !== id;});console.log('del', id);}print(inp1) {console.log(inp1, inp1.value);}printformobj(formobj) {console.log(formobj);console.log(this.password);}
}

.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ListComponent } from './component/list/list.component';
import { DetailComponent } from './component/detail/detail.component';@NgModule({declarations: [AppComponent,ListComponent,DetailComponent],imports: [BrowserModule,AppRoutingModule,FormsModule,// NgForm],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

• 新建自定义管道（相当于vue中的filter）

ng g pipe filter/touppercase

ts数据类型

1. 布尔类型定义

let istrue:boolean
istrue=false
/*或者*/
let istrue:boolean=true
let istrue:boolean=Boolean(1)
/*但是不能new Boolean(1)，因为是对象类型*/
let istrue:boolean=new Boolean(1)//错误

2. 数值类型定义

let num:number=1
let num1:number=0xf00//16进制
let num2:number=NaN//typeof NaN===>number
let num3:number=Infinity//无穷大

3. 字符串类型定义

let str:string='ss'
let str1:string='sss'+45
let str2:string=`88${str1}`

4. 空值void，用语定义函数没有和返回值或者let u:void=null或者let u:void=undefined而不能写成let u:void=1，不可以重新赋值给其他类型如let v:void=null;let a:string=v

 /*hello函数没有任何返回值，即为void*/
function hello (){console.log(111);  
}
/*写为*/
function hello ():void{console.log(111);  
}

1. null和undefined是所有类型的子类型，可以在任何类型下重新赋值为null或者undefined

都不会报错

let u:undefined=undefined
let u1:undefined=null
let n:null=null
let n1:null=undefined

6. 任意值类型

let anything:any='abc'
anything=1
/*不会报错，允许访问这个值得任意属性，如anything.myname，值为undefined*/let something
/*something申明时没有申明类型，也没有赋值（赋值了就是该值的类型，会有类型推断），表示是任意值类型*/

7. 联合类型：既是字符串又是数字类型（| 竖线或者）
   取值可以取多个类型。

let a:string | number='a'
a=2

ts接口

接口是行为的抽象。具体行动由类实现。相当于类的描述。
关键词：interface，一般接口的首字母大写。

interface Person {name:string;age:number;
}
/*约束tom这个对象必须和Person接口的属性一致，不能多也不能少*/
let tom:Person={name:'tom',age:18
}let jerry={name:'jerry',age:18
}
/*相当于定义了普通object类型*/
// let jerry:object={
//   name:'jerry',
//   age:18
// }/*可选属性，即可以写也可以不写*/
/*
属性?:类型
*/
interface Student{name:string;age:number;grade?:number
}let s1:Student={name:'s1',age:18,grade:78
}
/*
任意属性中括号（属性名为字符串类型）和任意属性值（属性值类型为any）
*/
interface Teacher{name:string;age?:number;[propName:string]:any;
}
let t1:Teacher={name:'t1',sex:1
}
/*只读属性readonly，不允许修改，否则会报错*/
interface Cat{readonly name:string;age:number
}let tom:Cat={name:'tom',age:2
}
tom.name='tom2'//报错

implements
implements,类实现接口关键字，实现一个借口，必须实现接口中的所有方法。

• 接口可以被多重实现（implements），抽象类只能被单一继承（extends）
• 接口只有定义，抽象类可以有定义和实现。
• 接口的字段定义默认为public static final，抽象类字段默认是friendly（本包可见）

interface Cat{readonly name:string;age:number
}let tom:Cat={name:'tom',age:2
}
class BigCat implements Cat{// 类里面得包含Cat接口里面的属性，如name和age，否则会报错name:string='大猫';age:number=5;color:string='red';constructor(){}
}let bc=new BigCat()
console.log(bc.color,bc.name);

ts数组

let arr=[1,2,3,'4']//可以直接写数组
/*设定数组中的类型，如果数组中其中一个元素不满足类型，则会报错*/
let arr:number[]=[1,2,3]
let arr:number[]=[1,2,3,'4']//不可以
/*或者*/
let arr:Array<number>=[1,2,3]
let arr:Array<number>=[1,2,3,'4']//报错
// 接口表示数组，索引值是number，值也是number
interface NumArr{[index:number]:number
}
let arr1:NumArr={0:1,1:2,2:3,// 3:'4'//报错
}
console.log(arr1[1]);
// let arr2:NumArr=[1,2,3]
let arr2:NumArr=[1,2,3,'4']//报错

ts函数

ts对函数的输入（函数参数）和输出（返回值类型）都有定义类型，只要类型不符合就会报错。ts中的函数参数不能传任意数量的值（任意个参数）

function fn(a){return a
}

function 函数名(参数:参数类型):函数返回值类型{}

• 声明式写法

function sum(a:number,b:number):number{return a+b
}
let res:number=sum(1,2)
//let res:string=sum(1,2)//报错

• 函数表达式写法

let sum=function (a:number,b:number):number{return a+b
}
/*上面这种写法实质上仅将右侧匿名函数进行了定义，左边的sum这个变量没有实质的定义，而且还可进行重新定义赋值比如sum=function():number{return 1}，不推荐。建议改成*/
let sum:(a:number,b:number)=>number=function (a:number,b:number):number{return a+b
}
let res:number=sum(1,2)

• 可选参数，注意：可选参数必须放到必须参数后面，可选参数后面不允许放置必须要的参数

function sum(n:number,s?:string):string{return n+s
}

• 参数默认值

function sum(n:number=1,s:string='88888'):string{return n+''+s
}
let s=sum(4)
console.log(s);//488888

• 剩余参数：不知道具体传多少个参数

function sum(...items){
//items是数组console.log(items);  
}
function sum1(...items:any[]):void{console.log(items);  
}
sum(1,5,'8',9)
sum1(1,2,3,4,'5')

• 重载：允许一个函数接收不同数量或者类型的参数

function sum(n:number | string) :string| number{return n
}
sum(1)

ts的class类

class Animal{a=1;b=2;private c=3;protected d=4;static eat(a){//静态方法可以由类直接调用Animal.eat('fish')console.log("eat-->",a);    }test(){//静态方法可以由类直接调用Animal.eat('fish')console.log("test-->",this.c);    }static type = 'animal';public constructor (ba){this.c=baconsole.log(this.c,'*****');   }
}
/*属性可以有3种访问的修饰符进行修饰，public/private/protect*/
//默认所有属性都是public，任何地方都可以访问。
//private 私有的，只能在类的内部访问，不能在类的外面访问。
//protect，受保护的，在子类可以访问。
Animal.eat('fish')
console.log(Animal.type)
let cat=new Animal('kkkkkk')
cat.test()//可以访问私有属性  test--> kkkkkk
// console.log(cat.c);//报错[ts] 属性“c”为私有属性，只能在类“Animal”中访问。(property) Animal.c: number
// console.log(cat instanceof Animal);//true/************************************************/
//继承
class Dog extends Animal {constructor (bc){super(bc)console.log(this.d);    }
}let d1=new Dog('dog')//输出
//console.log(this.c,'*****');   =>dog *****
//console.log(this.d);    =>4

构造函数如果是私有的，就不能实例化,如private constructor(){}，如果实例化就会报错

class T{private constructor(){}
}
let a=new T()//报错，[ts] 类“T”的构造函数是私有的，仅可在类声明中访问。

• 抽象类abstract不允许实例化，一般用于继承

abstract class Pig {public name;constructor(parameters) {this.name=parameters}public abstract eat()
}
class BigPig extends Pig {constructor(a) {super (a)}eat(){console.log("eat");    }
} 
let bb=new BigPig('peiqi')
console.log(bb.name);//peiqi
bb.eat()//eat