全栈开发

TypeScript练习

Posted by

基础练习

import React from 'react'

interface Shape {
    name: string;
    width: number;
    height: number;
    color?: string;
}

function area(shape: Shape) {
    var area = shape.width * shape.height;
    return "I'm " + shape.name + " with area " + area + " cm squared.";
}

var shape = {
    name: "rectangle",
    popup: function () {
        console.log("This inside popup(): " + this.name);

        setTimeout(() => {
            console.log("This inside setTimeout(): " + this.name);
            console.log("I'm a " + this.name + "!");
        }, 3000);
    }
}

class ShapeClass {
    area: number;
    color: string;
    name: string;
    width: number;
    height: number;

    constructor(name: string, width: number, height: number) {
        this.area = width * height;
        this.color = "pink";
        this.name = name;
        this.width = width;
        this.height = height;
    }

    shoutout() {
        return "I'm " + this.color + " " + this.name + " with an area of " + this.area + " cm squared";
    }
}

class Shape3D extends ShapeClass {
    volume: number;

    constructor(public name: string, width: number, height: number, length: number) {
        super(name, width, height);
        this.volume = length * this.area;
    }

    shoutout(): string {
        return "I'm " + this.name + " with a volume of " + this.volume + " cm cube.";
    }

    superShout() {
        return super.shoutout();
    }
}

function stringDemo() {
    let name: string = "bob";
    name = "smith";
    let age = 17;
    let sentence: string = `Hello, my name is ${name}
    I'll be ${age + 1} years old next month.`;
    console.log(sentence);
}

function listDemo() {
    let list: number[] = [1, 2, 3];
    let arr: Array<number> = [1, 2, 3];
}

function tupleDemo() {
    let x: [string, number];
    x = ["Hello", 10];
    // x = [10, "Hello"];
    console.log(x[0].substr(1));
    // x[3] = 'world';
    // console.log(x[5].toString());
    // x[6] = true;
    console.log(x);
}

function enumDemo() {
    enum Color { Red = 1, Green = 2, blue = 4 };
    let c: Color = Color.Green;
}

function anyDemo() {
    let notSure: any = 4;
    notSure = "maybe a string instead";
    notSure = false;
    notSure = 4;
    notSure.ifItExists();
    notSure.toFixed();

    let prettySure: Object = 4;
    // prettySure.toFixed();
}

function asDemo() {
    let someValue: any = "this is a string";
    let strLenght: number = (someValue as string).length;
}

function f([first, second]: [number, number]) {
    console.log(first);
    console.log(second);
}

function parseDemo() {
    let intput = [1, 2];
    let [first, second] = intput;
    console.log(first);
    console.log(second);

    f([first, second]);

    let [start, ...rest] = [1, 2, 3, 4];
    console.log(start);
    console.log(rest);
}

function parseObjDemo() {
    let o = {
        a: "foo",
        b: 12,
        c: "bar"
    }

    let { a, b } = o;
    // new Name 理解：a 作为 newA
    let { a: newA, b: newB } = o;
    // 定义类型是在{}:后面
    let { a: a1, b: b1 }: { a: string, b: number } = o;
    // 默认值

}

interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): { color: string, area: number } {
    let newSquare = { color: "white", area: 100 };
    if (config.color) {
        newSquare.color = config.color;
    }
    if (config.width) {
        newSquare.area = config.width * config.width;
    }
    return newSquare;
}

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = function (start: number) { } as Counter;
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}

class Control {
    private state: any;
}

interface SelecteableControl extends Control {
    select(): void;
}

class Button extends Control {
    select() { };
}

class TextBox extends Control {
    select() { };
}

class Image extends Control {

}

class Location {
    select() { };
}

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }

    greet() {
        return "Hello, " + this.greeting;
    }
}

