angular7 学习笔记记录--1. TypeScript基础

一、 基础类型和声明： number; string，boolean; 

    //let 修饰变量。 [:] 冒号限定类型； 

　　let  a : number;

　　let  b : string;

　　let c: string[];

　　let d: boolean;

　　let e = 'e';    直接赋值，自动转换类型；

　//元组 [限定类型]

　　let tuple : [string, number];

　　tuple = ['tom', 20];  // 只能按照类型赋值

　//const 修饰常量；也用来修饰对象实例化。

　　const PI=3.1415926;

　　const pers = new Person('tome','jerry', 12);

　//any 任意类型

　　const result : any;

　　const foo: any[];

　//void 无返回值

　function fn() : void { 

　}

　//枚举

　enum Color (RED, BLUE, GREEN)

　Color.RED

　

二、接口: interface 约束类型的结构。

 　interface Person {

　　firstName: string;

　　lastName: string;

　　age: number;　

　}

//调用demo

　function greeting(person : Person) {

　　return person.firstName+' ' + person.lastName+' : ' + person.age;

　}

const myname = greeting({firstName:'tom', lastName: 'hanks', age: 12});

console.log(myname);

三、类class

 1.基本用法(包含：属性，构造方法，其他方法）

  class Greeter {

　　greeting: string;

　　constructor(msg: string) {

　　　　this.greeting = msg;

　　}

　　greet() {

　　　　return 'Hello, ' + this.greeting;

　　}

}

//调用demo

const greet1 = new Greeter(' Angular world! ');

console.log(greet1);

 2.继承

 class Animal {

　 protected type : string;

　　//当父类拥有构造方法时，子类必须调用之。

　　constructor(type: string, public myname?: string='something') { // 问号代表可选参数

　　　　this.type = type;

　　}

　　move(distance:number = 0) {  //参数缺省初值，使用等号

　　　　console.log(this.myname + '[' + this.type + ']移动了' + distance + '米！');

　　}

}

class Dog extends Animal {

　　

　　constructor(myname?: string='something') { // 问号代表可选参数

　　　　super('dog', myname);

　　}

　　bark() {

　　　　console.log('汪汪！');

　　}

　　move(distance: number=3) { //override

　　　　console.log('do something'); 

　　　　super.move(distance);　　

　　}

　　move (a, b) { //overload

　　　　return a+b;

　　} 

}

const dog = new Dog('旺财');

dog.bark();

dog.move();

dog.move(10);

3.类型修饰符,访问范围同java, 多了readonly

　　public, private, protected , readonly 

 

* 特色：

　　给构造方法参数加上修饰符， 构造方法的参数会自动定义并初始化为成员变量。

//  construct ( private type: number) {

}

//然后类就有成员变量 type了。

4.静态成员： static 关键字修饰。 同java使用习惯。

5.存取器：使用 get  set 关键字

　　private _type : string;  //前面用下划线开头。约定？

　　get type():string {

　　　　return 'abc';

　　}

　　set type(type:string) {

　　　　this.type = type;

　　}

//

obj.type = 'hello type';

console.log(obj.type);

四、函数

　　1.函数的参数时必须的。

　　2. 函数参数赋初值使用 func（name:string = 'default'）

　　3. 函数可选参数使用问号修饰 func（name ? :string)

五、泛型

 　　1.  不用泛型：使用any

　　　　function noGeneric(arg: any) :any {

　　　　　　return arg;

　　　　}

　　2. 使用泛型； //T 称为类型变量。只标识类型，不代表值。

　　　a. 泛型方法：

　　　function useGeneric<T>(arg: T) : T {

　　　　　　return T:

　　　　}'

　　//demo

　　userGeneric<String>('abc');

　　userGeneric(1);

　　b. 泛型接口: demo

　　interface Result<T, U> {

　　　　success: boolean;

　　　　data : T;

　　　　data2?: U;

　　}

　　class User {

　　　　id : number:

　　　　name: string;

　　}

　　const r: Result<User> = {

　　　　success: true;

　　　　data: {id: 1, name: 'tom‘ }

　　}

 　　c. 泛型类

　　　class Result<T> {

　　　　　constructor(public success: boolean, public data: T) {

　　　　　　}

　　　　}

　　const r2 : Result<User> = new Result<User>(tue, {id:1, name: 'tome'})；
　　console.log(r2.success);

　　console.log(r2.data);

 

　　3. 泛型接口约束

　　interface Lengthwise {

　　　　length: number;

　　} 

　　//约束传参的对象必须带有length属性。

　function useGeneric<T extends Lengthwise> {

　　　return T;

　　}

　　//使用

　　useGeneric({id:1, length: 30});

 

 

六、模块：导入导出

 　　具名导出：export

　　新建 myModule.ts

　　export const HOST = 'http://localhost:4200';

　　export class Foo {

　　bar: string;

　　}

　　const Bar = 'bar';

　　const abc = 'abc';

　　export {Bar, abc as ooxxx};

　　　　//使用别名： as 

　　//默认导出， 导入时不用花括号

　　　export defult class User {

　　　　id : number;

　　　　name :string;

　　}

　　//导入,在文件写

　　import User, {HOST, Foo, Bar as bar} from ./myModule  类似java

　　console.log(HOST);

　　const User u = new User();

　　console.log(bar);

⑦： @ 关键字代表装饰器, 在类class, 或者变量上面。 类似java注解。

　　后台机制，使用工厂模式，给当前类增加装饰内容。

　　@NgModule({})

　　export class AppModule() {

　　}

　　实际上：

　　NgModule(cfg)(AppModule）；

 小练一手：学生端：用户登录、注册

　　使用命令：　　ng   g  c login

　　1.创建登录组件 login

　　2. 创建注册组件 register

　　3.增加路由

　　　　3.1 声明路由

　　　　const routes : Routes = [{path, component}, ....]

　　　　3.2 导入路由模块：

　　　　imports: [

　　　　　　RouterModule.forRoot(routes)

　　　　]

　　4.放入路由插座，写。

　　　　<router-outlet></router-outlet>

　　5. index界面增加路由连接

 　　　　<a routerLink="login"　　routerLinkActive="active">登录</a>

 　　　　<a routerLink="register"　　routerLinkActive="active">注册</a>

 

最后，TypeScript 说是ES6的超集，其实时微软照C#搞的一套东西，很JAVA.