Zoeeey
Stack flows in you
Zoeeey
  • λΆ„λ₯˜ 전체보기 (155)
    • πŸ’‘ UXUI (4)
      • UXUI (2)
      • UI (2)
      • UX (0)
    • 🟨 JavaScript (66)
      • κ°œλ… (42)
      • 정리 (2)
      • λ¬Έμ œν’€κΈ° (ν”„λ‘œκ·Έλž˜λ¨ΈμŠ€, μ½”λ”©μ• ν”Œ) (15)
      • μ‘μš©ν•˜μ—¬ μžλ™ν™”orλ¬Έμ œν•΄κ²°ν•˜κΈ° (2)
      • 기타 (5)
    • βš›οΈ React (49)
      • κ°œλ… (27)
      • κ°œλ…(Redux) (3)
      • 정리 (4)
      • λ¬Έμ œν’€κΈ° (μ½”λ”©μ• ν”Œ: React) (15)
    • πŸ“˜ TypeScript (10)
      • κ°œλ… (8)
      • λ¬Έμ œν’€κΈ° (μ½”λ”©μ• ν”Œ) (2)
    • 🌐 HTML,CSS (18)
      • μ‹€λ¬΄μ—μ„œ 자주 λ°œμƒν•œ 였λ₯˜λ“€ (10)
      • λ’€λŠ¦κ²Œ μ•Œμ•„μ„œ λΌˆμ•„ν”ˆ μœ μš©ν•œ CSS (6)
      • 기타 자주 μ“°λŠ” CSS (2)
    • πŸ’» CS (8)
      • CS (5)
      • μ •κ·œν‘œν˜„μ‹ (2)
      • Git,Github (1)

νƒœκ·Έ

  • class
  • CS
  • array
  • UXUI
  • state
  • CSS
  • μ½”λ”©μ• ν”Œ
  • 였λ₯˜
  • useEffect
  • JavaScript
  • react
  • μ‚Όν•­μ—°μ‚°μž
  • json
  • TypeScript
  • object
  • ν”„λ‘œκ·Έλž˜λ¨ΈμŠ€
  • Props
  • Ajax
  • axios
  • redux
전체 방문자
였늘
μ–΄μ œ
hELLO Β· Designed By μ •μƒμš°.
Zoeeey

Stack flows in you

πŸ“˜ TypeScript/κ°œλ…

[μ½”λ”©μ• ν”Œ] νƒ€μž…μ„ λ³€μˆ˜μ— λ‹΄μž : type alias

2023. 12. 11. 12:30

type alias

νƒ€μž…μ„ λ³€μˆ˜μ— 담을 수 μžˆλ‹€. type aliasλŠ” μ˜λ¬Έ λŒ€λ¬Έμžλ‘œ μ‹œμž‘ν•˜λŠ” κ·œμΉ™μ΄ μžˆλ‹€.

type Name = string | number;
let 이름 :Name = 'kim';
type MyObject = {
  name? : string,
  age : number
}
let 철수 :MyObject = { 
  name : 'kim',
  age : 50
}

Object λ³€κ²½ μ—λŸ¬λ„μš°κΈ°

type MyObject = {
  readonly name : string,
}
let 철수 :MyObject = { 
  name : 'kim',
}
철수.name = 'Park'; // μ—λŸ¬

constλŠ” λ³€μˆ˜ μž¬ν• λ‹Ήμ΄ λΆˆκ°€λŠ₯ν•˜μ§€λ§Œ, object의 λ‚΄λΆ€ 속성은 λ³€κ²½ν•  수 μžˆλ‹€. νƒ€μž…μŠ€ν¬λ¦½νŠΈμ—μ„œλŠ” 이것에 μ—λŸ¬λ₯Ό λ„μšΈ 수 μžˆλ‹€.
*** μ€‘μš”ν•œ  사싀 : JS둜 컴파일 될 λ•Œ μ•„μ˜ˆ 변경을 λ§‰λŠ” 것은 μ•„λ‹ˆκ³ , κ·Έλƒ₯ μ—λŸ¬λ§Œ λ„μš°λŠ” 것. νƒ€μž…μŠ€ν¬λ¦½νŠΈ μ—λŸ¬λŠ” 에디터와 ν„°λ―Έλ„μ—μ„œλ§Œ μ‘΄μž¬ν•œλ‹€.


type alias extend

type Name = string;
type Age = number;
type Person = Name | Age;

μœ„μ²˜λŸΌ νƒ€μž… λ‘κ°œλ₯Ό 합쳐 νƒ€μž… ν•˜λ‚˜λ‘œ λ§Œλ“œλŠ” 것도 λ¬Όλ‘  κ°€λŠ₯ν•˜λ‹€.

&μ—°μ‚°μžλ‘œ object νƒ€μž… extend (ν•©μΉ˜κΈ°)

type PositionX = { x : number };
type PositionY = { y : number };

type NewType = PositionX & PositionY;

let position :NewType = { x : 10, y : 20 };

** μ£Όμ˜μ‚¬ν•­ : 같은 μ΄λ¦„μ˜ typeλ³€μˆ˜λŠ” μž¬μ •μ˜κ°€ λΆˆκ°€λŠ₯ν•˜λ‹€.


type λŒ€μ‹  interface

