Created
March 30, 2022 23:25
-
-
Save isaacbatst/cbf938e299fed74bf795a2ad68f4fe47 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Vamos ver os seguintes topicos hoje | |
// arrays/tuplas, como tipar objetos, como usar aliases (que já vimos levemente ontem), classes, interfaces e generics | |
// vamos incrementar o exemplo da aula passada | |
// Vamos criar uma arquivo trybeClass.ts | |
let trybeClass: Object = {}; | |
// Já tipamos nossa aula. Mas qual o problema aqui? | |
let trybeClass: Object = {}; | |
trybeClass = []; | |
trybeClass = {}; | |
trybeClass = null; | |
// Definimos um tipo genérico. | |
// Ontem vimos como tipar pela estrutura | |
// lembrar de exportar o Student | |
import { Student } from "./students"; | |
let trybeClass: { name: string; students: Student[] } = { | |
name: 'T15', | |
students: [], | |
}; | |
// vamos criar um type aliase para facilitar nossa vida | |
type TrybeClass = { | |
name: string; | |
students: Student[]; | |
}; | |
let trybeClass: TrybeClass = { | |
name: 'T15', | |
students: [], | |
}; | |
// Vamos incrementar essa estrutura com o módulo | |
import { Student, Module } from './students'; | |
type TrybeClass = { | |
name: string; | |
students: Student[]; | |
module: Module | null | |
}; | |
let trybeClass: TrybeClass = { | |
name: 'T15', | |
students: [], | |
module: 2 | |
}; | |
// Tudo certo até aqui pessoal? | |
// Já vimos aqui o array | |
// Vamos ver mais uma estrutura, a Tupla | |
// Nós já vimos que literalmente é uma tupla em front-end no useState | |
// Vamos usar um tupla para guardar nas notas por projetos | |
import { Student, Module } from './students'; | |
// type TrybeClass = { | |
// name: string; | |
// students: Student[]; | |
// module: Module | null; | |
grades: StudentProjectGrade[]; | |
// }; | |
type StudentProjectGrade = [Student, string, number]; | |
//let trybeClass: TrybeClass = { | |
// name: 'T15', | |
// students: [], | |
// module: 2, | |
grades: [], | |
//}; | |
const grades: StudentProjectGrade[] = []; | |
const addGrade = ( | |
studentName: string, | |
project: string, | |
grade: number, | |
): void | string => { | |
const foundStudent = trybeClass.students.find( | |
(st) => st.name === studentName, | |
); | |
if (!foundStudent) { | |
return 'NOT_FOUND'; | |
} | |
trybeClass.grades.push([foundStudent, project, grade]); | |
}; | |
// Agora vamos estruturar um model para o Student. Uma das formas da gente orientar é o Paradigma Orientado a Objeto. Nós vamos dar um exemplo de como codar esse paradigma. | |
// Mas antes vcs devem estar se perguntando porque usar esse paradigma agora? | |
// Essa é uma introdução a TypeScript e essa uma ferramente fundamental dele | |
// student.ts | |
// falar um pouco do this | |
export class StudentModel { | |
_students: Student[]; | |
constructor(students) { | |
this._students = students; | |
} | |
addStudent = (student: Student) => { | |
return this._students.push(student); | |
}; | |
getStudents = (): Student[] => { | |
return this._students; | |
}; | |
} | |
// Vamos utilizar essa class no nosso arquivo de index | |
import { StudentModel, Student } from './students'; | |
import express, { Express, Request, Response } from 'express'; | |
const app: Express = express(); | |
const bd: Student[] = []; | |
app.get('/', (req: Request, res: Response, next: Function) => { | |
const studentModel: StudentModel = new StudentModel(bd); | |
const students = studentModel.getStudents(); | |
return res.status(200).json(students); | |
}); | |
app.post('/', (req: Request, res: Response, next: Function) => { | |
const { name, age, module } = req.body; | |
const studentModel: StudentModel = new StudentModel(bd); | |
studentModel.addStudent({ name, age, module }); | |
return res.status(201).end(); | |
}); | |
app.listen(3000, () => console.log('T15 na 3000')); | |
// Vamos supor que alguém do meu time vai começar a programar outra parte do app que necessita do módulo. | |
// Mas todo mundo percebe que não utilizamos um banco de dados REAL aqui né?! | |
// Então vamos definir a interface para que outras pessoas possam saber exatamente o que iremos desenvolver aqui | |
// Isso vai ser um contrato entre nós desenvolvedores | |
interface IStudentModel { | |
_students: Student[]; | |
addStudent: (student: Student) => void; | |
getStudents: () => Student[]; | |
} | |
export class StudentModel implements IStudentModel { | |
//... | |
} | |
// No index trocar a tipagem do StudenteModel para IStundetModel | |
// Mostrar o que acontece se a classe não obedecer a interface. | |
// instalar as dependencias | |
npm i mysql2 | |
npm i dotenv -D | |
// Criar o connection.ts | |
import mysql from 'mysql2/promise'; | |
import dotenv from 'dotenv'; | |
dotenv.config(); | |
export default mysql.createPool({ | |
host: process.env.DB_HOSTNAME, | |
user: process.env.DB_USER, | |
password: process.env.DB_PASSWORD, | |
database: process.env.DB_DATABASE | |
}); | |
// Criar DB | |
CREATE DATABASE IF NOT EXISTS students_db; | |
USE students_db; | |
CREATE TABLE IF NOT EXISTS student | |
( | |
id INT NOT NULL AUTO_INCREMENT, | |
name VARCHAR(100) NOT NULL, | |
age int, | |
module int NOT NULL, | |
PRIMARY KEY(id) | |
); | |
// alterando para usar o MYSQL | |
// student.ts | |
import { Pool, ResultSetHeader, RowDataPacket } from 'mysql2/promise'; | |
export enum Module { | |
fundamentos, | |
front, | |
back, | |
CS, | |
} | |
export type Student = { | |
name: string; | |
age: number; | |
module: Module; | |
}; | |
export interface IStudentModel { | |
_connection: Pool; | |
addStudent: (student: Student) => Promise<void>; | |
getStudents: () => Promise<Student[]>; | |
} | |
export class StudentModel implements IStudentModel { | |
_connection: Pool; | |
constructor(connection: Pool) { | |
this._connection = connection; | |
} | |
addStudent = async (student: Student) => { | |
await this._connection.execute<ResultSetHeader>( | |
'INSERT INTO students (name,age,module) values (?,?,?)', | |
[student.name, student.age, student.module], | |
); | |
}; | |
getStudents = async (): Promise<Student[]> => { | |
const result = await this._connection.execute<RowDataPacket[]>( | |
'SELECT * from students', | |
); | |
// connection.execute | |
return result[0] as Student[]; | |
}; | |
} | |
//Mudar no index.ts | |
import { StudentModel, IStudentModel, Student } from './students'; | |
import connection from './connection'; | |
import express, { Express, Request, Response } from 'express'; | |
const app: Express = express(); | |
app.get('/', async (req: Request, res: Response, next: Function) => { | |
const studentModel: IStudentModel = new StudentModel(connection); | |
const students = await studentModel.getStudents(); | |
return res.status(200).json(students); | |
}); | |
app.post('/', async (req: Request, res: Response, next: Function) => { | |
const { name, age, module } = req.body; | |
const studentModel: IStudentModel = new StudentModel(connection); | |
await studentModel.addStudent({ name, age, module }); | |
return res.status(201).end(); | |
}); | |
app.listen(3000, () => console.log('T15 na 3000')); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment