一、 基础类型和声明： 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.