初学angular和typescript

Typescript

• JavaScript的超集 JavaScript和es6的内容都可以在typescript中直接使用
• typescript的代码依然需要编译成JavaScript使用
• 安装npm install -g typescript 后缀名.ts
• 编译tsc 文件名.ts 生成一个js文件 (在我的电脑上不能使用vscode的cmd 只能使用电脑的cmd)

基础类型

• var 变量:类型=值

• let 变量:类型=值

• const 变量:类型=值

• function a(参数:类型){}

• 如果变量的值与变量的类型不同 会报错(但是可以编译成功)

• 基本数据类型在确定类型后 不能使用new 构造函数()来创建 可用使用构造函数()

  // 变量在定义并赋值后  会根据值确定类型  也可以在定义赋值时定义类型
  let a:boolean=true
  let a:number=1
  let a:string='a'  // 可用使用模板字符串
  // 只读数组  let a:ReadonlyArray<类型>=[]  该数组不能增删改  也不能为其他变量赋值
  let a:元素类型[]=[该类型的元素1,该类型的元素2]  或  let a:Array<元素类型>=[]
  // 可以在任何类型定义undefined和null  void不能给其他类型赋值
  let a:void=undefined/null 
  let a:null=undefined/null
  let a:undefined=undefined/null 
  function a():void{} // 表示没有返回值
  function a():类型{} // 设置返回值类型
  
  // 元组  表示一个已知元素数量和类型的数组
  let a:[类型1,类型2]=[元素1,元素2]   let a:[string,number]=['',1]
  // 当访问一个越界元素时  会使用联合类型替代
  x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型
  x[6] = true; // Error, 布尔不是(string | number)类型
  console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString
  
  // 任意值类型  在定义时未定义类型也没有赋值的变量默认为任意值类型
  let a:any=值  
  
  // 联合类型
  let a:类型1|类型2=值
  
  // never类型  表示那些永远不存在值得类型   
  // 总是会抛出异常或根本不会有返回值得函数或箭头函数得返回值类型
  // never是任何类型得子类型  但是其他类型不能赋值给never类型
  // 返回never的函数必须存在无法达到的终点
  function error(message: string): never {
      throw new Error(message);
  }
  
  // object类型  可以为对象添加删除属性、方法  但不能调用方法、访问属性、修改属性或方法
  let a:object={
      say:function(){}
  }
  a.say() // 报错
  
  // 类型断言  当使用jsx时 只能使用as语法  使ts忽略类型检查
  // 尖括号语法
  let someValue: any = "this is a string";
  let strLength: number = (<string>someValue).length;
  // as语法
  let someValue: any = "this is a string";
  let strLength: number = (someValue as string).length;
  // 使用变量的方式也可以忽略检查
  function creatSquare(a:接口):{color:string;width:number}{
      return a;
  }
  let squareOptions = { colour: "red", width: 100 };
  let mySquare = createSquare(squareOptions); // 不会报错
  

枚举

• 使用枚举类型可用为一组数值赋予友好的名字

  enum 枚举类{}
  

接口

interface Person{
    name:string; // 必须具有的属性
    age?:number; // 不是必须具有的属性  但是有该属性时必须是number类型的  ？为非必须
    readonly height:number  // 只读属性
    [propName:类型]:类型  // 第一个类型为属性本身的类型(正常来说是string)  第二个是属性值的类型  表示可以多写
}
let Tom:Person={
    // 多写会报错  必须与接口保持一致
    name:'tom',
    age:1
}

function printLabel(labelledObj: { label: string }) {
  console.log(labelledObj.label);
}  // 规定传入的对象的label属性必须为string类型
let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);

// 接口写法
interface LabelledValue {
  label: string;
}
function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}
let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

// 函数类型
interface 接口{
    (参数1:类型,参数2:类型):返回值类型
}
let 函数名:接口
let 函数名=function(参数1:类型,参数2:类型):返回值类型{
    // 函数的参数名可以与接口定义的不同  对应位置的类型相同即可
}

// 可索引类型  可用于对象 数组等
interface 接口{
    readonly [index:number]:string
    // 表示当用number去索引的返回值必须是string类型的  不能同时设置两次
    // 这样设置后属性的值必须为string
    length:number // 正确 
    name:string // 报错
}

// 类类型  使用接口来明确地强制一个类去符合某种契约
// 接口描述了类的共有部分  它不会检查是否具有某些私有成员(在类中可以多写属性  但是实例对象的属性不能多于类)
interface 接口{
    a:string;
    b(c:string)
}
class 类 implements 接口{
    constructor(){
        
    }
    a:string;
    b(c:string){
        
    }
}

// 继承接口
interface A{
    color:string;
}
interface B{
    width:number;
}
interface Aa extends A,B{ // 可以同时继承多个接口  用,隔开
    length:number;
    // 同时具有color和width属性的限制
}

// 混合类型 ？
// 一个对象可以同时作为函数和对象使用  并带有额外的属性
interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = <Counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

// 接口继承类

Angular

• 安装Angular.cli npm install -g @angular/cli
• 创建项目 ng new 文件名
• 省略安装nodemodules ng new 文件名 --skip-install 然后进入文件 npm install
• 启动 npm start