250x250
Rainbow๐ŸŒˆCoder
My dev Note๐Ÿ“’
Rainbow๐ŸŒˆCoder
์ „์ฒด ๋ฐฉ๋ฌธ์ž
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (411)
    • ๊ณต์ง€์‚ฌํ•ญ (0)
    • Debugger (10)
      • Visual Studio Debugger (1)
      • Chrome DevTools (3)
      • Visual Studio Code Debugger (4)
      • eclipse (1)
      • intelliJ (1)
    • OOP (2)
      • OOP (2)
    • TypeScript (54)
      • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ TypeScript (54)
    • Javascript (87)
      • Javascript (45)
      • Node.js (19)
      • React (5)
      • FE ๊ฐœ๋ฐœํ™˜๊ฒฝ์„ค์ • (3)
      • React์™€ Node ๊ฐ™์ด ๋•Œ๋ ค์žก๊ธฐ (6)
      • next.js (2)
      • pixi.js (7)
    • ๋งˆํฌ์—… (23)
      • Html & Css (23)
    • C# (80)
      • C# (12)
      • ์ด๊ฒƒ์ด C#์ด๋‹ค (68)
    • C++ (30)
      • c++ (27)
      • win api (3)
    • Unity (18)
      • Unity(๊ธฐ์ดˆ) (8)
      • Unity(C#์ค‘๊ธ‰) (5)
      • ์œ ๋‹ˆํ‹ฐ ํฌํ†ค(๋„คํŠธ์›Œํฌ) (4)
      • unity c# MyCode (1)
    • Java & Spring (29)
      • Java (11)
      • ์Šคํ”„๋ง (8)
      • Java Algorithm (9)
      • Javs Data Structures (1)
    • ์ž๋ฃŒ๊ตฌ์กฐ์™€ ์•Œ๊ณ ๋ฆฌ์ฆ˜ (15)
      • ์ž๋ฃŒ๊ตฌ์กฐ (5)
      • ์•Œ๊ณ ๋ฆฌ์ฆ˜ (10)
    • ํ˜•์ƒ๊ด€๋ฆฌ (15)
      • Git (11)
      • ์†Œ์ŠคํŠธ๋ฆฌ (3)
    • ๊ทธ๋ž˜ํ”ฝ์Šค (7)
      • WebGl (7)
    • AWS (3)
      • aws (3)
    • ๋ฆฌ๋ˆ…์Šค (5)
      • ๋ฆฌ๋ˆ…์Šค (5)
    • ์ฑ… ๋ฆฌ๋ทฐ (13)
      • ํด๋ฆฐ์ฝ”๋“œ(์ฑ…๋ฆฌ๋ทฐ) (3)
      • ์œ ์ง€๋ณด์ˆ˜๊ฐ€๋Šฅํ•œ์ฝ”๋”ฉ์˜๊ธฐ์ˆ C#ํŽธ(์ฑ…๋ฆฌ๋ทฐ) (1)
      • ๋ฆฌํŒฉํ† ๋ง(์ž๋ฐ”์Šคํฌ๋ฆฝํŠธํŒ) (9)
    • Server (2)
      • ๊ฒŒ์ž„ ์„œ๋ฒ„(๋„คํŠธ์›Œํฌ, ๋ฉ€ํ‹ฐ์“ฐ๋ ˆ๋“œ,OS) (2)
    • ์„ค๊ณ„, ์•„ํ‚คํ…์ณ (4)
    • ํŒŒ์ด์ฌ (5)
    • ๋””์ž์ธํŒจํ„ด (2)
    • mocha (2)
    • Jest (1)
    • Spine (1)
    • ์ธ๊ณต์ง€๋Šฅ (1)
      • ํ˜ผ์ž๊ณต๋ถ€ํ•˜๋Š”๋จธ์‹ ๋Ÿฌ๋‹+๋”ฅ๋Ÿฌ๋‹ (1)

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

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

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

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • ์œ„์ž„
  • MySQL
  • ใ…ฃใ„ท
  • ์ปดํฌ์ง€์…˜

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

์ตœ๊ทผ ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌ

hELLO ยท Designed By ์ •์ƒ์šฐ.
Rainbow๐ŸŒˆCoder

My dev Note๐Ÿ“’

TypeScript/ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ TypeScript

[ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ] ํ˜ธ์ถœ ์‹œ๊ทธ๋‹ˆ์ฒ˜

2022. 4. 20. 12:47
728x90

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ ํ•จ์ˆ˜์˜ ์ „์ฒด ํƒ€์ž…์„ ํ‘œํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ณด์ž.

 

object๋กœ ๋ชจ๋“  ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ฌ ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ฒ˜๋Ÿผ function์€ ๋ชจ๋“  ํ•จ์ˆ˜์˜ ํƒ€์ž…์„ ๋œปํ•  ๋ฟ์ด๋ฉฐ, ๊ทธ๊ฒƒ์ด ๊ฐ€๋ฆฌํ‚ค๋Š” ํŠน์ • ํ•จ์ˆ˜์™€ ํƒ€์ž…๊ณผ ๊ด€๋ จ๋œ ์ •๋ณด๋Š” ์•„๋ฌด ๊ฒƒ๋„ ์•Œ๋ ค์ฃผ์ง€ ์•Š๋Š”๋‹ค.

 

function sum(a: number, b: number): number {
  return a + b;
}

 

๊ทธ๋ ‡๋‹ค๋ฉด ์œ„ sum์˜ ํƒ€์ž…์„ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์„ ๋ชจ์ƒ‰ํ•ด๋ณด์ž.

sum์€ ๋‘ ๊ฐœ์˜ number์„ ์ธ์ˆ˜๋กœ ๋ฐ›์•„ ํ•œ ๊ฐœ์˜ number๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋Š” ํ•จ์ˆ˜๋‹ค. ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” ์ด๋ฅผ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

(a:number, b:number)=> number

์œ„ ์ฝ”๋“œ๋Š” ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์˜ ํ•จ์ˆ˜ ํƒ€์ž… ๋ฌธ๋ฒ•์œผ๋กœ, ํ˜ธ์ถœ ์‹œ๊ทธ๋‹ˆ์ฒ˜(call signature) ๋˜๋Š” ํƒ€์ž… ์‹œ๊ทธ๋‹ˆ์ฒ˜(type signature)๋ผ ๋ถ€๋ฅธ๋‹ค. ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์™€ ๋น„์Šทํ•œ ์ด ๋ฌธ๋ฒ•์€ ์˜๋„๋œ ๊ฒƒ์ด๋‹ค. ํ•จ์ˆ˜์— ํ•จ์ˆ˜๋ฅผ ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•˜๊ฑฐ๋‚˜ ํ•จ์ˆ˜์—์„œ ๋‹ค๋ฅธ ํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฒฝ์šฐ ์ด ๋ฌธ๋ฒ•์œผ๋กœ ์ธ์ˆ˜๋‚˜ ๋ฐ˜ํ™˜ ํ•จ์ˆ˜์˜ ํƒ€์ž…์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

(์—ฌ๊ธฐ์„œ a,b๋ผ๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜๋ช…์€ ๋ฌธ์„œํ™” ์šฉ๋„์ผ ๋ฟ ํ•จ์ˆ˜์˜ ํƒ€์ž…๊ณผ ํ• ๋‹น ๋™์ž‘์—๋Š” ์•„๋ฌด ์˜ํ–ฅ๋„ ์ฃผ์ง€ ์•Š๋Š”๋‹ค)

 

 

ํ•จ์ˆ˜ ํ˜ธ์ถœ ์‹œ๊ทธ๋‹ˆ์ฒ˜๋Š” ํƒ€์ž… ์ˆ˜์ค€ ์ฝ”๋“œ, ์ฆ‰ ๊ฐ’์ด ์•„๋‹Œ ํƒ€์ž… ์ •๋ณด๋งŒ ํฌํ•จํ•œ๋‹ค.์ด๋Š” ํ•จ์ˆ˜ ํ˜ธ์ถœ ์‹œ๊ทธ๋‹ˆ์ฒ˜๋กœ ๋งค๊ฐœ๋ณ€์ˆ˜ ํƒ€์ž…, this ํƒ€์ž…, ๋ฐ˜ํ™˜ ํƒ€์ž…, ๋‚˜๋จธ์ง€ ํƒ€์ž…, ์กฐ๊ฑด๋ถ€ ํƒ€์ž…์„ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ๊ธฐ๋ณธ๊ฐ’์€ ํ‘œํ˜„ํ•  ์ˆ˜ ์—†๋‹ค. (๊ธฐ๋ณธ๊ฐ’์€ ํƒ€์ž…์ด ์•„๋‹ˆ๋ผ ๊ฐ’์ด๋ฏ€๋กœ), ํ•จ์ˆ˜ ํ˜ธ์ถœ ์‹œ๊ทธ๋‹ˆ์ฒ˜๋Š” ๋ฐ”๋””๋ฅผ ํฌํ•จํ•˜์ง€ ์•Š์•„ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๊ฐ€ ํƒ€์ž…์„ ์ถ”๋ก ํ•  ์ˆ˜ ์—†์œผ๋ฏ€๋กœ ๋ฐ˜ํ™˜ํƒ€์ž…์„ ๋ช…์‹œํ•ด์•ผ ํ•œ๋‹ค.

 

*์ฐธ๊ณ : ํƒ€์ž…์ˆ˜์ค€์ฝ”๋“œ์™€ ๊ฐ’์ˆ˜์ค€ ์ฝ”๋“œ?

- ํƒ€์ž…์ˆ˜์ค€์ฝ”๋“œ : ํƒ€์ž…๊ณผ ํƒ€์ž… ์—ฐ์‚ฐ์ž๋ฅผ ํฌํ•จํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์˜๋ฏธํ•œ

- ๊ฐ’์ˆ˜์ค€์ฝ”๋“œ : ํƒ€์ž…์ˆ˜์ค€์ฝ”๋“œ ๋ฐ–์˜ ๋ชจ๋“  ๊ฒƒ์„ ๊ฐ€๋ฆฌํ‚จ๋‹ค. 

์–ด๋–ค ์ฝ”๋“œ๊ฐ€ ์œ ํšจํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ผ๋ฉด ๊ฐ’์ˆ˜์ค€์ด๊ณ , ์œ ํšจํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋Š” ์•„๋‹ˆ์ง€๋งŒ ์œ ํšจํ•œ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ผ๋ฉด ํƒ€์ž…์ˆ˜์ค€์œผ๋กœ ์‰ฝ๊ฒŒ ๊ตฌ๋ถ„ํ•  ์ˆ˜ ์žˆ๋‹ค.

function area(radius: number): number | null {
  if (radius < 0) {
    return null;
  }
  return Math.PI * radius ** 2;
}

let r: number = 3;
let a = area(r);
if (a != null) {
  console.info("result : ", a); //result :  28.274333882308138
}

console.log(3 ** 2); //9
console.log(3 ** 3); //27

ํƒ€์ž… ๋ณ„์นญ์œผ๋กœ ํ•œ์ •ํ•  ์ˆ˜ ์žˆ๋Š” ๋…๋ฆฝ ํ˜ธ์ถœ ์‹œ๊ทธ๋‹ˆ์ฒ˜๋ฅผ ์ถ”์ถœํ•ด๋ณธ๋‹ค.

//greet(name:string) ํ•จ์ˆ˜
type Greet = (name: string) => string;

//log(message:string, userId?:string) gkatn
type Log = (message: string, userId?: string) => void;

//sumVariadicSafe(...numbers:number[]):number ํ•จ์ˆ˜
type SumVariadicSafe = (...numbers: number[]) => number;

์œ„์™€ ๊ฐ™์ด ํ•จ์ˆ˜์˜ ํ˜ธ์ถœ ์‹œ๊ทธ๋‹ˆ์ฒ˜๋Š” ๊ตฌํ˜„ ์ฝ”๋“œ์™€ ๊ฑฐ์˜ ๊ฐ™๋‹ค.

์šฐ์—ฐ์ด ์•„๋‹ˆ๋ผ ์–ธ์–ด ์„ค๊ณ„์ƒ ์˜๋„ํ•œ ๊ฒฐ์ •์œผ๋กœ, ์ด๋ ‡๊ฒŒ ํ•จ์œผ๋กœ ํ˜ธ์ถœ ์‹œ๊ทธ๋‹ˆ์ฒ˜๋ฅผ ์‰ฝ๊ฒŒ ์ถ”๋ก ํ•  ์ˆ˜ ์žˆ๋‹ค.

 

ํ˜ธ์ถœ ์‹œ๊ทธ๋‹ˆ์ฒ˜์™€ ๊ตฌํ˜„์˜ ๊ด€๊ณ„๋ฅผ ๋” ๊ตฌ์ฒด์ ์œผ๋กœ ํ™•์ธํ•˜์ž๋ฉด,

ํ˜ธ์ถœ ์‹œ๊ทธ๋‹ˆ์ฒ˜๊ฐ€ ์ฃผ์–ด์กŒ์„ ๋•Œ ์–ด๋–ป๊ฒŒ ๊ทธ ์‹œ๊ทธ๋‹ˆ์ฒ˜๋ฅผ ๋งŒ์กฑํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์„๊นŒ? ๊ฐ„๋‹จํ•˜๊ฒŒ ํ˜ธ์ถœ ์‹œ๊ทธ๋‹ˆ์ฒ˜๋ฅผ ํ•จ์ˆ˜ ํ‘œํ˜„์‹๊ณผ ํ•ฉ์น  ์ˆ˜ ์žˆ๋‹ค. ๊ธฐ์กด์œ Log ํ•จ์ˆ˜๋ฅผ ์ƒˆ๋กœ์šด ์‹œ๊ทธ๋‹ˆ์ฒ˜์— ๋งž๊ฒŒ ๋‹ค์‹œ ๊ตฌํ˜„ํ•ด๋ณด๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. 

  type Log = (message: string, userId?: string) => void;

  let log: Log = ( //1 : ํ•จ์ˆ˜ ํ‘œํ˜„์‹ log๋ฅผ ์„ ์–ธํ•˜๋ฉด์„œ Log ํƒ€์ž… ์ž„์„ ๋ช…์‹œํ–ˆ๋‹ค.
      message, //2 : ๋งค๊ฐœ๋ณ€์ˆ˜์˜ ํƒ€์ž…์„ ๋‹ค์‹œ ์ง€์ •ํ•  ํ•„์š”๋Š” ์—†๋‹ค. Log์—์„œ ์ด๋ฏธ ํƒ€์ž… ๋ช…์‹œํ–ˆ์œผ๋ฏ€๋กœ 
               //    ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋Š” Log๋ฅผ ํ†ตํ•ด ํƒ€์ž…์„ ์ถ”๋ก  
      userId = "Not signed in" //3 : ๊ธฐ๋ณธ๊ฐ’์„ ์ง€์ •ํ•œ๋‹ค. ํ˜ธ์ถœ ์‹œ๊ทธ๋‹ˆ์ฒ˜๋Š” ๊ฐ’์„ ํฌํ•จํ•  ์ˆ˜ ์—†์œผ๋ฏ€๋กœ
                               //Log์—์„œ๋Š” userId์˜ ํƒ€์ž…์€ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ๊ธฐ๋ณธ๊ฐ’์€ ์ง€์ • ๋ชปํ•จ
  ) => { //4 : Log ํƒ€์ž…์—์„œ ๋ฐ˜ํ™˜ ํƒ€์ž…์„ void๋กœ ์ด๋ฏธ ์ง€์ •ํ–ˆ์œผ๋ฏ€๋กœ ๋ฐ˜ํ™˜ ํƒ€์ž…์€ ๋‹ค์‹œ ์ง€์ •ํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค.
      let time = new Date().toISOString();
      console.log(time, message, userId);
  };

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90

'TypeScript > ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ TypeScript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ] ์บก์Аํ™”, ์ถ”์ƒํ™” ์ฐจ์ด ๋ช…ํ™•ํ•˜๊ธฐ ์žก๊ธฐ  (0) 2022.04.20
[ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ] ๋ฌธ๋งฅ์  ํƒ€์ž…ํ™”  (0) 2022.04.20
[ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ] ์ œ๋„ˆ๋ ˆ์ดํ„ฐ, ๋ฐ˜๋ณต์ž(iterator) ์ถ”๋ก ๊ณผ ๋ช…์‹œ  (0) 2022.04.20
[ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ] ์ปคํ”ผ๋จธ์‹  ํด๋ž˜์Šค๋งŒ๋“ค๊ธฐ ์‹ค์Šต  (0) 2022.04.19
[ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ] ์ œ๋„ˆ๋ ˆ์ดํ„ฐ ์ง€์›, ๋ช…์‹œ  (0) 2022.04.19
    'TypeScript/ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ TypeScript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • [ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ] ์บก์Аํ™”, ์ถ”์ƒํ™” ์ฐจ์ด ๋ช…ํ™•ํ•˜๊ธฐ ์žก๊ธฐ
    • [ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ] ๋ฌธ๋งฅ์  ํƒ€์ž…ํ™”
    • [ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ] ์ œ๋„ˆ๋ ˆ์ดํ„ฐ, ๋ฐ˜๋ณต์ž(iterator) ์ถ”๋ก ๊ณผ ๋ช…์‹œ
    • [ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ] ์ปคํ”ผ๋จธ์‹  ํด๋ž˜์Šค๋งŒ๋“ค๊ธฐ ์‹ค์Šต
    Rainbow๐ŸŒˆCoder
    Rainbow๐ŸŒˆCoder
    ๋ชฐ๋ผ๋„ ๊ฒฐ๊ตญ์€ ์•„๋Š” ๊ฐœ๋ฐœ์ž, ๊ทธ๋Ÿฐ ์‚ฌ๋žŒ์ด ๋˜๊ธฐ ์œ„ํ•œ ๋งค์ผ์˜ ํ•œ๊ฑธ์Œ

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