第3章第314回TypeScript基础

Posted 2021-04-25 前端JavaScript

TypeScript基本语法

TypeScript 是微软开发的 javascript 的超集，TypeScript兼容JavaScript，可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方 包括：加入注释，让编译器理解所支持的对象和函数，编译器会移除注释，不会增加开销；增加一个完整的类结构，使之更新是传统的面向对象语言。

1、基本数据类型

Boolean

// Boolean

var isDone:boolean = false;

Number

// Number

var width:number = 100;

String

// String

var name:string = "hello"

Array

// Array

var list:number[] = [1,2,3];

var Array<number> = [1,2,3];

Enum

// enum Color {Red, Green, Blue}

var c: Color = Color.Red;

alert(c); //默认从零开始，alert(0);

// 可以手动设置指定值

enum Color1 {Red= 1, Green, Blue}

var c1: Color1 = Color1.Green;

alert(c1)  // alert(2)

// 根据值查找名称

enum Color2 {Red= 1, Green= 2, Blue= 4}

var c2: String = Color2[4];

alert(c2); // alert(Blue)

Any

// 不确定类型，退出编译检查

var notSure: any = 4;

notSure = "maybe a string instead";

console.log(notSure);

notSure = false;

console.log(notSure);

// 不确定数组元素类型

var anylist: any[] = [1, true, undefined]

console.log(anylist);

anylist[50] = 123;

console.log(anylist)

Void

// 空白

function warnUser(): viod {

    alert(123);

}

类型断言

// 在使用JSX语法时，只有as断言语法是被允许的。

let someValue: string = "I'm string value";

// let strLength: number = (<string>someValue).length;

let strLength: number = (someValue as string).length;

console.log(strLength);

类

基本语法

class Animal{

    animalName: string;

    constructor(name:string){

        this.animalName = name

    }

    sayHello(){

        alert(this.animalName + ": hello!")

    }

}

var tom = new Animal("Tom");

tom.sayHello();

继承

class Cat extends Animal {

    // 重写sayHello方法

    sayHello() {

        console.log(this.animalName + "(Cat): " + "Hello")

    }

}

class Mouse extends Animal {

    sayHello() {

        console.log(this.animalName + "(Mouse): " + "Hello")

    }

}

var cat = new Cat("Tom");

cat.sayHello();

var mouse = new Mouse("Jerry");

mouse.sayHello();

修饰符

如果学过强类型语言这里很好掌握

// public private static

class Animal {

    public animalName: string;

    constructor(name:string) {

        this.animalName = name

    }

    sayHello() {

        alert(this.animalName + ": hello!")

    }

}

set、get访问器

interface

function printLabel(labelObj: { label: string}) {

    console.log(labelObj.label);

}

var myobj = {label: "33333"};

printLabel(myobj);

// 使用interface

interface LabelledValue {

    label: string;

}

function printLabel(labelObj: LabelledValue) {

    console.log(labelObj.label)

}

printLabel({label: "1234"});

类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以。

可选属性

接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。 可选属性在应用“option bags”模式时很常用，即给函数传入的参数对象中只有部分属性赋值了。

interface SquareConfig {

    color?: string;

    width?: number

}

function createSquare(config: SquareConfig): {color: string, area: number} {

    var newSquare = {color: "red", area: 100};

    if(config.color) {

        newSquare.color = config.color

    }

    if(config.width) {

        newSquare.area = config.width * config.width

    }

    return newSquare

}

var mySquare = createSquare({color: "black"});

函数类型

接口能够描述JavaScript中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外，接口也可以描述函数类型。

为了使用接口表示函数类型，我们需要给接口定义一个调用签名。 它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

interface SearchFuc {

    (source: string, subString: string): boolean

}

var mySearch: SearchFunc = function(src, sub) {

    var result = src.search(sub);

    if (result == -1) {

        return false;

    }

    else {

        return true;

    }

}

console.log(mySearch("123","123"));

数组类型

与使用接口描述函数类型差不多，我们也可以描述数组类型。 数组类型具有一个index类型表示索引的类型，还有一个相应的返回值类型表示通过索引得到的元素的类型。

interface StringArray {

    [index: number]: string | number

}

var myArray: StringArray = ["1", "2", 9];

console.log(myArray);

支持两种索引类型：string和number。 数组可以同时使用这两种索引类型，但是有一个限制，数字索引返回值的类型必须是字符串索引返回值的类型的子类型。

索引签名能够很好的描述数组和dictionary模式，它们也要求所有属性要与返回值类型相匹配。 因为字符串索引表明obj.property和obj["property"]两种形式都可以。 下面的例子里，name的类型与字符串索引类型不匹配，所以类型检查器给出一个错误提示：

interface NumberDictionary {

  [index: string]: number;

  length: number;    // 可以，length是number类型

  name: string       // 错误，`name`的类型不是索引类型的子类型

}

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

====================