Home > other >  typescript transpiling error with find array method
typescript transpiling error with find array method

Time:12-22

I have this code in Typescript

/**
 * Team information
 */
export class Team {    
    constructor( public name: string ) {}
}

/**
 * Half side of each match, with team and score of the team
 */
export class SideMatch {
    constructor( public team: Team, public score: number) {}
}

/**
 * Two side matches, that represents the match itself
 */
export class Match {
    constructor( private game: SideMatch[] ) { }

    addScore(team: number, goal: number) {
        this.game[team].score  = goal;
    }

    winner() : number {
        if( this.game[0].score > this.game[1].score )
            return 0;
        if( this.game[0].score < this.game[1].score )
            return 1;            
        return -1;            
    }

    getGame() {
        return this.game;
    }

    toString() {
        console.log( `${this.game[0].team.name} ${this.game[0].score} vs ${this.game[1].score} ${this.game[1].team.name}` );        
    }
}

/**
 * Team stats, with points, (todo: victories, draws, loses, goals forward, goals against, goals difference)
 */
export class TeamStats {

    constructor(public team: Team, public point: number) {}
}

export class Tournament {
    private teams: Team[] = [];
    private table: TeamStats[] = [];
    private fixtures: Match[] = [];

    constructor() {}

    public addTeam(teamName: string) {
        let team: Team = new Team(teamName);
        this.teams.push(team);
        console.log(this.teams);
        
        let teamStats = new TeamStats(team, 0);
        this.table.push(teamStats);
    }

    /**
     * Get the team
     * #question how to return only the Team type? It's requiring to define undefined
     * @param teamName 
     * @returns 
     */
    public getTeam(teamName :string) : Team {
        try {
            //let teamFound = new Team('temp');
            const teamFound = this.teams.find(t => t.name = teamName);
            console.log(`team found ${teamFound.name}`);
            
            if (teamFound === undefined) {
                throw new TypeError('The value was promised to always be there!');
              }
            return teamFound;   
        } catch (error) {
            throw error;
        }
            
    }

    public addMatch(team1: Team, team2: Team) {
        let sideMatch1: SideMatch = new SideMatch(team1, 0);
        let sideMatch2: SideMatch = new SideMatch(team2, 0);
        console.log(`add match - sm1 ${sideMatch1.team.name}` );
        console.log(`add match - sm2 ${sideMatch2.team.name}` );
        var game1: SideMatch[] = [];

        game1.push(sideMatch1);
        game1.push(sideMatch2);
        console.log(game1);
        
        let match1 = new Match( game1 );

        this.fixtures.push(match1);
    }

    public addMatchResults(matchIndex: number, score1: number, score2: number) {
        this.fixtures[matchIndex].addScore(0, score1);
        this.fixtures[matchIndex].addScore(1, score2);
        this.calculateMatchPoints(matchIndex);
    }

    private calculateMatchPoints(matchIndex: number) {
        let results : number = this.fixtures[matchIndex].winner();
        console.log(results);
        
        if (results !== -1)
        {
            console.log(this.fixtures[matchIndex].getGame());             
        }       
        
    }

    public getMatch(index: number) : Match {
        return this.fixtures[index];
    }

}

When I try to transpile my code in the CLI with

tsc src/compile.ts

It shows this error:

D:\src\myApps\worldcup>tsc src/console
src/console.ts:80:42 - error TS2550: Property 'find' does not exist on type 'Team[]'. Do you need to change your target library? Try changing the 'lib' compiler option
 to 'es2015' or later.

80             const teamFound = this.teams.find(t => t.name = teamName);
                                            ~~~~


Found 1 error in src/console.ts:80

So I included the tsconfig.json with these settings:

{
  "compileOnSave": false,
  "compilerOptions": {
    "strictNullChecks": false,
   "lib": [
      "es2020",
      "dom",
    ]
  },  
}

Now I have two issues:

  1. I can't transpile just using tsc src/console.ts . I need to use tsc -b now. Why?

  2. When I run my code using these, something weird happens when I use getTeam directly and when I assign the result of getTeam method to a variable:

let worldCup2022: Tournament = new Tournament();

worldCup2022.addTeam('Brazil');
worldCup2022.addTeam('Canada');
console.log('t1 name with getTeam '   worldCup2022.getTeam('Canada').name); // shows correctly t1 name Canada
console.log('t2 name with getTeam '   worldCup2022.getTeam('Brazil').name); // shows correctly t2 name Brazil
const team1 = worldCup2022.getTeam('Canada');  
const team2 = worldCup2022.getTeam('Brazil');
console.log('t1 name '   team1.name); // shows incorrectly t1 name as Brazil (last one got)
console.log('t2 name '   team2.name); // shows incorrectly t1 name as Brazil (last one got)

CodePudding user response:

TSC Issue

Have you run tsc -init in your root folder? This will initialize a tsconfig file, and then you can just run

tsc

and it will compile all in the root directory. My project structure is as such:

File Structure

Team Name Issue

The problem finding a team is you're checking for the same type with = in

const teamFound = this.teams.find((t) => (t.name = teamName));

When you're actually looking to compare the value:

const teamFound = this.teams.find((t) => (t.name === teamName));

= vs == vs ===

  • Related