typescript 学习笔记

typescript

编译命令

• tsc app.ts

基本数据类型

- var isBoon：boolean = false; (不给值默认 undefined)

- var num: number = 10;

- var str: string = "abc";  

- var list1: number[] = [1,2,3];   (方式1)

- var list2: Array<string> = ["a","b"];  （方式2）

- 枚举类型 enum Color {red,green,blue};

- 任何类型 var notSure: any = 10;

- void类型（函数）

// 枚举  (一个星期)

enum Color {red,green,blue};
var colorName: string =  Color[1];    // green

// 可自己更换下标
enum Color {red = 10,green = 20,blue};
var colorName: string =  Color[10];    // red

// 获取下标
var c: Color = Color.green;
console.log(c)     // => 20

// any 类型   可改变其值

var notSure: any = 10;
notSure =  "hello";
notSure = false;

console.log(notSure)    // false;

var list: any[] = [1,"hehe",false];
console.log(list[1])   // hehe

// void 类型   函数
function demo1(): string {}   // 返回值类型 string
function dmeo2(): number{}  // 返回值类型 number
function demo3():  void{}  // 此函数可以有返回值也可以没有

函数类型

// 命名函数
// 可指定形参可返回值的类型
function add(x: number, y: number): number{
    return x+y
} 

// 匿名函数
var myAdd = function (x: number, y: string): string{
    return "hello TS"
}

// 让参数有明确的意义
var myAddts: (name: string, age: number) => number = function(n: string, a: number): number {
    return a;
}

// =================================================

// 可选参数
function buildName(firstName: string, lastName: string) {
    return firstName + lastName;
}
var result = buildName("hhe","haha");
var result2 = buildName("hehe");  // 报错  少一个参数
var result = buildNmae("hehe", 'haha', 'dudu'); // 报错 超出参数

// ? 表示可传可不传
function buildName(firstName: string, lastName?: string){
    if(lastName){
        return firstName + lastName;
    }else{
        return firstName;
    }
}
var result = buildName("hhe", "haha");
var result2 = buildName("hehe");  // 正常编译
var result3 = buildNmae("hehe", 'haha', 'dudu'); // 报错 超出参数

// =================================================

// 默认参数
function buildName(firstName: string, lastName: string = "liu"){
    return firstName + lastName;
}
var result = buildName("liu");  // liuliu
var result2 = buildName("liu",'xin');  // liuxin
var result3 = buildName("liu","xin","ya");  // error

// =================================================
// 可变参数（不限参数的个数）
function demo(firstName: string, ...restOfname: string[]){
    return firstName + "" + restOfname.join(" ")
}
var a = demo("a",'b','c','d');

Lambads和this关键字的使用

var people = {
    name:['a','b','c'],
    getName: () => {
        var i = Math.floor(Math.random()*4);
        return {
            n: this.name[i]
        }
    }
}
var myName = people.getName();
alert(myName().n) 

重载

function attr(name: string): string;
function attr(age: number): number;
function attr(nameorage: any): any{
    if(nameorage && typeof nameorage === 'string'){
        alert("姓名")
    }else{
        alert("年龄")
    }
}
attr('hello');   // 姓名
attr(10);   // 年龄

类

class Person {
    name: string;
    age: number;
    constructor(name: string,age: number){
        this.name = name;
        this.age = age;
    }
    print(){
        return this.name + this.age
    }
}
var p = new Person("hehe", 18);  // 必须传参
p.print();

类的继承

class Person {
    name: string;
    age: number;
    tell() {
        return this.name + ":" + this.age;
    }
}

// 表示学生类也拥有Person类的name和age属性
class Student extends Person {
    school: string;
    tell() {
        return this.name + this.age + this.school
    }
}
var s = new Student();
s.name = "liu";
s.age = 800;
s.school = "hehe";
alert(s.tell());

//  ========================

class Person {
    name: string;
    age: number;
    constructor(name: string,age: number){
        this.name = name;
        this.age = age;
    }
    tell(){
        return this.name + ":" + this.age;
    }
}

