学习angualr之前需要了解的typeScript知识

官网 ： www.typescriptlang.org

 

1.编译型语言

2.强类型语言

3.真正的面向对象的语言： 有借口、有泛型、有枚举、有访问修饰符

AMD类型的面向对象的语言

 

 

npm install -g typescript        下载编译工具

 

编译ts文件       tsc xxx.ts/xxx.tsx/xxx.d.ts

 

 

一、有类型的script   ----  在编译期进行检查,ts只编译不执行

    【声明变量】

      var 变量名： 类型

      var a:number;

 

    【基本类型】

    number

    string    

    boolean   ： 只有两个值，true、false

    symbol  :  

    void  ：  空，一般情况下用做返回值。不允许赋值

    null ： 只有一个类型 --- null 

    undefined ： 只有一个类型---undefined

    enum   :  枚举, 列举所有的东西 

            性别、星期---有限的可能性

 

enum Gender{
    male,
    female
}

var sex:Gender;

   

any :  任何类型。 变体变量---没有固定类型，可以是任何类型

 

    js的变量都是变体变量.

 

var a: any;

a = 12;
a = 'abc';

【类型推理、类型推测】---根据初始化的值推测类型（隐式类型推测）

【类型推理、类型推测】---根据初始化的值推测类型（隐式类型推测）

var a = 13;

a = 'abc';  //  报错  ， ts 已经推理 a: number;

var a;

a = 12;
a = 'abc';     // a: any;

【冲突检测】编译器会自动排除掉无用的选项

enum WEEK {
    SUN,
    SAT,
    FRE,
    TUS
}

var w = WEEK.SUN;

switch(w) {
    case WEEK.SUN:
        break;
    case WEEK.STA;
        break;
}

// 报错，不会出现WEEK.STA,所以ts编译器认为不应该写第二种case

【联合类型】

var a:number | string;

a = 12;
a = 'abc';

var a:number | string;

var b: boolean;

a = b ? 12: false;
// 报错，false不能作为结果  

【数组的类型】

var arr = [12, 5, 8];    // 隐式类型声明  var arr:number[] = [12, 5, 8];

arr[3] = 'abc';   //  报错

arr: 类型[]  = [];

 

数组其实还是一种泛型；

 

Array --- 典型的泛型  

 

interface Array<T> {
    reverse(): T[];
    sort(compare?: (a: T, b:T) => number):T[];
    ...
}

var arr:number[] = [12, 5];

//  等同于

var arr: Array<number> = new Array<number>();

【函数的类型】 参数和返回值都可以定义类型

function show(a: any, b:number) {
    console.log(a + b);
}

show(12,5);    // 报错

参数不仅可以有类型还有函数签名检查(匹配参数的数量)

function show(a: number, b: number) {
    console.log(a + b);
}

show(12);  // 报错

返回值

function sum(a:number, b:number):string {
    return a + b;
}

console.log(sum(12,5));   // 报错，返回值是string

【外部变量声明】 declare

console.log(a);    // 报错  

declare var $;

$(function() {
    $('#div')
})
// 不报错

window、 document   叫内置外部声明，不用再次声明。

 

【函数签名】

 

function ajax(url: string, success: (res: string, code: number) => vodi, error: (code:number) => void) {
    ;
}

ajax('1.txt', () => {}, () => {});   // 参数和返回值都有约定

 

【类型】

 

1.基本类型

2.联合类型

3.函数签名

4.对象类型

5.联合类型（复合类型）

 

 

【符合类型--可选类型】

 

var point: {x:number, y:number, z?:number};

point = {x:12,y:5}

point = {x:12,y:5,z:8}

function show(a: Object) {

}
// json

二、接口：interface

 

java中:

 

class Click implements inter {

}

 

接口就是一种约定和限制,是一种必须遵守的规范

 

    比如说 汽车---接口：能开、必须加油

 

interface Point {
    x: number,
    y: number,
    z?: number
}

var p:Point

p = { x:12, y:5};

三、class

class Person {
    // 成员属性
    name: string;
    age: number;
    
    // 构造器
    constructor(name: string, age:number) {
        this.name = name;
        this.age = age;
    }
    
    // 成员方法
    showMe() {
        console.log(`我的名字是${this.name},我的年龄是${this.age}`)
    }
}

var p = new Person('jason', 18);

p.showMe();

包括class、extend、多继承

 

 

【访问修饰符】

 

1.public          共有属性            任何类可访问，全局

2.private         私有属性            只有类内部可以访问

3.protected    受保护--友元

 

class Person {
    public name: string,
    private age: number
}

var p = new Person();

p.name = 'jason';   // 报错，name只能在class内部使用

四、泛型。（模板）

 

请区别于any，泛：宽泛（主要原因）

 

class Calc<T> {
    a: T;
    b: T;   

    constructor(a:T, b: T) {
        this.a = a;
        this.b = b;
    }

    show(c: T) {
        console.log(this.a);
    } 
}

var obj = new Calc<number>(12, 5);

obj.a = 12;
obj.b = 'abc';     //  没生命类型为any,但是<number>会替换class中的<T>

obj.show(99);

有限制，但不是any，是一个有范围的any。