[TypeScript] 타입스크립트 설치 및 사용방법, 개념, 필수문법

TypeScript (타입스크립트)

타입스크립트(TypeScript)란 *Dynamic typing을 지원하는 자바스크립트(JavaScript)를 사용하는 개발환경에서 type과 관련된 버그들을 예방하기 위한 언어이다.

number를 입력해야 하는 부분에서 string을 입력했을 때와 같은 단순한 실수도 집어주지만, append(), add()와 같은 함수명을 오타냈을 때도 정확히 에러를 내주고, 3*'5'와 같은 이상한 연산도 에러메세지를 띄워준다는 장점이 있다.

*Dynamic typing

시작과 동시에 런타임 시작 단계에서 변수 유형 검사를 수행하며, 타입 힌트를 통해서 런타임 시작 단계에서 타입을 구분 짓고 사용하는 특징을 가진 것을 동적 타이핑(Dynamic typing) 언어라 한다.

JavaScript는 위와 같은 Dynamic typing을 지원하기 때문에 3*'5'와 같은 연산도 런타임 시작 단계에서 '5'를 number로 구분 짓고 3*5로 알아서 연산해버리기 때문에 대형 프로젝트에서 종종 원치않는 오류가 날 수도 있다.

이러한 문제를 극복하기 위해 등장한 것이 바로 타입스크립트(TypeScript)이다.

---

TypeScript 설치 및 사용방법

📝일반 웹 개발 시 사용방법

1. Nodejs 최신버전으로 설치하기
   Nodejs 공식홈페이지 : https://nodejs.org/en
   : 이미 Nodejs가 설치되어 있는 개발환경에서 최신버전을 설치할 때는 C:\Program Files\nodejs의 node_modules 폴더를 삭제하고 설치하자. 다른 프로젝트에서 기존 Nodejs를 사용중일 때 이 과정없이 그냥 설치만 해버리면 버전 충돌이 일어날 수 있다.
   : 알고싶지 않았던 Nodejs 버전 충돌 에러.. 궁금하다면 클릭

2. 터미널에 npm i -g typescript 입력하기

3. vsc에서 작업폴더 오픈하고 .ts파일 만들기

4. js 변환파일 만들기 : 터미널에 tsc -w 입력하기 (자동으로 변환됨)

5. 앞으로 ts코드 적용 시 변환된 .js파일을 사용해야 함
   ex) ts파일을 사용할 html파일에 변환된 js파일 선언 : <script src="test.js"></script>

📝React 개발환경에서 사용방법

1. 기존 React 폴더에 설치할 경우

: npm i --save typescript @types/node @types/react @types/react-dom @types/jest
: 패키지를 설치하고 .js 파일을 .ts 파일로 변경해주면 된다.

2. React 프로젝트를 새로 만들 경우

: npx create-react-app my-app --template typescript
: my-app까지가 React 설치 명령어이고 그다음이 타입스크립트 설치 명령어이다.

---

TypeScript 기본문법

let 변수명:타입명 = 값 형태가 일반적이다.
타입은 string, number, boolean, bigint, null, undefined, [](array), {}(object) 가 있다.

1. String, Number 등

let person :string = '사람'; //string

let person :string | number = '사람';  //string Or number
let person :string | number = 10;  //string Or number

2. Array

let personName :string[] = ['Alice', 'Bob']; //string array

3. Object

let psersonAge :{age : number} = {age : 10}; //number object

4. Function

/* 1개의 타입을 쓰는 경우 */
//function 함수명(파라미터 : 파라미터타입) : 함수리턴타입 { 함수내용 }
function 함수명(x :number) :number{
  return x * 10
}

/* 여러 개의 타입을 쓰는 경우 : narrowing Or assertion */
function 함수명(x :number | string){
  if (typeof x === 'number'){   //타입을 명시해줘야 연산 가능
    return x * 10
  }
  else if (typeof x === 'string'){
    return x
  }
}

5. Class

class Person {
  name; //선언해둬야 사용가능
  constructor(name :string){
    this.name = name;
  }
}

6. Literal (사용자정의 타입)

let name :'이름'; // '이름'이 'string'처럼 하나의 타입임
let age :'나이';  // '나이'가 'string'처럼 하나의 타입임
let switch :'on'|'off' //union type도 가능

7. TypeAlias (타입별칭 : 타입을 변수처럼 사용하기)

7-1. Type

type nameOrAgeType = string | number;

let person :nameOrAgeType = '사람';
let person :nameOrAgeType = 10;

/* literal type : 원하는 값만 저장가능 */
type aOrB = 'A' | 'B';

let person :aOrB = 'A';  //A나 B가 아닐 경우 에러

/* array type */
type personArrayType = [string, number];
let person :personArrayType = ['Alice', 10];

/* object type */
type personObjectType = {
  name? : string,  //?붙으면 선택사항임 (옵션개념)
  age : number
};
let person :personObjectType = {
  name : 'Alice', //있어도 되고 없어도 됨
  age : 10
};

/* object 안 속성을 자유롭게 지정 : index signature */
type pseronIndexSignatureType = {
  [key :string] : number,
};
let person :pseronIndexSignatureType = {
  age : 10,
  weight : 90,
}

7-2. Interface (객체만 타입지정 가능)

interface personInterface {
  name :string,
  age :number,
}
  
const person :personInterface = {
  name :'keynene',
  age :10
}

---

📚 TypeScript ?

1. 타입에 대한 에러를 미리 예방해준다.
2. 타입과 관련된 기본함수의 에러도 정확히 에러메세지를 띄워준다.
3. 타입을 type, interface라는 자료형으로 입맛에 맞게 저장해서 사용할 수 있다.
4. 대규모 프로젝트에서 필수적이며 유지보수에 좋다.