type ν‚€μ›Œλ“œ λŒ€μ‹  interface ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•΄λ„ λ¬΄λ°©ν•˜λ‹€.
보톡은 ꡬ쑰λ₯Ό ν™•μž₯ν•΄μ•Ό ν•  λ•Œ interfaceλ₯Ό, μœ λ‹ˆμ–Έμ΄λ‚˜ ꡐ차 νƒ€μž…μ„ μ‚¬μš©ν•˜κ±°λ‚˜ νƒ€μž…μ„ μ‘°μž‘ν•΄μ•Ό ν•  λ•Œ type을 μ‚¬μš©ν•˜λŠ” 것이 일반적인 κ΄€λ‘€λ‹€.

interface PositionX {
  x: number;
}
interface PositionY {
  y: number;
}

type NewType = PositionX & PositionY;

let position: NewType = { x: 10, y: 20 };

** μ£Όμ˜μ‚¬ν•­ : 같은 μ΄λ¦„μ˜ typeλ³€μˆ˜λŠ” μž¬μ •μ˜κ°€ λΆˆκ°€λŠ₯ν•˜μ§€λ§Œ interfaceλŠ” μ„ μ–Έλœ 후에도 ν™•μž₯이 κ°€λŠ₯ν•˜λ‹€. λ‹€λ₯Έ κ³³μ—μ„œ 같은 μ΄λ¦„μ˜ interfaceλ₯Ό μ„ μ–Έν•˜λ©΄ 이전 μ„ μ–Έκ³Ό λ³‘ν•©λœλ‹€.

& λŒ€μ‹  implements둜 ν•©μΉ˜κΈ°

ν΄λž˜μŠ€λ‚˜ 객체가 interfaceλ₯Ό κ΅¬ν˜„ν•  λ•ŒλŠ” implements ν‚€μ›Œλ“œλ₯Ό μ‚¬μš©ν•œλ‹€.
TypeScriptμ—μ„œ implements ν‚€μ›Œλ“œλŠ” 주둜 ν΄λž˜μŠ€κ°€ νŠΉμ • μΈν„°νŽ˜μ΄μŠ€λ₯Ό κ΅¬ν˜„ν•  λ•Œ μ‚¬μš©λœλ‹€. implementsλŠ” ν΄λž˜μŠ€μ™€ μΈν„°νŽ˜μ΄μŠ€ κ°„μ˜ 관계λ₯Ό μ„ μ–Έν•˜λŠ”λ° μ‚¬μš©λ˜λŠ” ν‚€μ›Œλ“œμ΄λ―€λ‘œ, 일반적으둜 var, let, const λ“±μ˜ λ³€μˆ˜ μ„ μ–Έκ³Ό ν•¨κ»˜ μ‚¬μš©λ˜μ§€ μ•ŠλŠ”λ‹€.

interface Car {
  start(): void;
  stop(): void;
}

class ElectricCar implements Car {
  start() {
    console.log("Electric car is starting...");
  }

  stop() {
    console.log("Electric car is stopping...");
  }

  chargeBattery() {
    console.log("Charging the battery...");
  }
}

const myElectricCar = new ElectricCar();

myElectricCar.start();
myElectricCar.stop();
myElectricCar.chargeBattery();​

좜처 : μ½”λ”©μ• ν”Œ https://codingapple.com/ / TypeScript Documentation https://www.typescriptlang.org/docs/handbook/2/objects.html

μ €μž‘μžν‘œμ‹œ λΉ„μ˜λ¦¬ 동일쑰건 (μƒˆμ°½μ—΄λ¦Ό)

'πŸ“˜ TypeScript > κ°œλ…' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

[μ½”λ”©μ• ν”Œ] νƒ€μž…μŠ€ν¬λ¦½νŠΈ HTML μ‘°μž‘μ‹œ 주의점 (1)  (0) 2023.12.17
[μ½”λ”©μ• ν”Œ] ν•¨μˆ˜μ™€ object λ©”μ„œλ“œμ— type alias μ§€μ •ν•˜κΈ°  (0) 2023.12.13
[μ½”λ”©μ• ν”Œ] νƒ€μž…μ„ νŠΉμ • κ°’μœΌλ‘œ μ§€μ •ν•˜μž : Literal Types (+ as const)  (0) 2023.12.13
νƒ€μž…μŠ€ν¬λ¦½νŠΈ νƒ€μž… μœ μΆ”(Type Inference)  (0) 2023.12.07
[μ½”λ”©μ• ν”Œ] νƒ€μž…μŠ€ν¬λ¦½νŠΈ νƒ€μž… μ§€μ • 방법  (0) 2023.12.07
    'πŸ“˜ TypeScript/κ°œλ…' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€
    • [μ½”λ”©μ• ν”Œ] ν•¨μˆ˜μ™€ object λ©”μ„œλ“œμ— type alias μ§€μ •ν•˜κΈ°
    • [μ½”λ”©μ• ν”Œ] νƒ€μž…μ„ νŠΉμ • κ°’μœΌλ‘œ μ§€μ •ν•˜μž : Literal Types (+ as const)
    • νƒ€μž…μŠ€ν¬λ¦½νŠΈ νƒ€μž… μœ μΆ”(Type Inference)
    • [μ½”λ”©μ• ν”Œ] νƒ€μž…μŠ€ν¬λ¦½νŠΈ νƒ€μž… μ§€μ • 방법
    Zoeeey
    Zoeeey
    길게 μƒκ°ν•˜κ³  짧게 그리기

    ν‹°μŠ€ν† λ¦¬νˆ΄λ°”