[01.10] 자바스크립트 말고 타입스크립트🙄

💥 타입스크립의 필요성

 - 자바스크립트 코드가 너무 지저분하다

 - 코드의 스케일이 커지면서 코드 관리가 안된다

💥 타입스크립트를 사용하면 좋은 점

 - 자바스크립트 기반보다 버그를 줄일 수 있다.

 - 유지보수가 쉽다.

 - 강력한 높은 퀄리티의 코드를 생산할 수 있다.

 

타입스크립트 = 자바스크립트 + 타입체크기능

타입스크립트 환경에 자바스크립트를 코딩하면 동작함

자바스크립트 환경에 타입스크립트를 코딩하면 동작안함

function plus(a,b){
    return a + b;
}

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

자바스크립트에서 이 로직을 썼다고 치면,

3과 5를 숫자로 인식하고 a+b = 3 + 5 = 8로 나오게 된다.

하지만 '3', '5'로 적었다면?

자바스크립트는 ' ' 를 보고 알아서 문자열인가? 하고 '3' + '5' = 35 를 출력한다.

 

하지만 타입스크립트는 타입을 지정해 주어야한다.

function plus(a:number,b:number){
    return a + b;
}

console.log(plus('3', '5'));

만약 이런 코드가 적혀있다고 치면 타입스크립트에선 무조건 에러가 난다.

a와 b는 number라며? 근데 '3', '5' 를 내가 어떻게 해? 응 못 해 에러~ 이렇게 되는 것이다.

number 라는 타입을 준다면 타입이 다를 때 에러가 날 수 있는 것이다.

말 그대로 자바스크립트는 알아서 이 타입인가? 하고 본인이 타입을 바꿔서 사용하기 때문에

내가 원하는 값을 얻지 못할 수도 있다.

하지만 타입스크립트는 미리 타입을 지정하기 때문에 내가 타입 실수를 하게되면 바로 에러를 띄운다.

💥 vscode에서 타입스크립트 사용해보기

- npm i -g typescript

- 타입스크립트 확장자 = ts

- tsc --init  = tsconfig.json 파일 생성

 

타입스크립트 자체를 실행시킬 수 없다.

컴파일 단계를 거쳐야하기 때문에 터미널에 tsc [타입스크립트 파일이름.ts] 를 쳐주면된다.

그럼 같은 이름으로 자바스크립트 파일이 생성된다.

안의 코드는 똑같이 나오지만 타입스크립트에서 명시했던 타입들은 나오지 않는다.

그 후에, node [파일이름.js]를 치면 실행할 수 있다.

타입스크립트 파일을 수정할 때마다 자동으로 자바스크립트 파일이 바뀌진 않는다.

매번 컴파일 해준 후에 자바스크립트 파일이 바뀐다. 이런 것들이 꽤나 번거롭고 귀찮다.

해결방법은 터미널에 tsc -w [파일이름.ts] 를 쳐주면된다. -w 는 watch의 약자이다.

말 그대로 컴파일러는 이 파일을 계속 지켜보겠다. 라는 뜻이다. 수정이 되면 바로 자동으로 컴파일 해준다는 것이다.

💥 타입 추론(Type Inference)

 - 타입스크립트는 타입 추론 기능을 통해 변수의 타입을 자동으로 판단할 수 있다.

 - 타입스크립트 컴파일러가 초기에 할당된 값을 바탕으로 변수의 타입을 추론한다.

 - let age = 30; -> 타입스크립트는 age 변수의 타입을 자동으로 number로 추론한다.

 - 타입 추론은 코드를 간결하게 작성할 수 있도록 도와주지만 타입을 명시적으로 지정하는 것이 더 명확하다.

 - 타입 추론이 모호한 경우나 복잡한 로직에서는 타입을 명시하는 것이 좋다.

💥 데이터 타입

 - 타입스크립트에서는 다양한 데이터 타입을 지원

 - 데이터 타입은 크게 기본 데이터 타입, 객체 타입, 특수 타입으로 나눌 수 있음

