타입스크립트

(Udmey) Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS 강의에서 학습한 내용을 기록했습니다.

자바스크립트는 동적 타입의 언어이다. 변수에 저장된 타입은(런타임 중에도) 언제든지 바뀔 수 있다.
-> 특정 타입에 의존하는 코드가 필요한 경우, 런타임에서 에러를 발생시키지 않기 위해 현재의 타입을 확인해 주는 코드가 필요할 수 있다.

if (typeof n === 'number'){
 	//...
}

타입스크립트는 정적 타입으로 개발 도중에 변수의 타입을 정의한다. -> 런타임 중에 갑자기 변경되지 않는다. -> 개발 중에 에러를 만날 수 있다.

기존 자바스크립트의 런타임 환경인 node나 브라우저에서 타입스크립트를 실행할 수 없다.

타입스크립트는 기본적으로 타입 추론이라는 내장 기능이 있다.
-> 특정 변수나 상수에 어떤 타입을 사용했는지를 타입스크립트는 잘 이해한다.
(타입을 명시적으로 표현하지 않아도)

let number1: number = 5; //좋지 않은 방식 -> 타입 추론에 의해 이미 타입이 정해짐
let number1 = 5; // 이렇게 가능
//또는
let number1: number;
number1 = 5;

타입스크립트에서 명시적으로 타입을 선언한 뒤에 다시 해당 값을 넣는 것보다 타입 추론을 이용하는 것이 좀 더 깔끔하고 나은 방식

//명시적으로 객체의 타입을 선언
const person: {
    name: string;
    age: number;
} = {
  name: "sehyun",
  age: 30,
};

console.log(person.name);

//타입 추론을 이용한 방식
const person = {
  name: "sehyun",
  age: 30,
};

console.log(person.name);

타입스크립트의 any타입은 자주 사용하지 않을 것이다. -> 유연한 타입이지만 그만큼 타입스크립트의 장점을 누리지 못하는 것이다. -> 타입스크립트의 장점을 상쇄시킴 -> 바닐라 자바스크립트와 다를 바 없음 -> any 타입은 typescript 컴파일러가 검사하지 않음

타입스크립트는 프로그래밍 언어이자 도구(컴파일러)이다.

코드를 실행하여 타입스크립트 코드를 자바스크립트로 컴파일하는 컴파일러이다.

즉 타입스크립트를 사용하여 결과적으로 얻는 것이 자바스크립트이다.

브라우저 런타임에서 에러가 발생하기 전에 코드의 에러를 개발 과정에서 미리 식별할 수 있기도 하다.

(타입으로 인한 에러를) 런타임 중에 발견할거냐? 아니면 개발 중에 발견할거냐? 차이

타입스크립트는 런타임의 코드를 변경하는 것이 아니다.
타입스크립트는 개발 중에 필요한 유용한 도구이자 프로그래밍 언어이다.

타입 스크립트를 사용했고, 아래의 코드처럼 컴파일 도중에 에러를 감지했지만 잘못된 코드가 그대로 담긴 .ts를 컴파일해도 .js 파일은 생성된다.
즉 타입스크립트는 컴파일을 차단하지 않고, 단지 실수나 에러에 대해 알려주며 지적한다.

function add(n1: number, n2): number { 
    return n1 + n2;
}

const number1 = '5';
const number2 = 2.8;

const result = add(number1, number2);
console.log(result);

npm install lite-server --save-dev
"start": "lite-server"

tsc xxx.ts -> xxx.js 파일 생성후
(일일이 브라우저를 다시 키지 않더라도 변경사항이 적용되어 보여짐)

타입 스크립트는 타입을 추론한다.
타입을 수동으로 지정하지 않아도, 초기에 할당된 값의 타입에 따라 타입을 추론한다.

let number1 = 5;
let number1 = '5'; // 에러: 초기에 number 타입의 5가 저장되어, 타입스크립트는 타입을 추론해서 number 타입만 할당 되도록 한다.

let number1;  
number1 = '5' //에러가 발생하지 않는다. 타입스크립트에 이 변수에 저장될 타입을 알려주지 않았으므로

let number1: number;
number = '5' // 에러 발생

즉, 타입스크립트는 추론된 타입이라 할지라도, 추론된 타입외에 다른 타입을 할당하면 에러가 발생한다.
수동으로 타입을 지정하지 않으려면 초기 값(초기 타입에 해당하는 값)을 저장해야 한다.

let number1: number // 명시된 타입
let number1 = 5 //추론된 타입 : number


let result = 'Result is : ';
result = 0; //에러

• 타입 스크립트에는 튜플이라는 타입이 있다.(요소의 갯수, 길이 고정, 각 타입을 미리 정의)

const person: {
  name: string;
  age: number;
  hobbies: string[];
  role: [number, string];
} = {
  name: "sehyun",
  age: 30,
  hobbies: ["Sports", "Cooking"],
  role: [2, "author"],
};

튜플 타입은 길이가 고정이라고 했지만, push는 예외적으로 허용된다고 한다.
또한 기존 타입 추론을 이용하게 되면 기존의 배열타입으로 인식하게 된다.
따라서 명시적으로 튜플 타입을 선언해 주어야 한다. (role과 hobbies의 차이)
튜플 타입이 필요하다면 명시적으로 선언해야 한다. 하나의 속성이라도 명시적으로 선언하게 되면 나머지 속성들도 모두 명시적으로 타입을 정해줘야 한다.

• 숫자에 라벨 붙여 사용하기 = enum 타입

enum EXAM { ADMIN, AUTHOR, READ_ONLY } // ADMIN = 0, AUTHOR = 1, READ_ONLY = 2
//enum EXAM { ADMIN=1, AUTHOR, READ_ONLY } //초기 값을 설정하면, ADMIN = 1, AUTHOR = 2, READ_ONLY = 3
//enum EXAM { ADMIN=1, AUTHOR=100, READ_ONLY=200 } //각각의 고유 값을 지정할 수 있음

const person = {
    name: "sehyun",
    age: 30,
    hobbies: ["Sports", "Cooking"],
    role:Role.ADMIN,
  };

if(person.role === Role.AUTHOR){
    console.log('is author')
}