[TypeScript] TypeScript 정리..

1. TypeScript = Javascript + type

브라우저에서 사용 하기 위해 10일만에 만들어진 언어.. 
자바스크립트의 단점 -> 매우 자유롭고 ,모든걸 수정할 수 있다
-> 이 문제점을 정적 타입 시스템으로 보완한것이 TypeScript 

타임스크립트는 똑같이 동작하는 자바스크립트의 확장팩 그 이상 그 이하도 아님
-> 거의 비슷함. 

 

TypeScript etc...
1. Python으로 만든 pipy가 python보다 빠르다.

1-1. pipy로 만든 pypypi가 훨씬 더 빠르다.

2. TypeScript는 100% TypeScript로 만들어져 있다.. 

ㅋㅋ..

2. TypeScript  Setting

npm install typescript

 

3. TypeScript Setting Check

{

  "name": "ts-first",

  "private": true,

  "version": "0.0.0",

  "type": "module",

  "scripts": {

    "dev": "vite",

    "build": "tsc -b && vite build",

    "lint": "eslint .",

    "preview": "vite preview"

  },

  "dependencies": {

    "react": "^18.3.1",

    "react-dom": "^18.3.1"

  },

  "devDependencies": {

    "@eslint/js": "^9.9.0",

    "@types/react": "^18.3.3",

    "@types/react-dom": "^18.3.0",

    "@vitejs/plugin-react": "^4.3.1",

    "eslint": "^9.9.0",

    "eslint-plugin-react-hooks": "^5.1.0-rc.0",

    "eslint-plugin-react-refresh": "^0.4.9",

    "globals": "^15.9.0",

    "typescript": "^5.5.3",

    "typescript-eslint": "^8.0.1",

    "vite": "^5.4.1"

  }

}

typeScript관련 설정값이 dependencies에 포함되어 있는지 확인 

typeScript 관련 파일이 포함되어 있는지 확인

 

4. TypeScript  에서 사용가능한 변수 + 커스텀 타입

타입스크립트 기본형

let a : number;

a = 1;

let b : string;

b = "string";

let c : boolean;

c = true;

// if 객체 형태로 내가 만든 타입으로 Type Casting을 해주고 싶다면

interface Class {

    name : string;

    age :  number;

    test : boolean;

}

let ourClass : Class;

ourClass = {

    name: "후지이 카제",

    age: 27,

    test: false

}

const editClass = (c:Class) => {

    c.age=28;

    c.name="카제 사마";

    c.test=true;

};

// Type Declaration

type ClassSecond = {

    name : string;

    age :  number;

    test : boolean;

}

//  Type Annotation

let classSecond : ClassSecond;

 

 

5. 함수 반환 타입 추론, 객체 리터럴의 타입 추론 

// 변수의 타입 추론

let num = 10; // number로 추론

let str = "Hello"; // string으로 추론

let bool = true; // boolean으로 추론

 

// 함수 반환 타입 추론

function add(a:number, b:number) : number {

    return a+b;

}

 

// 객체 리터럴의 타입 추론

let person  = {

    name:"fujii kaze",

    age:25

};

person.name="bob";

person.age=28;

person.age="2ne1"; // 오류 : string 형식은 number에 할당할 수 없음 => 객체 리터럴의 타입 추론에 의하여 제약된 것

 

// 배열의 타입 추론

let numbers = [1,2,3,4,5]; // number형 배열로 추론

let string = ["a","b","c"]; // number형 배열로 추론

 

// 타입 추론에 의존하게 되면 타입 스크립트의 특징인 안전한 코드 작성에서 멀어질 수 있다. -> 경고와 안전한 개발과는 거리가 있기 때문.

// -> 꼼꼼히 타입 스크립트의 장점을 활용하기 위해, 타입 어노테이션을 해주는 것이 좋음

const subtract = (a: number, b: number) => { // subtract의 타입은 (a, b) => void

    a - b;

}