woalsrhKR
EVERYDAY
woalsrhKR
์ „์ฒด ๋ฐฉ๋ฌธ์ž
์˜ค๋Š˜
์–ด์ œ
  • ๐Ÿ“š ๊ธ€ ๋ชจ์Œ์ง‘ (578)
    • ๐Ÿ”ค Language (84)
      • ๐ŸŸจ JavaScript (52)
      • ๐ŸŸฆ TypeScript (12)
      • ๐Ÿ’— SCSS (0)
      • ๐ŸŸ  HTML (12)
      • ๐Ÿ”ต CSS (8)
    • ๐ŸŒƒ ํ•˜๋ฃจ๊ธฐ๋ก (469)
    • ๐ŸŽฌ ์˜ํ™” ๊ฐ์ƒํšŒ (1)
    • ๐Ÿ’ป Web Develop (16)
      • โ˜•๏ธ STARBUCKS ๊ฐœ๋ฐœ์ผ์ง€ (14)
    • ๐ŸŽ“ University (6)
      • ์˜คํ”ˆ์†Œ์Šค ๊ธฐ์ดˆ ํ”„๋กœ์ ํŠธ (5)
      • ์ •๋ณดํ†ต์‹ ๊ฐœ๋ก  (0)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ํ™ˆ
  • ํƒœ๊ทธ
  • ๋ฐฉ๋ช…๋ก

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • ํŒŒ๋น„์ฝ˜
  • ์ƒ๋Œ€๊ฒฝ๋กœ
  • 79๋Œ€ํฌ
  • ์•„์ด์ฝ˜
  • ์—ฌ์ž์นœ๊ตฌ
  • ์˜คํ”ˆ๊ทธ๋ž˜ํ”ผ
  • ์ผ์ƒ
  • ์ผ๊ธฐ
  • ๋‹ค์ด์†Œ
  • ์‚ฌ์ฐฝ
  • ํฐํŠธ
  • ์ ˆ๋Œ€๊ฒฝ๋กœ
  • ์Šคํƒ€๋ฒ…์Šค
  • ๋ฉ”๊ฐ€์ปคํ”ผ
  • ์ง„์‹๋‹น
  • ๋‹ค์ด์†Œ์‚ฌ์ฐฝ
  • ํด๋ก 
  • ํŠธ์œ„ํ„ฐ์นด๋“œ
  • ๊ฐ์ฒด
  • object

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌ

hELLO ยท Designed By ์ •์ƒ์šฐ.
woalsrhKR

EVERYDAY

๐Ÿ”ค Language/๐ŸŸฆ TypeScript

TS. Tuple / any / unknown / never / void

2022. 3. 14. 23:51

Tuple

Tuple์€ array๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•œ๋‹ค.

const players: readonly [string, number, boolean] = ["imae", 99, true]

players[0] = "hi" // error! readonly!

let a: undefined = undefined
let b: null = null

๋ฐฐ์—ด์ธ๋ฐ ํƒ€์ž…์ด ํ•œ๊ฐ€์ง€๊ฐ€ ์•„๋‹Œ ๊ฒฝ์šฐ์ด๋‹ค. ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๊ฐ์ฒด์ด๊ณ  ๊บผ๋‚ด ์‚ฌ์šฉํ•  ๋•Œ, ์ฃผ์˜๊ฐ€ ํ•„์š”ํ•˜๋‹ค.

๋ฐฐ์—ด์„ Destrurctutingํ•˜๋ฉด ํƒ€์ž…์ด ์ œ๋Œ€๋กœ ์–ป์–ด์ง„๋‹ค.

let x: [string, number];

x = ["hello", 39]; // ์ˆœ์„œ, ํƒ€์ž…, ๊ธธ์ด๋„ ๋งž์•„์•ผํ•œ๋‹ค.
x = [10, "Imae"]; // ์ˆœ์„œ๊ฐ€ ๋ฐ”๋€Œ๋‹ˆ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

x[3] = "world"; // ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒ ts(2322)

const person: [string, number] = ["Imae", 32];
const[first, second, third] = person; // first๋Š” string, second๋Š” number, third๋Š” ์˜ค๋ฅ˜ ๋ฐœ์ƒ

