๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๊ฐœ๋ฐœ/HTML, CSS, JS

Type annotation

by Jaeguk 2023. 2. 4.

javascript๋Š” Dynamic type๋“ค์„ ์‚ฌ์šฉํ•˜๋Š” ๋ฐ˜๋ฉด typescirpt๋Š” Static type๋“ค์„ ์‚ฌ์šฉํ•œ๋‹ค.

Static type์€ ๊ฐœ๋ฐœํ•˜๋Š” ์ค‘๊ฐ„์— type์„ ์ฒดํฌํ•œ๋‹ค.
Dynamic type์€ ๊ฐœ๋ฐœํ•˜๋Š” ๋„์ค‘์—๋Š” ์•Œ ์ˆ˜ ์—†๊ณ  runtime์— ๋Œ์ž…ํ•ด์•ผ์ง€๋งŒ ์ž˜๋ชป๋œ ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

1
2
3
let a: number
// ๋ณ€์ˆ˜๊ฐ€ ์–ด๋–ค ํƒ€์ž…์ธ์ง€๋ฅผ ์ง€์ •ํ•ด์ฃผ๋Š” ๊ฒƒ์„ type annotation์ด๋ผ๊ณ  ํ•œ๋‹ค.
// typescript์—์„œ๋Š” javascript์™€ ๋‹ค๋ฅด๊ฒŒ ํƒ€์ž…์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.
cs

typecript์—์„œ๋Š” let a = 'Hello'์™€ ๊ฐ™์ด ๋ณ€์ˆ˜ ์ƒ์„ฑ์‹œ ์ดˆ๊ธฐ๊ฐ’์„ ํ• ๋‹นํ•ด์ฃผ๋ฉด ๋ณ€์ˆ˜์˜ type์ด ์ •ํ•ด์ง€๊ฒŒ ๋˜๊ณ  ํ•ด๋‹น type์ด ์•„๋‹Œ ๋‹ค๋ฅธ type์˜ ๊ฐ’์„ ์žฌํ• ๋‹นํ•˜๋ ค๊ณ  ํ•˜๋ฉด ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

let a; ์™€ ๊ฐ™์ด ์ดˆ๊ธฐ๊ฐ’์„ ํ• ๋‹นํ•ด์ฃผ์ง€ ์•Š์œผ๋ฉด ์ž๋™์ ์œผ๋กœ type์ด Any๋กœ ์„ค์ •๋˜๋ฉฐ ์–ด๋– ํ•œ type์˜ ๊ฐ’๋„ ์žฌํ• ๋‹นํ•  ์ˆ˜ ์žˆ๋‹ค.

1
2
3
4
5
6
7
8
9
10
11
12
//javascript
function add(n1, n2) {
    if ( typeof n1 !== 'number' || typeof n2 !== 'number' ) { //๋Ÿฐํƒ€์ž„์— ์ฒดํฌ
        throw new Error( 'Incorrect input! ' );
    }
    return n1 + n2;
}
 
//typescript
function  add(n1: number, n2: number) { //๊ฐœ๋ฐœ์ค‘์— ์ฒดํฌ
    return n1 + n2;
}
cs

 

TypeScript์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋ณธ ๋ฐ์ดํ„ฐ ํƒ€์ž…

1. JavaScript ๊ธฐ๋ณธ ์ž๋ฃŒํ˜•์„ ํฌํ•จ
โ–ถ Boolean
โ–ถ Number
โ–ถ String
โ–ถ Null
โ–ถ Undefined
โ–ถ Symbol
โ–ถ Array: objectํ˜•

2. ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ๋„์šธ ๋ช‡ ๊ฐ€์ง€ ํƒ€์ž…์ด ์ถ”๊ฐ€๋กœ ์ œ๊ณต
โ–ถ Any, Void, Never, Unknown
โ–ถ Enum
โ–ถ Tuple: objectํ˜•

728x90

'๊ฐœ๋ฐœ > HTML, CSS, JS' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

๋ฒˆ๋“ค๋Ÿฌ ๊ฐœ์š”  (0) 2023.02.13
JavaScript Essentials  (0) 2023.02.05
BEM  (0) 2023.01.13
๋ฉ”์†Œ๋“œ ์ฒด์ด๋‹(Method Chaining)  (0) 2023.01.12
DOM API  (0) 2023.01.12