Typescript

타입스크립트를 시작하기 전에 설치를 먼저 해주삼

npm install -g typescript  // 에러나면 맨 앞에 sudo까지 해서 관리자 권한으로 설치

# 이후 tsconfig.json 파일 생성
tsc --init

---

타입스크립트로 바꾸기 전에 자바스크립트 코드를 먼저 보겠다.

JS코드

const user = {
    name: 'John Doe',
    age: 30,
    hobbies: ['reading', 'games', 'coding'],
};

function getProfile(user) {
    console.log('User Name:', user.name);
    console.log('Age:', user.age);
    if (user.hobbies) {
        console.log('Hobbies:', user.hobbies.join(', '));
    }
}

getProfile(user);

사실 이대로 실행해도 JS에서는 user의 name, age, hobbies를 잘 가져오긴 함

하지만!! TS는 실행이 안된다!! 왜냐면 지금 이 코드에는 타입이 전혀 지정 되어 있지 않기 때문에!!

TS 코드

// interface User로 user와 안에 내용들의 타입을 지정해준다? , 이거말고 type user = 도 있음
interface User {
    name : String,
    age : Number,
    hobbies: Array<string>

}

// interface 말고 type 으로 만들 수도 있음
// type User = {
//     name: String,
//     age : Number,
//     hobbies: Array<string>
// }

// user 타입을 object로 지정할 수 있지만 그럼 안에 내용이 타입 지정이 안됨
const user: User = {
    name: 'John Doe',
    age: 30,
    hobbies: ['reading', 'games', 'coding'],
};

// return 값이 없으면 void , void = 공허의 지팡이
// user의 타입을 object로 지정하면 객체 안에 내용들의 타입이 지정이 되어 있지 않아 내용들의 타입을 type 또는 interface로 만들어주고 user 타입에 지정한다.
function getProfile(user: User) : void {
    console.log('User Name:', user.name ,);
    console.log('Age:', user.age);
    if (user.hobbies) {
        console.log('Hobbies:', user.hobbies.join(', '));
    }
}

getProfile(user);

이렇게 변수 매개변수 객체에 타입을 명시적으로 선언할 수 있다!

Typescript를 왜 쓰는지는 아래를 보면 알 수 있다.

---

Ts핵심 특징

1. 정적 타입 지정: 변수, 매개변수, 객체 속성 등에 타입을 명시적으로 선언할 수 있습니다. 이를 통해 컴파일 시간에 타입 검사를 수행하여 오류를 사전에 발견할 수 있습니다.
2. 클래스 기반 객체 지향 프로그래밍: JavaScript의 프로토타입 기반 상속보다 친숙한 클래스 기반 상속과 인터페이스를 제공합니다.
3. 모듈 지원: TypeScript는 ES6 모듈을 지원하며, 대규모 애플리케이션의 구조화와 관리를 용이하게 합니다.
4. 도구 지원: 코드 완성, 인터페이스 추적, 리팩토링 지원 등 강력한 도구 지원을 제공합니다.