typescript

Angular
一.Angular介绍
1.安装Angular-cli脚手架
1.安装Node
2.安装npm
3.安装Python
4.安装c++编译工具
angular cli在windows上同时依赖c++编译工具，
npm install --global --production windows-build-tools
安装cnpm
npm i -g cnpm --registry=https://registry.npm.taobao.org
安装脚手架Angular cli
Angular cli是Angular官方开发的一个类似于Vue cli的脚手架开发工具，
它帮我们集成了webpack打包，开发服务器，单元测试，自动编译，部署等功能。
cnpm i -g @angular/cli
测试：ng --version

2.使用AngularCli初始化Angular
ng new 项目名（angular-demo）
在命令行中会自动执行装包，因为是用npm安装的，用Ctrl+c打断
进入刚创建的项目名
cd angular-demo
cnpm install
使用脚手架工具初始化项目完成之后，就可以启动开发模式了
在angular -demo目录下执行ng serve
默认占用4200端口，可以使用ng server --port 端口号修改
找到./src/app/app.components.ts文件，将AppComponent 组件类中title 修改
可以看到浏览器中对应的改变。

3.一个Angular应用是如何启动的
项目结构介绍
e2e端到端的测试
src源码
angular-Cli.json angularcli脚手架工具配置文件
editorconfig 针对编辑器的代码风格约束
gitigonre git仓库忽略配置项
tslink.json TypeScript 代码风格校验工具配置文件
二.Typescript介绍和使用
1.核心特性-组件
component 是整个框架的核心，也是终极目标。组件化的意义有两个
第一是分治，因为有了组件，可以把各种逻辑封装在组件内部，避免混在一起
第二是复用，封装成组件之后不仅可以在项目内部复用，而且可以沉淀下来跨项目复用
生成组件 ng genetate component 组件名称
模块
模块是组织业务代码的利器，按照业务场景，把组件，服务，路由打包到模块里面。
服务是针对某个单一或系统功能的封装，例如在http服务
2. typescript
1.typescript数据类型

    布尔值
    let idDone:boolean = false;

    数字
    let  amount: numbet = 7;

    字符串
    let foo:string = 'hello';
    字符串也支持模板字符串
    let user = {
     name: 'jack',
     age: 18
     }
    let str:string = `大家好我叫：${user.name}我今年${user.age}岁了`

    数组
    方法1 let list:number[]=[1,2]
    方法2 let list：Array<number>=[1,2]
    
    元组
    let x:[string,number] = ['hello',10]
    
    Object
    没有类型校验和语法提示（少用）
    let foo:Object = {
     name: 'jack',
     age: 18
     }
    如下书写，可以校验
     let user:{
               name: string,
               age:number
               } ={
               name:'jack',
               age:18
               }
    使用接口
    interface Person{
               name：string，
               age： number
    }
    ler user:Person={
               name: 'jake',
               age: 12
    }
    Any
    任意类型（尽量少用）

    Void(用于函数返回值）
    没有任何类型
    function add(x:number,y:number):number{
       return x+y
    }
    var ret:number = add(10,20);
    function fn():void{
       console.log('hello')
    }

    Null和Undefined
    和void相似，它们本身的类型用处不是很大
     let u:undefined = undefined
     let n:null = null

2.typescript解构赋值
数组解构赋值(数组按照顺序解构）
let arr：number[]= [1,3]
let [num1,num2] = arr
对象解构赋值（对象按照属性名称解构）
let user = {
name:‘jack’,
age:23
}
//在浏览器环境中，window对象本身就有一个成员name
let {name:nickname,age} = user

3.typescript剩余参数
function aa(…args:number[]){
console.log(args);
}
aa(1,2,3,4)

    数组展开操作符
     let arr1 = [1,2,3]
     let arr2 = [3,2,1,...arr1]
    对象展开操作符
     let obj1 = {
         foo:'bar'
     }
     let obj2 = {
         ...obj1,//对象的展开操作符，一般用于对象拷贝，混入
         name: 'jack'
     }

4.typescript类的基本用法
//类就是构造函数的另一种书写方法
//构造函数的写法
function Person(name:string,age:number){
this.name = name;
this.age = age;
}
Person.prototype.sayHey= function():void{
console.log(this.name,this.age)
}
var pp = new Person(‘zhangsan’,‘12’)
pp.sayHey();
//类的写法
class Person {
//typescript要求类的成员应该被定义出来并确定类型
name:string;
age: number
constructor(name:string,age:number){
this.name = name;
this.age = age;
}
//实例方法
sayHello(){
console.log(this.name,this,age)
}
}
let pl = new Person(‘lisi’,12);
p1.sayHello();
5.typescript类的继承
class Person{
name:string;
age:number;
construsctor(name:string,age:number){
this.name = name;
this.age = age;
}
sayHey(){
console.log(‘sayHey’)
}
}
class student extends Person{
constructor(name:string,age:number){
super(name，age)//super就是父类的构造函数
}

 }   new student().sayHey()
     new studnet('zh',19).sayHey()

6.typescript类成员访问修饰
//默认都是对外公开的
//private 用来声明私有成员
//私有成员无法被继承
//受保护的成员可以被继承，只能在子类中调用，不能在子类的实例中调用
//readonly只读，不允许修改
class Person{
public readonly name: string = ‘张三’;
public age: number;
//可以在声明成员的同时为其赋值
type:string = ‘人类’;
protected foo:string=‘bar ’
gettype(){
//在类的内部访问私有成员,在外部无法访问
return this.type
}
}
class student extends Person{
getfoo(){
console.log(this.foo)
}
}
new student().getfoo()
类的简写
class Person{
public name: string;
public age: number;
constructor(name:string,age:number){
this.name = name;
this.age = age;
}
}
等价于
class Person{
constructor(public name: string,public age:number){}
}
7.typescript属性的get和set
class Person{
private _age:number;
get age(){ return this.age}
set age(val){ if(val<0){throw new Error(‘年纪不能为空’)} this._age = val;}
}
let p1 = new Person()
p1.age=-10;//报错

8.typescript类的静态成员
不需要实例化访问的成员称之为静态成员，即只能被类访问的成员
实例成员，只能通过new 出来的实例访问
静态成员，只能通过类本身访问
9.typescript函数
function add(x:number,y:number):number{
rerurn x+y;
}
可选参数
function add(x:number,y?:number):number{
rerurn x+10
}
默认参数
function add(x:number,y:number= 20):number{
rerurn x+y
}
剩余参数
function sum(…args:number[]):number {

      }
      sum(1,3,3)
      箭头函数
      let add = (x:number,y:number)=>x+y

10.typescript-for-of循环
let arr:number[] = [1,3,4];
for(let val of arr){
console.log(val)
}

11.typescript模块
模块导出
export default xxx
export const foo：string = ‘bar’,
export const bar:string = ‘’
模块导入
import xxx from ‘模块标识’
import {foo，bar} from ‘模块’
12.typescript总结
13.组件介绍