23.01.17 TypeScript-Type

Gon·2023년 1월 17일
0

TypeScript

목록 보기
2/2
post-thumbnail

기본 타입의 종류

String

// 문자열
let str: string = "TypeScript";

let name: string = "Gon";
let age: number = 20;
let sentence: string = `나는 ${name}. i'm ${age + 4}years old`;

Number

// 숫자형
let decimal: number = 0;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

Boolean

// 참/거짓
let isTrue: boolean = true;
let isFalse: boolean = false;

Array

// 배열
let arr: number[] = [1, 2, 3];
let array: Array<number> = [1, 2, 3];

Tuple

튜플 타입을 사용하면, 요소의 타입과 개수가 고정된 배열을 표현할 수 있음

let x: [string, number];
x = ["hi", 123];

let tuple: [string, number, boolean] = ["hi", 123, true];

Any( = 자바스크립트 변수)

let any: any = "hi";

any = 123;
any = "asdf";
any = true;
any = [];
let num: any = 10;
let array1: any = ["a", 2, true];

Void

함수에서 반환 값이 없는 경우 사용

const a = (): void => {
  console.log("a");
};

Null, undefined

let b: null = null;
let c: undefined = undefined;

let unionType: number | null = null;

Never

비정상적 종료가 되거나 함수가 끝까지 실행되지 않을 때 사용 (거의 사용 X)

// Never
const d = (): never => {
  while (true) {
    console.log("hi");
  }
};

const e = (): never => {
  throw new Error("error");
};

함수 타입

const add = (num1: number, num2: number) => {
  return num1 + num2;
};
  • 반환값이 없는 함수
function printResult(num: number) {
  console.log("Result" + num);
}
  • Optional Parameter: 존재 유무 확인
function add2(n1: number, n2?: number): number {
  if (!n2) return n1;
  return n1 + n2;
}

const a2 = add2(1, 2);
const c2 = add2(10);
  • Default Parameter: 기본값 설정
function add3(n1: number, n2: number = 0): number {
  if (!n2) return n1;
  return n1 + n2;
}

const a3 = add3(1, 2);
const c3 = add3(10);
  • Rest Parameter: 나머지 연산
function add4(n1: number, ...nums: number[]): number {
  let totalOfNums = 0;
  for (let key in nums) {
    totalOfNums += nums[key];
  }
  return n1 + totalOfNums;
}

const result = add4(10, 20, 30, 40);

enum 타입

  1. 자바스크립트에는 없고 타입스크립트에만 있는 타입
  2. 특정 값들의 집합을 의미하는 자료형
  • 숫자형 이넘
enum Direction {
  Up = 1, 	// 1
  Down,  	// 2
  Left,		// 3
  Right,	// 4
}

const up: Direction = Direction.Up;
const leftOrRight: Direction.Left | Direction.Right = Direction.Left;
  • 문자형 이넘
enum Direction2 {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}
  • 복합 이넘(권고X)
enum BooleanLikeHeterogeneousEnum {
  No = 0,
  Yes = "YES",
}

유니온(Union) 타입: (A || B)

  • 자바스크립트의 OR 연산자 || 와 같은 의미
const printOut = (input: string | number) => {
  console.log(input);
};

printOut("문자열");
printOut(20);
  • 장점
function getAge1(age: number | string) {
  if (typeof age === "number") {
    age.toFixed();
    return age;
  }
  return age;
}

console.log(getAge1("20")); //Error
console.log(getAge1(20));

function getAge2(age: number | string) {
  if (typeof age === 'number') {
    age.toFixed();
    return age;
  }
  if (typeof age === 'string') {
    return age;
  }
}

console.log(getAge2("20"));
console.log(getAge2(20));


function padLeft(value: string, padding: any) {
  if (typeof padding === "number") {
    return Array(padding + 1).join(" ") + value;
  }
  if (typeof padding === "string") {
    return padding + value;
  }
  throw new Error(`Expected string or number, got '${padding}'.`);
}

console.log(padLeft("Hello world", 4)); // "    Hello world"
console.log(padLeft("Hello world", "!!!")); // "!!!Hello world"

Type Allias(사용자 정의 타입)

// type.ts
type Hero = {
	name: string;
	power: number;
	height: number;
};
import type { Hero } from './type';

const hero1: Hero = {
  name: "슈퍼맨",
  power: 1000,
  height: 190,
  gender: "남"
}

const printHero = (hero: Hero) => {
  console.log(hero.name, hero.power);
};

printHero(hero1);

0개의 댓글