any

๊ธฐ๋ณธ์ ์œผ๋กœ any๋Š” ๋น„์–ด์žˆ๋Š” ๊ฐ’์„ ์‚ฌ์šฉํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.

Typescript๋กœ๋ถ€ํ„ฐ ๋น ์ ธ๋‚˜์˜ค๊ณ  ์‹ถ์œผ๋ฉด ์“ฐ๋Š” ํƒ€์ž… ์ฆ‰, any๋Š” JavaScript์ฒ˜๋Ÿผ ์•„๋ฌด ํƒ€์ž…์ด๋‚˜ ๋  ์ˆ˜ ์žˆ๋‹ค.

any ์‚ฌ์šฉ์„ ์ž์ฃผ ํ•˜๋Š” ๊ฒƒ์€ ์ข‹์ง€ ์•Š๋‹ค. ์™œ๋ƒํ•˜๋ฉด TypeScript์˜ ์žฅ์ ์ธ TypeScript์˜ ๋ณดํ˜ธ์žฅ์น˜๊ฐ€ ์—†์–ด์ง„๋‹ค.

const c: any[] = [1, 2, 3, 4]
const d: any = true
c + d

์–ด๋–ค ํƒ€์ž…์ด์–ด๋„ ์ƒ๊ด€์—†๋Š” ํƒ€์ž…์ด๋‹ค. ์ด๊ฑธ ์ตœ๋Œ€ํ•œ ์“ฐ์ง€ ์•Š๋Š”๊ฒŒ ํ•ต์‹ฌ์ด๋‹ค. ์™œ๋ƒํ•˜๋ฉด ์ปดํŒŒ์ผ ํƒ€์ž„์— ํƒ€์ž… ์ฒดํฌ๊ฐ€ ์ •์ƒ์ ์œผ๋กœ ์ด๋ค„์ง€์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๊ทธ๋ž˜์„œ ์ปดํŒŒ์ผ ์˜ต์…˜ ์ค‘์—๋Š” any๋ฅผ ์จ์•ผํ•˜๋Š”๋ฐ ์“ฐ์ง€ ์•Š์œผ๋ฉด ์˜ค๋ฅ˜๋ฅผ ๋ฑ‰๋„๋ก ํ•˜๋Š” ์˜ต์…˜์ธ nolmplicitAny๋„ ์žˆ๋‹ค.

function returnAny(message: any): any {
  console.log(message);
}

const any1 = returnAny("๋ฆฌํ„ด์€ ์•„๋ฌด๊ฑฐ๋‚˜");

any

  • any๋Š” ๊ณ„์†ํ•ด์„œ ๊ฐœ์ฒด๋ฅผ ํ†ตํ•ด ์ „ํŒŒ๋œ๋‹ค.
  • ๊ฒฐ๊ตญ, ๋ชจ๋“  ํŽธ์˜๋Š” ํƒ€์ž… ์•ˆ์ „์„ฑ์„ ์žƒ๋Š” ๋Œ€๊ฐ€๋กœ ์˜จ๋‹ค.
  • ํƒ€์ž… ์•ˆ์ „์„ฑ์€ TypeScript๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ฃผ์š” ๋™๊ธฐ ์ค‘ ํ•˜๋‚˜์ด๋ฉฐ ํ•„์š”ํ•˜์ง€ ์•Š์€ ๊ฒฝ์šฐ์—๋Š” any๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋„๋ก ํ•ด์•ผํ•œ๋‹ค.
any1.toString(); 

let looselyTyped: any = {};

const d = looselyTyped.a.b.c.d; // const d: any

Avoid leaking any

any๋Š” ์กด์žฌํ•  ์ˆ˜ ๋ฐ–์— ์—†๋‹ค. any๋กœ ์ง€์ •๋œ ๊ฐ’์„ ์ด์šฉํ•ด์„œ ์ƒˆ๋กœ์šด ๊ฐ’์œผ๋กœ ๋งŒ๋“ค์–ด ์‚ฌ์šฉํ•˜๋Š” ์ง€์ ์—์„œ ๋ˆ„์ˆ˜๋ฅผ ๋ง‰์•„์ฃผ๋„๋ก ๋…ธ๋ ฅ์ด ํ•„์š”ํ•˜๋‹ค.