class Student extends Person {
    school: string;
    constructor(school: string){
        this.school = school;
        super("liu", 20);
    }
    tell(){
        return this.name + this.age + this.school
    }
}
var s = new Student("hehe");
alert(s.tell());   // liu20hehe

访问修饰符

• public 默认
• private

class Person {
    private name: string;   // 表示私有属性 不可被继承
    age: number;
    print(){
        return this.name + this.age
    }
}
class Stu extends Person{
    school: string;
    print() {
        return this.name + this.age + this.school
    }
}
var stu1 = new Stu();
stu1.name = "liu";
stu1.age = 18;
stu1.print();
// 这样编译会报错   应为Person类的name是私有属性，stu访问不到

// ==============

class Person {
    name: string;
    age: number;
    constructor(private name: string, age: number){
        this.name = name;
        this.age = age;
    }
    print(){
        return this.name + this.age;
    }
}
class Stu extends Person {
    school: string;
    constructor(school) {
        this.school = school;
        super("liu", 18)
    }
    print(){
        return this.name + this.age + this.school;
    }
}
var stu1 = new Stu("hehe");
stu1.print();   // 报错 因为Person的name是私有的

封装的实现

class Person {
    private name: string;
    say() {
        return this.name;
    }
}
var p = new Person();
p.name = "liu";
p.say();  // 报错

// 访问和设置私有属性

class Person {
    private name: string;
    say(){
        return this.name
    }
    get _name(): string{
        return this.name;
    }
    set _name(newName: string){
        this.name = newName;
    }
}
var p = new Person();
p._name = "haha";
alert(p.say())  // haha

static 的使用

class Person {
    static name: string ;
    tell() {
        return this.name
    };
}
var p = new Person ();
p.name = "liu";   // 报错  static不能通过实例对象来调用
p.tell();

// =======正确调用name属性====
class Person {
    static name: string;
    tell(){
        return Person.name;   // 类名.属性名
    }
}
var p = new Person(); // 类名.属性名
Person.name = "liu";
p.tell();

接口

function fn(obj: {name: string}){
    alert(obj.name);
}
var myObj = {name: "liu"};
fn(myObj)

// ===================
interface labelValue{
    name: string;
}
function print(label: labelValue){
    alert(label.name)
}
var obj = {name: "xin"};
print(obj)

接口的可选属性

interface USB{
    name:string;
    age:number;
}
function print(obj: USB){
    console.log(obj.name)
    console.log(obj.age)
}
var obj = {name: "liu", age: 10};
print(obj)
// obj里面必须有name和age

// =================
interface USB{
    name?: string;
    age?: number;
}
function print(obj: USB){
    console.log(obj.name)
    console.log(obj.age)
}
var obj = {name: "liu"};
print(obj)
// ？ 代表可选  name和age都可以不写

接口的函数类型

interface PersonFun {
    (name: string,age: number): boolean
}
var fn : PersonFun;
fn = function(name: string,age: number){
    return false;
}

接口的数组类型

interface StringArray{
    [index:number]: string;
}
var myArr: StringArray;
myArr=["a","b",'c']

接口的class类型

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}
class Clock implements ClockInterface{
    currentTime: Date;
    setTime(d: date){
        this.currentTime = d;
    }
    constructor(h: number, m: number){

    }
}

接口继承与混合类型

interface Shape{
    color: string;
}
interface Square extends Shape{
    sideLength: number;
}
var s = <Square>{};
s.color = "blue";
s.sideLength = 10;

// 多继承
interface Shape{
    color: string;
}
interface Stroke{
     number;
}
interface Square extends Shape,Stroke{
    sideLength: number;
}
var s = <Square>{};
s.color = 'blue';
s.width = 10;
s.sideLength = 10;

// 混合类型
interface hehe {
    name: string;
    fn(): void;
    (age: number): string;
}
var c: hehe;
c(10);.
c.fn();

接口其他

// 有时候定义一个接口，里面的属性个数是不确定的
interface A {
  name: string;
  age: number;
  family: Array<string>;
  say: () => {};
  [prop: string]: any;  // 就是这个东西
}

//  往TreeDataObject中再添加另外两个新属性 & 符号
resultData: (TreeDataObject & {
        title: string;
        origin?: TreeDataObject
    })[] = []

