기본 타입

설치

npx create-react-app 내 앱 이름 --template typescript

npm i --save-dev @types/라이브러리 이름

기존 앱에 설치

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

npx tsc --init

index파일에 as HTMLElement 추가

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);

tsconfig.json파일에 "jsx": "react-jsx" 추가

tsc app.ts

※ 열려있는 js파일 닫고 하는 걸 추천

숫자, 문자열, 불리언

문자열과 결합하면 아래와 같이 숫자형도 문자열로 인식됨

function add(n1: number, n2: number, showResult: boolean, phrase: string) {

  if (showResult) {
    console.log(phrase + n1 + n2);  // Result is: 52.8
  } else {
    return n1 + n2;
  }
}

const number1 = 5; // 5.0
const number2 = 2.8;
const printResult = true;
const resultPhrase = 'Result is: ';

add(number1, number2, printResult, resultPhrase);

다음과 같이 바꿔줘야 함

  const result = n1 + n2;
  if (showResult) {
    console.log(phrase + result); // Result is: 7.8
  } else {
    return result;
  }
}

객체

// 주석처럼 타입을 지정해줄 필요는 없음 (아래만 적어 추론적으로 하는 것이 더 좋은 방법)
// const person: {
//   name: string;
//   age: number;
// } = {
  const person = {
    name: 'Maximilian',
    age: 30
  };
  
  console.log(person.name);

배열

let arr: number[] = [1,2,3];

또는

let arr: Array<number> = [1,2,3];

튜플

하지만 2개의 요소(숫자, 문자열 1개씩)를 가지고 있는 배열인 튜플을 사용할 때는 타입을 지정해줘야 한다.

const person: {
  name: string;
  age: number;
  hobbies: string[];
  role: [number, string]; // 튜플
} = {
  name: 'Maximilian',
  age: 30,
  hobbies: ['Sports', 'Cooking'],
  role: [2, 'author']
};

enum (열거)

일반적인 자바스크립트를 사용할 때

const ADMIN = 0;
const READ_ONLY = 1;
const AUTHOR = 2;

const person = {
  name: 'Maximilian',
  age: 30,
  hobbies: ['Sports', 'Cooking'],
  role: ADMIN
};

if (person.role === ADMIN) {
  console.log('is author');
}

타입스크립트 적용

enum Role { ADMIN, READ_ONLY, AUTHOR };  // 0 , 1, 2 숫자가 자동으로 할당
//enum Role { ADMIN = 5, READ_ONLY, AUTHOR };   5, 6, 7로 할당
//enum Role { ADMIN = 'ADMIN', READ_ONLY = 100, AUTHOR = 'AUTHOR' };   마음대로 할당도 가능

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

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

enum 활용

enum은 다음과 같이 한정된 선택 옵션을 표현하고자 할 때 유용하다.

enum Color {
  Red,
  Green,
  Blue
}

enum HttpStatusCode {
  OK = 200,
  BadRequest = 400,
  Unauthorized = 401,
  NotFound = 404
}

enum Wrong {
  A = "a",
  B, // Error, 문자형 이넘은 이넘 값 전부 다 특정 문자 또는 다른 이넘 값으로 초기화 해줘야 한다.
}

enum Enum {
  A
}
let a = Enum.A; // 0
let keyName = Enum[a]; // A

keyof를 사용할 땐 keyof typeof로 사용해야 한다.

enum LogLevel {
  ERROR, WARN, INFO, DEBUG
}

// 'ERROR' | 'WARN' | 'INFO' | 'DEBUG';
type LogLevelStrings = keyof typeof LogLevel;

function printImportant(key: LogLevelStrings, message: string) {
    const num = LogLevel[key];
    if (num <= LogLevel.WARN) {
       console.log('Log level key is: ', key);
       console.log('Log level value is: ', num);
       console.log('Log level message is: ', message);
    }
}
printImportant('ERROR', 'This is a message');

이렇게 함으로써 코드에 명확한 의미를 전달할 수 있으며, 잘못된 값을 사용하는 실수를 방지할 수 있다.

void

변수에 void 타입을 설정하면 undefined와 null만 할당 가능하고, 함수의 반환 타입으로 설정하면 해당 함수에는 반환 값을 설정할 수 없다. 이를 통해 코드의 의도를 명확하게 전달하고 타입 에러를 방지할 수 있다.

let result: void;  // 변수에는 undefined와 null만 할당 가능

result = undefined;  // 유효한 할당
result = null;       // 유효한 할당
result = 42;         // 오류! void 타입 변수에 숫자를 할당할 수 없음


function greet(): void {
  console.log('Hello, world!');
  // return 'Hello';  // 오류! void 타입 함수에서는 값을 반환할 수 없음
}

never

예외처리에 사용할 수 있음

function throwError(message: string): never {
  throw new Error(message);
}

또는 무한 루프에도 사용할 수 있음

// 이 함수는 절대 함수의 끝까지 실행되지 않는다는 의미
function neverEnd(): never {
  while (true) {

  }
}

combine(유니온 or 조합)

여러 타입이 지정되었다는 것만 알지 무슨 타입인지는 타입스크립트가 모르는 상태라 2번 줄에 빨간줄이 생기게 됨

function combine(input1: number | string, input2: number | string) {  // 불리언 등 더 추가 가능
  const result = input1 + input2;  // 불리언 같은 타입은 +가 안 되니 빨간줄 생기게 됨
  return result;
}

const combinedAges = combine(30, 26);
console.log(combinedAges);

const combinedNames = combine('Max', 'Anna');
console.log(combinedNames);

주의해야할 점은 아래의 경우다.

interface Person {
  name: string;
  age: number;
}
interface Developer {
  name: string;
  skill: string;
}
function introduce(someone: Person | Developer) {
  someone.name; // O 정상 동작
  someone.age; // 타입 오류
  someone.skill; // 타입 오류
}

간단하게 생각해보면 매개변수 someone의 타입이 Person일 경우, introduce 함수 내에서 skill을 조작하고 있다면 당연히 에러가 발생한다.

이처럼 유니온을 사용할 때는 겹치는 속성만 조작해야 한다.

타입스크립트 무시하기

주석 필수임

 

// @ts-nocheck    =>  파일 맨 위

// @ts-ignore   =>   해당 줄 위