function leakingAny(obj: any) {
  const a = obj.num; // a๋ฅผ number๋กœ ๊ทœ์ •ํ•˜๋ฉด b๋„ number, c๋„ ๋„˜๋ฒ„
  const b = a + 1;
  return b;
}

const c = leakingAny({num: 0}); // const c = any
c.indexOf("0") // a๋ฅผ number๋กœ ๊ทœ์ •ํ•˜๋ฉด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

unknown

  • unknown์€ JavaScript์—๋Š” ์กด์žฌํ•˜์ง€ ์•Š๊ณ  TypeScript์—๋งŒ ์กด์žฌํ•˜๋Š” ๊ฒƒ์ด๋‹ค. 
  • ๋งŒ์•ฝ API๋กœ๋ถ€ํ„ฐ ๋ณ€์ˆ˜๋ฅผ ๋ฐ›๋Š”๋ฐ ์–ด๋–ค ํƒ€์ž…์ธ์ง€ ๋ชจ๋ฅธ๋‹ค๋ฉด unknown์„ ์‚ฌ์šฉํ•œ๋‹ค.
  • unknown์„ ์‚ฌ์šฉํ•˜๊ธฐ ์ „์— type of๋ฅผ ์•Œ์•„๋ณด์•„์•ผ ํ•œ๋‹ค.
let a:unknown;

let b = a + 1 // a๊ฐ€ number์ธ์ง€ ๋ชจ๋ฅด๊ธฐ ๋•Œ๋ฌธ์— error ๋ฐœ์ƒ

if(typeof a=== 'number'){
    let b = a + 1
}

iif(typeof a === "string"){
    let b = a.toUpperCase();
}
  • ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์„ ์ž‘์„ฑํ•  ๋•Œ ๋ชจ๋ฅด๋Š” ๋ณ€์ˆ˜์˜ ํƒ€์ž…์„ ๋ฌ˜์‚ฌํ•ด์•ผ ํ•  ์ˆ˜๋„ ์žˆ๋‹ค.
  • ์ด๋Ÿฌํ•œ ๊ฐ’์€ ๋™์  ์ฝ˜ํ…์ธ  (์˜ˆ: ์‚ฌ์šฉ์ž๋กœ๋ถ€ํ„ฐ, ๋˜๋Š” ์šฐ๋ฆฌ API์˜ ๋ชจ๋“  ๊ฐ’์„ ์˜๋„์ ์œผ๋กœ ์ˆ˜๋ฝํ•˜๊ธฐ๋ฅผ ์›ํ•  ์ˆ˜ ์žˆ๋‹ค.)
  • ์ด ๊ฒฝ์šฐ, ์ปดํŒŒ์ผ๋Ÿฌ์™€ ๋ฏธ๋ž˜์˜ ์ฝ”๋“œ๋ฅผ ์ฝ๋Š” ์‚ฌ๋žŒ์—๊ฒŒ ์ด ๋ณ€์ˆ˜๊ฐ€ ๋ฌด์—‡์ด๋“  ๋  ์ˆ˜ ์žˆ์Œ์„ ์•Œ๋ ค์ฃผ๋Š” ํƒ€์ž…์„ ์ œ๊ณตํ•˜๊ธฐ๋ฅผ ์›ํ•˜๋ฏ€๋กœ unknownํƒ€์ž…์„ ์ œ๊ณตํ•œ๋‹ค.

typeof ๊ฒ€์‚ฌ, ๋น„๊ต ๊ฒ€์‚ฌ ๋˜๋Š” ๊ณ ๊ธ‰ ํƒ€์ž… ๊ฐ€๋“œ๋ฅผ ์ˆ˜ํ–‰ํ•˜์—ฌ ๋ณด๋‹ค ๊ตฌ์ฒด์ ์ธ ๋ณ€์ˆ˜๋กœ ์ขํž ์ˆ˜ ์žˆ๋‹ค.

declare const maybe: unknown;

const aNumber: number = maybe; // unknown์€ number์— ๋ฐ”๋กœ ํ• ๋‹นํ•  ์ˆ˜ ์—†๋‹ค.

