Typescript ํ ํ๋ฆฟ ๋ฌธ์์ด ์ ํ
ํ ํ๋ฆฟ ๋ฌธ์์ด ๋ฉ์ปค๋์ฆ์ ์ฌ์ฉํ์ฌ ๋ฌธ์์ด ์ ํ์ ์ขํ๋ ๋ฐฉ๋ฒ
ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด ์ ํ์ด๋?
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";
}
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}`;
// 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'
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}`);
๊ฒฐ๋ก
๋ณด์๋ค์ํผ Typescript๋ ๋์ ์ ํ์ ์ ์ ํ ๋ ๋งค์ฐ ๊ฐ๋ ฅํ ์ธ์ด์
๋๋ค. ์ด๊ฒ์ ํนํ ๋ฌธ์์ด ๊ธฐ๋ฐ ์ ํ์ ํด๋น๋ฉ๋๋ค. ๋ฒ์ 4.3์ ์ต์ ๋ณ๊ฒฝ ์ฌํญ์ผ๋ก ์ธํด ์ ํ ์์คํ
์ ๊ทธ ์ด๋ ๋๋ณด ๋ค ์ฌ๋ฐ๋ฅธ ์ ํ์ ๋ ์ ์ถ๋ก ํ ์ ์์ผ๋ฏ๋ก Typescript๋ก ์์
ํ๋ ๊ฒ์ด ์ฆ๊ฒ์ต๋๋ค.
ํ์
Feedback
์ถ์ฒ ๊ฒ์๋ฌผ