[TIL] TypeScript 기초

TypeScript는 JavaScript(Dynamic typing)의 상위호환 프로그래밍 언어로 정적 타입을 명시할 수 있다

확장자로 .ts를 사용하며 컴파일을 통해 최종적으로는 .js 파일로 구동된다

 

타입 선언 기능으로 인해 다음과 같은 장점이 있다

• JavaScript의 타입 관련 에러들을 미리 방지한다
• 에러메시지가 구체적이며 풍부한 피드백을 제공한다
• 개발자가 의도한 변수나 함수의 목적을 명확하게 전달할 수 있다

 

Setting

1. 터미널에서 typescript 설치 (에러가 발생한다면 node를 최신 버전으로 설치해주자)

npm install -g typescript

2. 최상단에 tsconfig.json 파일을 생성해 다음과 같이 넣어주자

{
    "compilerOptions": {
        "target": "esnext", // 변환할 JavaScript의 버전: es5, es2016, esnext 등 입력 가능
        "module": "commonjs",
    }
}

+ 추가로 넣을만한 tsconfig 항목은 다음과 같다

{
 "compilerOptions": {

  "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
  "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext'
  "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 
  "checkJs": true, // 일반 js 파일에서도 에러체크 여부 
  "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
  "declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
  "outFile": "./", //모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
  "outDir": "./", //js파일 아웃풋 경로바꾸기
  "rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
  "removeComments": true, //컴파일시 주석제거 

  "strict": true, //strict 관련, noimplicit 어쩌구 관련 모드 전부 켜기
  "noImplicitAny": true, //any타입 금지 여부
  "strictNullChecks": true, //null, undefined 타입에 이상한 짓 할시 에러내기 
  "strictFunctionTypes": true, //함수파라미터 타입체크 강하게 
  "strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
  "noImplicitThis": true, //this 키워드가 any 타입일 경우 에러내기
  "alwaysStrict": true, //자바스크립트 "use strict" 모드 켜기

  "noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
  "noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
  "noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기 
  "noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기 
 }
}

3. 터미널을 추가해 다음과 같이 입력해준다

tsc -w

 

* 에러 메세지는 tsc -w 명령어가 실행중인 터미널에 나온다

 

4. 이제 .ts 파일에서 작업하고 저장하면 자동으로 .js파일로 변환되어 저장된다

<script src="변환된파일.js"></script>

HTML에서 사용하려면 변환된 .js 파일을 넣어주면 된다

 

---

React에서 Typescript를 사용해보자 (tsconfig 자동생성됨)

 

1. 이미 있는 React 프로젝트에 설치하는 경우

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

2. React 프로젝트(CRA)를 새로 만드는 경우

npx create-react-app my-app --template typescript

 

---

기초 문법

let 이름 :string = 'kim'

변수명 :타입명으로 타입 지정이 가능 (string, number, boolean, bigint, null, undefined, [], {})

let 이름 :string = 'kim';
이름 = 123;

이렇게 타입이 의도치 않게 변경될 경우 에러메세지를 띄워준다

let 이름 :string[] = ['kim', 'park']
let 나이 :{ age : number } = { age : 23 }

array/object는 이렇게 타입 지정이 가능하다

let 이름 :string | number = 'kim';

여러가지 타입을 받으려면 | 기호를 이용해 or 연산자를 표현할 수 있다

type nameType = string | number;
let 이름 :nameType = 'kim';

type 키워드를 이용해 타입을 변수처럼 담아서 사용(Type alias)할 수 있다

type NameType = 'kim' | 'park';
let 이름 :NameType = 'kim';

이렇게 원하는 글자나 숫자만 오도록 나만의 타입(literal type)을 만들 수도 있다

function 함수명(x :number) :number{
  return x * 2
}

함수의 경우 파라미터의 타입과 return될 값의 타입을 지정할 수 있다

* return 타입에 void를 넣으면 함수가 무언가를 return하려고 할 때 오류를 낼 수 있다

* 파라미터가 선택 사항인 경우 '?'를 붙여줘야 한다

//에러
function 함수명(x :number | string) {
  return x * 2
}

//가능
function 함수명(x :number | string) {
  if (typeof x === 'number'){
    return x * 2
  } 
}

// return 값 방지
function 내함수(x :number) :void { 
  return x * 2 //여기서 에러남 
} 

// 파라미터가 옵션일 경우
function 내함수(x? :number) { 

}
내함수(); //가능
내함수(2); //가능

함수에 여러 타입을 받는다면 연산될 때의 자료형을 명시(typeof)해줘야 한다

type Member = [number, boolean];
let john:Member = [100, false]

array 자료 안에 순서를 포함해 타입을 지정하고 싶다면 tuple 내부에 넣어주면 된다

type MyObject = {
  [key :string] : number,
}
let 철수 :MyObject = { 
  age : 50,
  weight : 100,
}

object 전체 타입 지정(index signature) 역시 가능하다

class Person {
  name;
  constructor(name :string){
    this.name = name;
  }
}

class 역시 타입 지정이 가능하다 (미리 변수를 만들고 construtor 안에서 정의)

 

---

사실 TypeScript는 기본적으로 타입을 자동으로 부여하기 때문에, 모든 변수에 타입을 지정할 필요가 없다

let 이름 = 'kim';
let 나이 = 20;

이렇게만 써도 이름변수는 string, 나이변수는 number 타입이 자동으로 부여된다

 

변수에 들어갈 타입이 애매하다면?

1. 가장 좋은 방법은 | (Union type)을 사용하는 것이다

let 이름: string | number = 'kim';
let 나이: (string | number) = 100;
const 어레이: (number | string)[] = [1,'2',3]
const 오브젝트: {data : (number | string) } = { data : '123' }

2. 변수의 타입 지정 자체를 해제하는 any 타입도 있다

let 이름: any = 'kim';
이름 = 123;
이름 = undefined;
이름 = [];

3. 가급적이면 any 보다 unknown 타입을 사용하자

let 이름: unknown;
// 에러!
let 변수1: string = 이름;
let 변수2: boolean = 이름;
let 변수3: number = 이름;
이름[0];
이름 - 1;
이름.data;

변수의 타입 자체가 unknown으로 지정되며, any와 달리 애매한 상황이 모두 방지된다

 

+++

Generic Types🔽

예시로 보는 타입스크립트 Generic Types

 

More🔽

Typescript는 어떻게 공부해야 하나요?

TypeScript 한글 문서

8장. 리액트 프로젝트에서 타입스크립트 사용하기 · GitBook

 

본 내용은 코딩애플의 '빠르게 마스터하는 타입스크립트'를 바탕으로 작성되었습니다.