if (maybe === true) {
  const aBoolean: boolean = maybe;

  const aString: string = maybe; // string์— ์„ ์–ธํ•  ์ˆ˜ ์—†๋‹ค.
}

if (typeof maybe === 'string') {
  const aStirng: string = maybe;
  
  const aBoolean: boolean = maybe; // boolean์œผ๋กœ ์„ ์–ธํ•  ์ˆ˜ ์—†๋‹ค. 
}
  • TypeScript 3.0 ๋ฒ„์ „๋ถ€ํ„ฐ ์ง€์›ํ•œ๋‹ค. 
  • any์™€ ์ง์œผ๋กœ any๋ณด๋‹ค Type-safeํ•œ ํƒ€์ž…์ด๋‹ค.
    • any์™€ ๊ฐ™์ด ์•„๋ฌด๊ฑฐ๋‚˜ ํ• ๋‹นํ•  ์ˆ˜ ์žˆ๋‹ค.
    • ์ปดํŒŒ์ผ๋Ÿฌ๊ฐ€ ํƒ€์ž…์„ ์ถ”๋ก ํ•  ์ˆ˜ ์žˆ๊ฒŒ๋” ํƒ€์ž…์˜ ์œ ํ˜•์„ ์ขํžˆ๊ฑฐ๋‚˜ ํƒ€์ž…์„ ํ™•์ •ํ•ด์ฃผ์ง€ ์•Š์œผ๋ฉด ๋‹ค๋ฅธ ๊ณณ์— ํ• ๋‹น ํ•  ์ˆ˜ ์—†๊ณ , ์‚ฌ์šฉํ•  ์ˆ˜ ์—†๋‹ค.
  • unknown ํƒ€์ž…์„ ์‚ฌ์šฉํ•˜๋ฉด runtime error๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค.
    • ์‚ฌ์šฉ ์ „์— ๋ฐ์ดํ„ฐ์˜ ์ผ๋ถ€ ์œ ํ˜•์˜ ๊ฒ€์‚ฌ๋ฅผ ์ˆ˜ํ–‰ํ•ด์•ผ ํ•จ์„ ์•Œ๋ฆฌ๋Š” API์— ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค.

never

never์€ JavaScript์—๋Š” ์กด์žฌํ•˜์ง€ ์•Š๊ณ  TypeScript์—๋งŒ ์กด์žฌํ•˜๋Š” ๊ฒƒ์ด๋‹ค. 

never์€ ํ•จ์ˆ˜๊ฐ€ ์ ˆ๋Œ€  returnํ•˜์ง€ ์•Š์„ ๋•Œ ๋ฐœ์ƒํ•œ๋‹ค. ์ฆ‰, ํ•จ์ˆ˜์—์„œ exception(์˜ˆ์™ธ)์ด ๋ฐœ์ƒํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.

function hello(name:string|number):never{
    if(typeof name === "string"){
        name
    } else if (typeof name === "number") {
        name
    } else {
        name
    }
}

๋ฆฌํ„ด์— ์‚ฌ์šฉ๋œ๋‹ค. ๋ฆฌํ„ด์— ์‚ฌ์šฉ๋˜๋Š” ๊ฒฝ์šฐ, ์•„๋ž˜ 3๊ฐ€์ง€ ์ •๋„๊ฐ€ ๋Œ€๋ถ€๋ถ„์ด๋‹ค.

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

function fail() {
  return error("failed");
}

function infiniteLoop(): never {
  while(true) {}
}

never ํƒ€์ž…์€ ๋ชจ๋“  ํƒ€์ž…์˜ subtype์ด๋ฉฐ, ๋ชจ๋“  ํƒ€์ž…์— ํ• ๋‹นํ•  ์ˆ˜ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ, never์—๋Š” ๊ทธ ์–ด๋–ค ๊ฒƒ๋„ ํ• ๋‹นํ•  ์ˆ˜ ์—†๋‹ค.

any ์กฐ์ฐจ๋„ never์—๊ฒŒ ํ• ๋‹นํ•  ์ˆ˜ ์—†๋‹ค. ์ž˜๋ชป๋œ ํƒ€์ž…์„ ๋„ฃ๋Š” ์‹ค์ˆ˜๋ฅผ ๋ง‰๊ณ ์ž ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๊ธฐ๋„ ํ•œ๋‹ค.

