[TIL] 2024.02.16 타입스크립트 맛만볼게

타입스크립트와 자바스크립트의 차이 ?

What THE,, 단어에서 알 수 있듯이 타입에 차이가 있겠지..

그냥 C나 자바에서 쓰는 것 처럼 변수 앞에 int, char, boolean 주는 거겠지..

라고 생각했는데 진짜 맞네?

 

그래서 이 둘의 차이 점이란

자바스크립트는 동적타이핑 언어였다면 

타입스크립트는 정적타이핑 이라는 소리

 

그럼 생각보다 쉽겠는데?

// JS

let isDone = false;
let amount = 20;
let userName = "Alice";

function multiply(a, b) {
    return a * b;
}

console.log(multiply(5, 3));

 

// TS

let isDone: boolean = false;
let amount: number = 20;
let userName: string = "Alice";

function multiply(a: number, b: number): number {
    return a * b;
}

console.log(multiply(5, 3));

 

는 무슨 벌써부터 어지러움

난 자유로운게 좋고 코드들도 자유롭고 싶을텐데 왜 자유를 침범해?

어떻게 변수 하나하나에 Type을 먹이고 명시적으로 인생을 정해줘야 하는데?

이 아이들도 인생이 있고 자기들이 가고싶은 방향을 순수하게 정하고 싶을거 아냐😠

라고하면 안되겠죠?

 

네 그렇습니다 타입 스크립트는 명시적으로 타입을 지정해줘서

오류를 줄이고 코드의 안정성을 높여준답니다.

 

컴파일러가 타입 오류 발견하기도 쉽고 IDE가 더 나은 자동완성 리팩토링 도구

 

타입 체크까지 제공을 해준다네요 거기다 코드의 가독성과 유지보수성 까지

 

야무지잖아 어머 이건 사야 돼 타입스크립트 한잔해 ~🍻

 

PS

클래스와 상속 JS와 TS 비교

// JS

function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function () {
    console.log(`${this.name} makes a noise.`);
}

function Dog(name) {
    Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function () {
    console.log(`${this.name} barks.`);
}

let dog = new Dog('Rex');
dog.speak();

 

// TS

class Animal {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

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

    speak() {
        console.log(`${this.name} barks.`);
    }
}

let dog = new Dog('Rex');
dog.speak();

 

근데 JS도 constructor(생성자) 사용하는데 왜 안넣어줬는지 의문