TypeScript vs JavaScript

Temel Söz Dizimi Karşılaştırması

// JS
describe('Login Tests', () => {
  it('should login successfully', () => {
    cy.visit('/login')
    cy.get('[data-cy=username]').type('user@example.com')
    cy.get('[data-cy=password]').type('password123')
    cy.get('[data-cy=login-btn]').click()
    cy.url().should('include','/dashboard')
  })
})

// TS
describe('Login Tests', (): void => {
  it('should login successfully', (): void => {
    cy.visit('/login')
    cy.get('[data-cy=username]').type('user@example.com')
    cy.get('[data-cy=password]').type('password123')
    cy.get('[data-cy=login-btn]').click()
    cy.url().should('include','/dashboard')
  })
})

Değişken Tanımlama

// JS
const testData = { username:'test@example.com', password:'password123' }
let currentUser = null
var isLoggedIn = false
const testUsers = ['user1','user2','user3']

// TS
interface TestData { username:string; password:string; }
const testData: TestData = { username:'test@example.com', password:'password123' }
let currentUser: string | null = null
var isLoggedIn: boolean = false
const testUsers: string[] = ['user1','user2','user3']

Fonksiyon Tanımlama

// JS
function loginUser(username, password){
  cy.get('[data-cy=username]').type(username)
  cy.get('[data-cy=password]').type(password)
  cy.get('[data-cy=login-btn]').click()
}
const checkUrl = expected => cy.url().should('include', expected)

// TS
function loginUser(username:string, password:string): void{
  cy.get('[data-cy=username]').type(username)
  cy.get('[data-cy=password]').type(password)
  cy.get('[data-cy=login-btn]').click()
}

Cypress Komutları

// Tip güvenli API çağrısı (TS)
interface LoginResponse { token:string; user:{ id:number; email:string }; }
cy.request('POST','/api/login',{ username:'test@example.com', password:'password'})
  .then((res: Cypress.Response) => {
    expect(res.status).to.eq(200)
    expect(res.body.user.email).to.be.a('string')
  })

Hata Yönetimi

// JS - beklenen 404
cy.request({ method:'GET', url:'/api/nonexistent', failOnStatusCode:false })
  .then((response) => { if(response.status===404){ cy.log('Expected 404') } })

// TS - tipli yanıt
interface ErrorResponse { error:string; code:number }
cy.request({ method:'GET', url:'/api/nonexistent', failOnStatusCode:false })
  .then((r: Cypress.Response) => { if(r.status===404){ expect(r.body.error).to.be.a('string') } })

Proje Yapılandırması

// cypress.config.ts
import { defineConfig } from 'cypress'
export default defineConfig({
  e2e:{ baseUrl:'http://localhost:3000', supportFile:'cypress/support/e2e.ts',
        specPattern:'cypress/e2e/**/*.cy.{ts,tsx}', setupNodeEvents(on,config){ return config } }
})

Detaylı Karşılaştırma

Performans

Tip sisteminin kendisi runtime performansını etkilemez; ancak yazım kalitesi ve tooling, testlerin stabilitesini ve bakım hızını etkiler.

Öneriler