declare const a: string | number;

if (typeof a !== 'string') {
  a; // const a: number
}

type Indexable<T> = T extends string ? & {[index: string]: any} : never;

type ObjectIndexable = Indexable<{}>; // ์ž˜๋ชป๋œ ํƒ€์ž…์„ ๋„ฃ๋Š” ์‹ค์ˆ˜๋ฅผ ๋ง‰๋Š” ์šฉ๋„๋กœ ์‚ฌ์šฉํ•œ๋‹ค.
const b: Indexable<{}> = ''; // ์ž˜๋ชป๋œ ํƒ€์ž…์„ ๋„ฃ์–ด์„œ ์˜ค๋ฅ˜ ๋ฐœ์ƒ

void

void๋Š” JavaScript์—๋Š” ์กด์žฌํ•˜์ง€ ์•Š๊ณ  TypeScript์—๋งŒ ์กด์žฌํ•˜๋Š” ๊ฒƒ์ด๋‹ค. 

๊ทธ๋ฆฌ๊ณ  ์–ด๋–ค ํƒ€์ž…๋„ ๊ฐ€์ง€์ง€ ์•Š๋Š” ๋นˆ ์ƒํƒœ๋ฅผ ์˜๋ฏธํ•œ๋‹ค.

์ฆ‰, ์•„๋ฌด๊ฒƒ๋„ ๋ฆฌํ„ดํ•˜์ง€ ์•Š๋Š” ํ•จ์ˆ˜๋‹ค.

function hello(){
    console.log('x')
}
const a = hello(); // void๊ฐ’
a.toUpperCase() // error!

๊ฐ’์€ ์—†๊ณ  ํƒ€์ž…๋งŒ ์žˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์†Œ๋ฌธ์ž๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๋‹ค.

์ผ๋ฐ˜์ ์œผ๋กœ ๊ฐ’์„ ๋ฐ˜ํ™˜ํ•˜์ง€ ์•Š๋Š” ํ•จ์ˆ˜์˜ ๋ฆฌํ„ด ํƒ€์ž…์œผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค. ๊ทธ์™ธ์—๋Š” ์‚ฌ์šฉํ•  ์ผ์ด ๊ฑฐ์˜ ์—†๋‹ค.

ํ• ๋‹น์ด ๊ฐ€๋Šฅํ•œ ๊ฐ’์€ undefined์ด๋‹ค.

function returnVoid(message: string): void { 
  // function returnVoid(message: string): void
  console.log(message);

  return undefined; // undefine๋งŒ ์œ ์ผํ•˜๊ฒŒ void์— ํ• ๋‹นํ•  ์ˆ˜ ์žˆ๋Š” ํ˜•ํƒœ์ด๋‹ค.
}

const r = returnVoid("๋ฆฌํ„ด์ด ์—†๋‹ค."); // const r: void
์ €์ž‘์žํ‘œ์‹œ (์ƒˆ์ฐฝ์—ด๋ฆผ)

'๐Ÿ”ค Language > ๐ŸŸฆ TypeScript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

TS. Alias (๋ณ„์นญ)  (2) 2022.06.20
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋Œ€์‹  ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ํƒํ•˜๋Š” ์ด์œ   (1) 2022.06.20
TS. ์ธํ„ฐํŽ˜์ด์Šค interface  (0) 2022.03.22
TS. ํƒ€์ž… ์‹œ์Šคํ…œ Type System  (0) 2022.03.16
TS. Type / Boolean / Number / String / Symbol / Null & undefined / Object / Array  (0) 2022.03.13
    '๐Ÿ”ค Language/๐ŸŸฆ TypeScript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋Œ€์‹  ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋ฅผ ํƒํ•˜๋Š” ์ด์œ 
    • TS. ์ธํ„ฐํŽ˜์ด์Šค interface
    • TS. ํƒ€์ž… ์‹œ์Šคํ…œ Type System
    • TS. Type / Boolean / Number / String / Symbol / Null & undefined / Object / Array
    woalsrhKR
    woalsrhKR

    ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”