class Animal {
    name: string;
    constructor(theName: string) {
        this.name = theName;
    }
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m`);
    }
}

class Snake extends Animal {
    constructor(name: string) {
        super(name);
    }

    move(distanceInMeters = 5) {
        console.log("Slithering...");
        super.move(distanceInMeters);
    }
}

class Horse extends Animal {
    constructor(name: string) {
        super(name);
    }

    move(distanceInMeters = 45) {
        console.log("Galloping");
        super.move(distanceInMeters);
    }
}



function Page() {
    console.log(area({ name: "rectangle", width: 30, height: 15 }));
    console.log(area({ name: "square", width: 30, height: 30, color: "blue" }));
    shape.popup();

    var square = new ShapeClass("square", 30, 30);
    console.log(square.shoutout());
    console.log("Area of Shape: " + square.area);
    console.log("Name of Shape: " + square.name);
    console.log("Color of Shape: " + square.color);
    console.log("Width of Shape: " + square.width);
    console.log("Height of Shape: " + square.height);

    var cube = new Shape3D("cube", 30, 30, 30);
    console.log(cube.shoutout());
    console.log(cube.superShout());

    stringDemo();
    listDemo();
    tupleDemo();
    parseDemo();
    parseObjDemo();

    let mySquare = createSquare({ color: "black" });
    console.log(mySquare);

    let c = getCounter();
    c(10);
    c.reset();
    c.interval = 5.0;
    console.log(c);

    let greeter = new Greeter("World");
    console.log(greeter.greet());

    let sam = new Snake("Sammy the python");
    let tom = new Horse("Tommy the palomino");
    
    sam.move();
    tom.move(34m);

    return (
        <div>page</div>
    )
}

export default Page;

基础练习2

import React from 'react'

class Grid {
    // 在构造函数的参数前加上访问修饰符 public private
    // TypeScript 会自动为你: 声明一个同名的类属性；并在构造函数内部将传入的参数值赋给该属性。
    constructor(public scale: number) { }
    static origin = { x: 0, y: 0 };
    calculateDistanceFromOrigin(point: { x: number; y: number; }) {
        let xDist = (point.x - Grid.origin.x);
        let yDist = (point.y - Grid.origin.y);
        return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
    }
}

abstract class Animal {
    abstract makeSound(): void;
    move(): void {
        console.log("roaming the eaching...");
    }
}

abstract class Department {
    constructor(public name: string) { }

    printName(): void {
        console.log("Department name: " + this.name);
    }

    abstract printMeeting(): void;
}

class AccountingDepartment extends Department {
    constructor() {
        super("Accounting and Auditing");
    }

    printMeeting(): void {
        console.log("The Accounting Department meets each Monday at 10am.")
    }

    generateReports(): void {
        console.log("Generating accounting reports...");
    }
}

function add(x: number, y: number): number {
    return x + y;
}

function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + " " + lastName;
    } else {
        return firstName;
    }
}

function restName(firstName: string, ...restOfName: string[]) {
    return firstName + " " + restOfName.join(" ");
}

function identity<T>(arg: T) {
    return arg;
}

function loggingIdentity<T>(arg: T[]): T[] {
    console.log(arg.length);
    return arg;
}

class GenericNumber<T> {
    // （感叹号）放在属性名后面，叫做 “明确赋值断言”
    // 我保证这个属性一定会在使用前被赋值，即使 TypeScript 无法静态检测到这一点，请不要报错。
    zeroValue!: T;
    add!: (a: T, b: T) => T;
}

interface Lengthwise {
    length: number;
}

function loggingIdentity2<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}

enum Direction {
    Up = 1,
    Down,
    Left,
    Right
}

interface Padder {
    getPaddingString(): string;
}

class SpaceRepeatingPadder implements Padder {
    constructor(private numSpaces: number) { }
    getPaddingString(): string {
        return Array(this.numSpaces + 1).join(" ");
    }
}

class StringPadder implements Padder {
    constructor(private value: string) { }
    getPaddingString(): string {
        return this.value;
    }
}

function getRandomPadder() {
    return Math.random() < 0.5 ?
        new SpaceRepeatingPadder(4) :
        new StringPadder(" ");
}

function Page() {
    let someArray = [1, "string", false];

    for (let entry of someArray) {
        console.log(entry);
    }

    for (let i in someArray) {
        console.log(i);
    }

    let pets = new Set(["Cat", "Dog", "Hamster"]);
    for (let pet in pets) {
        console.log(pet);
    }

    for (let pet of pets) {
        console.log(pet);
    }

    let padder: Padder = getRandomPadder();
    if (padder instanceof SpaceRepeatingPadder) {
        padder;
    }
    
    if (padder instanceof StringPadder) {
        padder;
    }

    let myGenericNumber = new GenericNumber<number>();
    myGenericNumber.zeroValue = 0;
    myGenericNumber.add = function (x, y) { return x + y };


    let out = identity<string>("myString");

    // let myAdd = function (x: number, y: number) { return x + y; };
    let myAdd: (x: number, y: number) => number = function (x: number, y: number): number { return x + y };

    let z = 100;
    function addToZ(x: number, y: number) {
        return x + y + z;
    }

    let result1 = buildName("Bob");
    let result2 = buildName("Bob", "Adams");

    let deck = {
        suits: ["hearts", "spades", "clubs", "diamonds"],
        cards: Array(52),
        createCardPicker: function () {
            // 箭头函数能保存函数创建时的this值，而不是调用时的值
            return () => {
                let pickedCard = Math.floor(Math.random() * 52);
                let pickedSuit = Math.floor(pickedCard / 13);

                return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
            }
        }
    }

    let cartPicker = deck.createCardPicker();
    let pickedCard = cartPicker();


    let employeeName = restName("Bob", "Sam", "Kate", "Lucy");
    console.log(employeeName);

    let grid1 = new Grid(1.0);
    let grid2 = new Grid(5.0);
    console.log(grid1.calculateDistanceFromOrigin({ x: 10, y: 10 }));
    console.log(grid2.calculateDistanceFromOrigin({ x: 10, y: 10 }));

    let department: Department;
    // department = new Department();
    department = new AccountingDepartment();
    department.printName();
    department.printMeeting();
    // department.generateReports();

    return (
        <div>Page</div>
    )
}

export default Page;
下一篇
数据赋能理解
上一篇 密码保护：责任说明