💥 기본 데이터 타입

 - number : 숫자 타입 / 정수와 실수를 포함

 - string : 문자열 타입

 - boolean : 참, 거짓을 나타내는 불리언 타입

 - null : 값이 없음을 나타내는 타입

 - undefined : 값이 할당되지 않는 변수의 기본값인 타입

💥 객체 타입

 - object : 객체를 나타내는 타입

 - array : 동일한 타입의 요소를 가진 배열을 나타내는 타입

 - tuple : 각 요소가 다른 타입을 가질 수 있는 배열을 나타내는 타입

💥 특수 타입

 - any : 어떠한 타입이든 할당될 수 있는 타입

 - unknown : 타입을 미리 알 수 없는 경우 사용되는 타입

💥 타입 명시

 - 변수를 선언할 때 변수 값의 타입을 명시함으로써 변수의 데이터 타입을 지정한다.

💥 변수에 데이터 타입을 지정하는 방법

 - 변수 선언 시 데이터 타입을 지정한다

 - 타입스크립트를 자바스크립트로 컴파일 할 때 데이터 타입에 다른 값이 할당되면 오류를 발생시켜 알려준다.

let myname : string = 'lee';
myname = 1;

 -> myname 변수에 string 타입을 지정하여 myname에 숫자 타입을 할당하면 오류를 발생시킴

 

💥 인터페이스 실습

let stdId : number = 1111;
let stdName : string = 'lee';
let age : number= 20;
let gender : string = 'male';
let course : string = 'Typescript';
let completed : boolean = false;

interface Student{
    stdId : number;
    stdName? : string;
    age? : number;
    gender? : string;
    course? : string;
    completed? : boolean;
    setName : (name : string) => void;
}

class MyStudent implements Student{
    stdId = 91011;
    stdName = 'park';
    age = 30;
    gender = 'male';
    course = 'node.js';
    completed = true;

    setName(name : string) : void{
        this.stdName = name;
        console.log('이름 설정 : ' + this.stdName);
    }
}

const myInstance = new MyStudent();
myInstance.setName('엘리스');

let std = {
        stdId : 91011,
        stdName : 'park',
        age : 30,
        gender : 'male',
        course : 'node.js',
        completed : true
}
function setInfo(student : Student) : void{
    console.log(student);
}

객체가 제대로 생성이 되었고, 그 객체를 통해서 '엘리스'로 잘 반영이 된 걸 볼 수 있다.

 

 - 인터페이스는 'string'이나, 'number' 타입처럼 데이터 타입으로 사용이 가능하다.

 - 선택적 프로퍼티로 지정하려면 속성값 뒤에 ?를 붙여준다.

 - 메소드도 인터페이스 내에서 선언 가능하다.

 - 인터페이스를 클래스에 상속할 수 있다.

💥 열거형 실습

let stdId : number = 1111;
let stdName : string = 'lee';
let age : number= 20;
let gender : string = 'male';
let course : string = 'Typescript';
let completed : boolean = false;

enum GenderType{
    Male = 0,
    Female = 1,
    GenderNeutral = 2
}

interface Student{
    stdId : number;
    stdName? : string;
    age? : number;
    gender? : GenderType;
    course? : string;
    completed? : boolean;
    setName? : (name : string) => void;
    getName? : () => string;
}

class MyStudent implements Student{
    stdId = 91011;
    stdName = 'park';
    age = 30;
    gender = GenderType.Male;
    course = 'node.js';
    completed = true;

    setName(name : string) : void{
        this.stdName = name;
        console.log('이름 설정 : ' + this.stdName);
    }
}

const myInstance = new MyStudent();
myInstance.setName('엘리스');

function getInfo(id : number) : Student
{
    return {
        stdId : id,
        stdName : 'kim',
        // age : 21,
        gender : GenderType.Female,
        course : 'javascript',
        completed : true
    };
}

let std = {
        stdId : 91011,
        stdName : 'park',
        age : 30,
        gender : GenderType.Male,
        course : 'node.js',
        completed : true
}
function setInfo(student : Student) : void{
    console.log(student);
}

열거형(enum)은 한정된 데이터들을 열거형 타입인 enum 으로 묶어줄 수 있다.

이렇게 묶어주면 좀 더 편리하게 프로그래밍을 할 수 있다.