Typescript ํ…œํ”Œ๋ฆฟ ๋ฌธ์ž์—ด ์œ ํ˜•

ํ…œํ”Œ๋ฆฟ ๋ฌธ์ž์—ด ๋ฉ”์ปค๋‹ˆ์ฆ˜์„ ์‚ฌ์šฉํ•˜์—ฌ ๋ฌธ์ž์—ด ์œ ํ˜•์„ ์ขํžˆ๋Š” ๋ฐฉ๋ฒ•

Tom โ€ข ํƒ€์ดํ”„ ์Šคํฌ๋ฆฝํŠธ ๋ฐ ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ, ์ฝ”๋”ฉ ๊ฐ€์ด๋“œ, ๋ฐฐ์šฐ๊ธฐ โ€ข

ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด ์œ ํ˜•์ด๋ž€?

Typescript 4.1 ์ดํ›„๋กœ ๋ฌธ์ž์—ด์˜ ํƒ€์ดํ•‘์„ ํฌ๊ฒŒ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ„๋‹จํžˆ ์š”์•ฝํ•˜์ž๋ฉด Typescript์—์„œ ์†Œ์œ„ "๋ฆฌํ„ฐ๋Ÿด ์œ ํ˜•"์„ ์ •์˜ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ณ€์ˆ˜๋ฅผ ๋ฌธ์ž์—ด๋กœ ์ •์˜ํ•˜๋Š” ๋Œ€์‹  ํ—ˆ์šฉ๋˜๋Š” ํŠน์ • ๋ฌธ์ž์—ด ์ง‘ํ•ฉ์œผ๋กœ ์œ ํ˜•์„ ์ขํž ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// Define a mutable string as 'Literal Type'.
let key: "name" | "department" = "name";

// This works, as 'department' is part of the type.
key = "department";
// Won't work, as it's not define in the union type.
key = "company";

// Of course, the same applies for functions.
function getKey(): "name" | "department" {
  return Math.random() <= 0.5 ? "name" : "department";
}

typescriptLanguageCheck out all coding posts

Typescript 4.1๋ถ€ํ„ฐ์ด ๊ฐœ๋…์ด ๋”์šฑ ๋ฐœ์ „๋˜์—ˆ์Šต๋‹ˆ๋‹ค. Javascript์—์„œ "ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด ๋ฌธ์ž์—ด"์„ ์˜๊ฐ์œผ๋กœ ์‚ฌ์šฉํ•˜๋ฉด Typescript์˜ ๋ฆฌํ„ฐ๋Ÿด ์œ ํ˜•์— ๋™์ผํ•œ ๊ตฌ๋ฌธ์„ ์ ์šฉ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฃผ์š” ์ฐจ์ด์ ์€ "ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด ์œ ํ˜•"์„ ์‚ฌ์šฉํ•˜๋ฉด ์œ ํ˜• ์ž์ฒด๊ฐ€์ด ๋ชจ์–‘์— ๋Œ€ํ•œ ๋งค๊ฐœ ๋ณ€์ˆ˜๋ฅผ ์ทจํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ํ›จ์”ฌ ๋” ๋งŽ์€ ์œ ์—ฐ์„ฑ์„ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ฐœ๋…์€ ์ œ๋„ค๋ฆญ๊ณผ ์œ ์‚ฌํ•˜์ง€๋งŒ ํŠน์ • ๊ฐ’์ด ํ•„์š”ํ•˜๋‹ค๋Š” ์ ์—์„œ ์•ฝ๊ฐ„ ๋‹ค๋ฆ…๋‹ˆ๋‹ค.

// Define a Literal Type
type State = "ready";

// Nice, isn't it? As in Javascript's 
// 'template literal strings', we can
// reuse the same syntax for TS.
//
// The create type here is now 'Key-ready'.
type Key = `key-${State}`;

typescriptLanguageCheck out all coding posts

// This of course works for union types as well.
// Let's take these non-descriptive types for a 
// quick demo:
type GraphState = "sleep" | "ready" | "error";
type MachineState = "booting" | "running";

// And here's the 'template literal type':
type EntityState = `ES-${GraphState | MachineState}`;

// The possible combinations therefore 
// work out like this:
//
// type EntityState = 'ES-sleep' 
//  | 'ES-ready'
//  | 'ES-error'
//  | 'ES-booting'
//  | 'ES-running'

typescriptLanguageCheck out all coding posts

Typescript 4.3์—๋Š” ๋” ๋งŽ์€ ๊ธฐ๋Šฅ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ๊ธ€์„ ์“ฐ๋Š” ๋™์•ˆ ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด ์œ ํ˜•์— ๋Œ€ํ•œ ์ถ”๊ฐ€ ๊ฐœ์„  ์‚ฌํ•ญ์„ ํฌํ•จํ•˜๋Š” Typescript 4.3์˜ ๋ฆด๋ฆฌ์Šค ํ›„๋ณด๊ฐ€ ์ถœ์‹œ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์ด์ œ ์œ ํ˜• ์‹œ์Šคํ…œ์ด ํ›จ์”ฌ ๋” ๋™์ ์ด๊ณ  ์˜ฌ๋ฐ”๋ฅธ ์œ ํ˜•์„ ๋” ์ž˜ ์ถ”๋ก  ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์ตœ์‹  ๋ณ€๊ฒฝ ์‚ฌํ•ญ์€ ํ…œํ”Œ๋ฆฟ ๋ฌธ์ž์—ด ์œ ํ˜•์„ ๋”์šฑ ์„ฑ์ˆ™์‹œํ‚ต๋‹ˆ๋‹ค.

// This example is taken 1:1 from 
// Typescript's 4.3 announcement.
// Please check out the link in the
// addendum to see all examples!

declare let s: string;
declare function f<T extends string>(x: T): T;

// Previously: string
// Now       : `hello-${string}`
let x2 = f(`hello ${s}`);

typescriptLanguageCheck out all coding posts

๊ฒฐ๋ก 

๋ณด์‹œ๋‹ค์‹œํ”ผ Typescript๋Š” ๋™์  ์œ ํ˜•์„ ์ •์˜ ํ•  ๋•Œ ๋งค์šฐ ๊ฐ•๋ ฅํ•œ ์–ธ์–ด์ž…๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ํŠนํžˆ ๋ฌธ์ž์—ด ๊ธฐ๋ฐ˜ ์œ ํ˜•์— ํ•ด๋‹น๋ฉ๋‹ˆ๋‹ค. ๋ฒ„์ „ 4.3์˜ ์ตœ์‹  ๋ณ€๊ฒฝ ์‚ฌํ•ญ์œผ๋กœ ์ธํ•ด ์œ ํ˜• ์‹œ์Šคํ…œ์€ ๊ทธ ์–ด๋Š ๋•Œ๋ณด ๋‹ค ์˜ฌ๋ฐ”๋ฅธ ์œ ํ˜•์„ ๋” ์ž˜ ์ถ”๋ก  ํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ Typescript๋กœ ์ž‘์—…ํ•˜๋Š” ๊ฒƒ์ด ์ฆ๊ฒ์Šต๋‹ˆ๋‹ค.

ํ–‰์œ„

Feedback

์ถ”์ฒœ ๊ฒŒ์‹œ๋ฌผ