泛型

• 有时候在定义变量的时候不确定变量的类型

function Hello<T>(arg: T): T{
    return arg;
}
var output = hello<string>("hello");
alert(output)

泛型的基本应用

function Hello<T>(num: T): T{
    alert(str.length);   // 报错  没有自定泛型的类型 没有length
    return num;
}
// ==============================
function Hello<T>(str: T[]): T[]{
    alert(str.length);
    return str;
}
var list:Array<string> = hello<string>(['a','b','c'])

模块

var myModule = function(vip){
    // 声明私有成员
    var Yvip = document.getElementById(vip);
    return {
        // 公开成员
        add: function(t){
            Yvip.innerHTML = "呵呵";
        }
    }
}

// =====================

module Time{
    export class Test{
        element: HTMLElement;
        span: HTMLElement;
        timer: number;
        constructor(e: HTMLElement){
            this.element = e;
            this.element.innerHTML = "现在时间是：";
            this.span = document.createElement("span");
            this.element.appendChild(this.span);
            this.span.innerHTML = new Date().toTimeString();
        }
        start(){
            this.timer = setInterval(()=>{this.span.innerHTML = new Date().toTimeString()},500)
        }
        stop(){
            clearInterval(this.timer);
        }
    }
}

模块之间的引用

• 三斜杠表达式

/// <reference path="./Validate" />

// 表示引入了一个同级文件夹下的Validate模块
// 引入后可用 Validate模块里面暴露出来的方法和属性

装饰器

// target 作用目标 Perple类 Object
// key  具体作用对象  'say' string
// desc 元数据描述  Objects
function test(target: any, key: string, desc: PropertyDescriptor) {
    console.log(target, key, desc)
    let method = desc.value;
    desc.value = function (flag:  boolean) { 
        if (flag) {
            console.log('要打印了')
        } else {
            method()
        }
    }     
}
class People {
    name: string;
    constructor(name) {
        this.name = name;
    }
    @test
    say(flag: boolean) { 
        console.log('是否打印')
    }
}
let p = new People('liu');
p.say(true)
p.say(false)

// 装饰器工厂
function test(arg) {
  return function(target, key, desc) {}
}
// 这种方式可以自己再传参（arg）

关于 reflect-metadata

• 它可通过反射机制， 获取参数类型列表

• 类型元数据使用元数据键"design:type"

• 参数类型元数据使用元数据键"design:paramtypes"

• 返回值类型元数据使用元数据键"design:returntype"

• 实现的依赖注入

import 'reflect-metadata';
let targetLists: Map<any, any[]> = new Map();   //  @Injectable 装饰器作用的所有目标列表
let instanceLists: Map<any, any> = new Map(); // 实例列表
export function Injectable(_constructor: Function) {
    // 通过反射机制，获取参数类型列表    
    let paramsTypes: Array<Function> = Reflect.getMetadata('design:paramtypes', _constructor);
    targetLists.set(_constructor, paramsTypes);
}
// 这个实例用来获取依赖注入的实例
export function Ioc(injet: any){
    return getIocInstance(injet);
}
function getIocInstance(inject: any) {
    // 存在这个实例
    if(instanceLists.has(inject)) {
        return instanceLists.get(inject);
    } else {
        // 不存在
        let relies = targetLists.get(inject) || [];
        let instance = new inject(...relies.map((rely) => {
            return getIocInstance(rely);
        }));
        instanceLists.set(inject, instance);
        return instance;
    }
}

---

@Injectable
export class Person {
    constructor(
        net: Unetservice,
    ) {}
    speak() {
        this.net........
    }
}

let p: Person = Ioc(Person);

• @Injectable 把 Person类已经存到 targetLists 里了
• Ioc 是 先看一下 instanceLists 里面有没有 Peroson的实例， 有的话 直接拿出来
  没有的话 实例化，并存到 instanceLists （方便下次ioc 直接从 instanceLists拿） 再拿出来
• 每一个类再实例化的时候， 它的constructor里面的依赖参数类 也会有和Person类一样的初始化过程

作者：liuxinya
链接：https://www.jianshu.com/p/be615c82c8a2
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。