[Typescript] Typescript 기본 & 기본 타입

Using Type

• number
  • JS나 TS에서 number 타입은 하나뿐
• string
  • ‘Hi’, “Hi”,Hi
• boolean
  • true, false
• 자바스크립트 차이
  • 자바스크립트는 동적 타입
  • 문자열을 할당할 때 처음에 숫자형 변수가 있더라도 전혀 문제 없음
  • 그래서 특정 타입에 의존하는 코드가 있는 경우, 런타임에서 현재 타입을 확인할 수 있는
  • typeof를 사용
  • 반면, 타입스크립트는 정적 타입
  • 변수와 매개변수의 타입을 먼저 정의함
  • 런타임 중에 갑자기 변경되지 않음
  • 숫자형으로 설정한 변수에 문자열을 할당하면 에러발생
  • 타입스크립트는 자바스크립트보다 훨씬 많은 타입을 알고 있음
  • 결론 : 타입스크립트 타입은 컴파일 중에 확인되는 반면,
  • 자바스크립트 타입은 런타임 중에 확인 됨
  • 추가: 타입스크립트는 타입을 명시적으로 할당할수도 (age: number)
  • 타입을 추론할 수도 있음

object

• {age: 30}
• 객체는 위와 같은 속성을 가져야 하거나, 생성자 함수를 기반으로 해야 함

• 자바스크립트의 객체는 쉼표 사용하지만
• 타입스크립트의 객체는 세미콜론 사용

Array

• [1, 2, 3]
• 배열에는 문자열과 숫자형 혼합 가능
• 타입스크립트에서 배열에 무엇이든 지정 가능
• 어떤 자바스크립트 배열이든 지원하며 배열의 타입을 유연하게도, 제한적으로도 지정 가능

• 배열은 대괄호 [ ] 앞에 타입을 붙여줌
• 혼합된 타입의 배열을 사용하려면 any 키워드 사용

Tuple

• [1, 2]
• 자바스크립트에서는 튜플이 없었음
• 길이와 타입이 고정된 배열
• 대괄호 안에 타입을 지정

role: [number, string]

Enum

• enum{NEW, OLD}
• 자바스크립트에는 없는 사용자 지정 타입

• 마우스 커서 올리면 저장된 숫자가 표시됨
• 시작값 숫자를 지정하거나 필요에 따라 임의의 숫자를 모든 식별자에 고유한 값으로 할당할 수 있음
• 텍스트도, 혼합도 할당 가능

enum Role { ADMIN = 'ADMIN', READ_ONLY = 100, AUTHOR = 200 };

• 사람이 읽을 수 잇고 백그라운드에서 매핑된 값이 있는 식별자가 필요할 때 사용

Any

• 가장 유연한 타입
• 이 타입은 타입스크립트에 어떤 것도 이해시키지 않음
• 그렇기 때문에 자바스크립트 쓰는 것과 다를 바 없게 됨
• any 타입을 사용하는 모든 위치에서는 타입스크립트 컴파일러가 작동하지 않게 됨
• 어떤 값이나 종류의 데이터가 어디에 저장될지 전혀 알 수 없는 경우에 대비하거나
• 런타임 도중 특정 값에 수행하고자 하는 작업의 범위를 좁히기 위해 사용
• 그 외의 경우 any를 쓰지 않는게 좋음

union (조합 타입)

• 서로 다른 두 종류의 값을 사용해야 하는 애플리케이션에서
• 함수나 상수, 변수의 매개변수를 사용해야 한다면 유니언 타입을 사용하여
• 타입스크립트에게 숫자나 문자열 중 하나를 사용해도 괜찮다는 것을 알릴 수 있음

function combine(input1: number | string, input2: number | string) {
  let result;
  if (typeof input1 === "number" && typeof input2 === "number") {
    result = input1 + input2;
  } else {
    result = input1.toString() + input2.toString();
  }
  return result;
}

리터럴 타입

• 단순한 특정 변수나 매개변수가 아님
• 숫자나 문자열도 아니며 정확한 값을 가지는 타입

function combine(
  input1: number | string,
  input2: number | string,
  resultConversion: "as-number" | "as-text"
) {
  let result;
  if (
    (typeof input1 === "number" && typeof input2 === "number") ||
    resultConversion === "as-number"
  ) {
    result = +input1 + +input2;
  } else {
    result = input1.toString() + input2.toString();
  }
  return result;
  //   if (resultConversion === "as-number") {
  //     return +result; // 숫자로 변환해주는 + 기호를 입력
  //   } else {
  //     return result.toString();
  //   }
}

const combinedAges = combine(30, 26, "as-number");
console.log(combinedAges);

const combinedStringAges = combine("30", "26", "as-number");
console.log(combinedStringAges);

const combinedNames = combine("Max", "Anna", "as-text");
console.log(combinedNames);

타입 알리어스 / 사용자 정의 타입

• 타입 별칭을 사용하여 타입을 직접 생성
• 유니온 타입을 간결하고 간편하게 사용가능
• 유니온 타입을 저장하는 것 뿐만 아니라 복잡할 수 있는 객체 타입에도 별칭 붙임
• 타입 별칭을 사용하면 불필요한 반복을 피하고 타입을 중심에서 관리할 수 있음
• 타입 설정이 필요한 코드 어디서든 사용 가능
• 타입 알리어스 사용 전

// 타입 알리어스 사용전

function greet(user: { name: string; age: number }) {
  console.log('Hi, I am ' + user.name);
}
 
function isOlder(user: { name: string; age: number }, checkAge: number) {
  return checkAge > user.age;
}

// 단순화 후

type User = { name: string; age: number };
 
function greet(user: User) {
  console.log('Hi, I am ' + user.name);
}
 
function isOlder(user: User, checkAge: number) {
  return checkAge > user.age;
}

함수 반환 타입 및 무효

• 함수에는 타입보다 중요한게 하나 있는데
• 반환(return) 타입임
• 반환 타입은 타입스크립트가 추론 함
• undefined는 타입스크립트에서는 타입임
• void는 반환문이 없을때 쓰이는 타입
• 드물게 쓰이는 undefined는 실제 값을 반환하지 않을 때 사용할 수 있음
• 값을 반환하지 않는 함수를 사용하는 경우에는 void를 표준으로 사용
• void를 명시적으로 지정할 수 있지만 타입스크립트는 이 코드를 추론할 수 있는 차이가 있음

타입의 기능을 하는 함수

• 함수는 타입스크립트가 제공하는 타입임
• 함수 타입은 함수의 매개변수 및 반환 타입을 정의
• 자바스크립트에서 이 화살표 함수 표기법에 따라 만들어 짐

let combineValues: (a: number, b: number) => number;

함수 타입 및 콜백

• 콜백과 함수 타입은 거의 같은 방식으로 작동 함
• 콜백 함수는 자신이 전달되는 인수가 반환 값을 기대하지 않는 경우에도 값을 반환할 수 있음

function sendRequest(data: string, cb: (response: any) => void) {
  // ... sending a request with "data"
  return cb({data: 'Hi there!'});
}
 
sendRequest('Send this!', (response) => { 
  console.log(response);
  return true;
 });

알 수 없는 타입 unknown

let userInput: unknown;
let userName: string;

userInput = 5;
userInput = "yum";

if (typeof userInput === "string") {
  userName = userInput;
}

절대 타입 never

• 아무것도 반환하지 않는 void와 달리
• never는 함수가 반환할 수 있는 타입
• never를 반환하며 반환값을 생성하지 않음

// 에러 객체를 생성하여 넘기는 유틸리티 함수

function generateError(message: string, code: number):never {
  throw { message: message, errorCode: code };
}

generateError("An error occurred!", 500);

• never를 할당하지 않고 마우스 커서를 올리면 void가 추론 됨
• never가 새로운 유형이 아니기 때문
• 이 함수는 아무것도 반환하지 않고 기본적으로 스크립트나 스크립트의 일부를 충돌시키기 위한 것음을 개발자가 알 수 있음