ìŒ | ì | í | ì | 목 | êž | í |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- nextjs
- CSS
- VanilaJS
- ìœí
- Redux
- react
- JavaScript
- dart
- Python
- ContextAPI
- HTML
- router
- Frontend
- 죌ìì°œíŽì
- ë°±ì€
- TypeScript
- ì€í¬ë¡€êµ¬í
- react native
- íìŽì¬
- Today
- Total
JiSoo's Devlog
[ì°ìí íì ì€í¬ëŠœíž] 2ì¥ ë³žë¬ž
ð íì ìŽë
ìë£íìŒë¡ìì íì
ë³ìë ê°ì ì ì¥í ì ìë ê³µê°ìŽì ê°ì ê°ëЬí€ë ìì§ì ìž ìŽëŠìŒë¡ ê°ë°ìë ë³ì ì ìž í í¹ì ê°ì í ë¹íë€.
var name = 'ji';
var year = 2025;
컎íší° ë©ëªšëЬ ê³µê°ì íì ì ìŽêž°ì í¹ì ë©ëªšëЬì ê°ì íšìšì ìŒë¡ ì ì¥íêž° ìíŽìë íŽë¹ ë©ëªšëЬ ê³µê°ì ì°šì§í ê°ì í¬êž°ë¥Œ ìììŒ íë€.
ìë°ì€í¬ëŠœížì 7ê°ì§ ë°ìŽí° íì (ìë£í)
- undefined
- null
- Boolean
- String
- Symbol
- Numeric
- Object
ì§í©ìŒë¡ìì íì
íì ì ê°ìŽ ê°ì§ ì ìë ì íší ë²ìì ì§í©ì ë§íë€.
íì ìì€í ì ìœëìì ì¬ì©ëë ì íší ê°ì ë²ì륌 ì ííŽ ë°íììì ë°ìí ì ìë ì íšíì§ ìì ê°ì ëí ìë¬ë¥Œ ë°©ì§íŽ ì€ë€.
const num: number = 12;
const str: string = "ab";
function func(n: number) {
//...
}
func(num);
funct(str); // Argument of type 'string' is not assignable to parameter of type 'number'
â ì ìœëììë func() íšìì ìžìë¡ number íì ê°ë§ í ë¹í ì ìê² ì ííë€.
íšìì ë§€ê°ë³ì íì ì ëª ìí멎 ì¬ë°ë¥Žì§ ìì íì ì ê°ìŒë¡ íšì륌 ížì¶íì ë íì ì€í¬ëŠœíž ì»ŽíìŒë¬ë ìë¬ë¥Œ ë°ììíšë€.
ì ì íì 곌 ëì íì
ìë°ì€í¬ëŠœížìë íì ìŽ ì¡Žì¬íì§ë§ ê°ë°ìê° ì»ŽíìŒ ìŽì ì ì§ì ì ìíŽ ì€ íìê° ììì ë¿
íì ì ê²°ì íë ìì ì ë°ëŒ íì ì ì ì íì 곌 ëì íì ìŒë¡ ë¶ë¥í ì ìë€.
ì ì íì ìì€í â ë³ì íì ìŽ ì»ŽíìŒíìì ê²°ì , 컎íìŒíìì íì ìë¬ ë°ê²¬ ê°ë¥íŽ íë¡ê·žëš ìì ì± ë³Žì¥
ex) C, ìë°, íì ì€í¬ëŠœíž
ëì íì ìì€í â ë³ì íì ìŽ ë°íìì ê²°ì , ì§ì íì ì ìíŽì€ íì ììŽ íë¡ê·žëš ì€íí ë íì ìë¬ ë°ê²¬
ex) íìŽì¬, ìë°ì€í¬ëŠœíž
ðð» 컎íìŒíì & ë°íì
컎íìŒíìì êž°ê³ê° ìì€ìœë륌 ìŽíŽí ì ìê² êž°ê³ìŽë¡ ë³íëë ìì
ë°íìì ë³íë íìŒìŽ ë©ëªšëЬì ì ì¬ëìŽ ì€íëë ìì
ê°íì 곌 ìœíì
컎íìŒë¬ë ìì§ ë±ì ìíŽ ë°íìì íì ìŽ ìëìŒë¡ ë³ê²œëë ê²ì ì묵ì íì ë³íìŽëŒê³ íë€.
ì묵ì íì ë³í ì¬ë¶ì ë°ëŒ íì ìì€í ì ê°íì , ìœíì ìŒë¡ ë¶ë¥
ê°íì í¹ì§ì ê°ì§ ìžìŽìì ìë¡ ë€ë¥ž íì ì ê°ëŒëЬ ì°ì°ì ìëí멎 ìë¬ ë°ì
ìœíì í¹ì§ì ê°ì§ ìžìŽìì ìë¡ ë€ë¥ž íì ì ê°ëŒëЬ ì°ì°í ëë í¹ì ê°ì íì ì ë³ííŽ ì°ì° ìí í ê° ëì¶
ê°íì ìžìŽ â íìŽì¬, 룚ë¹, íì ì€í¬ëŠœíž
ìœíì ìžìŽ â C++, ìë°, ìë°ì€í¬ëŠœíž
íì ê²ì¬êž°ê° íë¡ê·žëšì íì ì í ë¹íë ë° ì¬ì©íë ê·ì¹ ì§í©ì íì ìì€í ìŽëŒê³ íë€.
1. ìŽë€ íì ì ì¬ì©íëì§ ì»ŽíìŒë¬ì ëª ìì ìŒë¡ ìë €ì€ìŒ íë íì ìì€í
2. ìëìŒë¡ íì ì¶ë¡ íë íì ìì€í
íì ì€í¬ëŠœížë ë íì ìì€í ì ìí¥ì 몚ë ë°ìêž° ë묞ì ê°ë°ìê° ìíë ë°©ìì ì íí ì ìë€.
컎íìŒ ë°©ì
컎íìŒì ì¬ëìŽ ìŽíŽí ì ìë ë°©ììŒë¡ ìì±í ìœë륌 컎íší°ê° ìŽíŽí ì ìë êž°ê³ìŽë¡ ë°ê¿ì£Œë 곌ì ìŒë¡ ìë¡ ë€ë¥ž ìì€ ê°ì ìœë ë³íì ì믞íë€.
íì ì€í¬ëŠœížë ìë°ì€í¬ëŠœížì 컎íìŒíìì ë°íì ìë¬ë¥Œ ì¬ì ì ì¡ìëŽêž° ìí ê²!
𪢠íì ì€í¬ëŠœížì íì ìì€í
íì ì ëí ìŽì ë°©ì
ë³ìë ìì í¹ì íšìì ìžìì ë°í ê°ì íì ì ëª ìì ìŒë¡ ì ìžíŽ ìŽë€ íì ê°ìŽ ì ì¥ëëì§ ì»ŽíìŒë¬ì ì§ì ìë €ì£Œë 묞ë²
íì ì€í¬ëŠœížììë ë³ì ìŽëŠ ë€ì : type 구묞ì ë¶ì¬ ë°ìŽí° íì ì ëª ìíŽ ì€ë€.
íì ì€í¬ëŠœížë Ʞ졎 ìë°ì€í¬ëŠœíž ìœëì ì ì§ì ìŒë¡ íì ì ì ì©í ì ìë€.
let isDone: boolean = true;
let num: number = 7;
let color: string = 'green';
let list: number[] = [1, 3, 5];
let a: [string, number]; // tuple
구조ì íìŽí
íì ì ì¬ì©íë ìžìŽìì ê°ìŽë ê°ì²Žë íëì 구첎ì ìž íì ì ê°ì§ëë° íì ì ìŽëŠìŒë¡ 구ë¶ëë©° 컎íìŒíì íìë ëšììë€.
íì ì€í¬ëŠœížë êµ¬ì¡°ë¡ íì ì 구ë¶íëë° ìŽê²ì 구조ì íìŽíìŽëŒê³ íë€.
구조ì ìëžíìŽí
íì ì€í¬ëŠœížì íì ì ê°ì ì§í©ìŒë¡ ìê°í ì ìë€. ë°ëŒì í¹ì ê°ìŽ string ëë number íì ì ëìì ê°ì§ ì ìë€.
type stringOrNum = string | number;
구조ì ìëžíìŽíìŽë ê°ì²Žê° ì§ë ìì±ì ë°íìŒë¡ íì ì 구ë¶íë ê²
ìŽëŠìŽ ë€ë¥ž ê°ì²ŽëŒë ìì±ìŽ ëìŒí멎 íì ì€í¬ëŠœížë ìë¡ ížíìŽ ê°ë¥í ëìŒ íì ìŒë¡ ì¬êžŽë€.
interface Pet {
name: string;
}
interface Cat {
name: string;
age: number;
}
let pet: Pet;
let cat: Cat = { name: "Coo", age: 3 };
// OK
pet = cat;
Catì Pet곌 ë€ë¥ž íì ìŒë¡ ì ìžëìì§ë§ PetìŽ ê°ì§ name ìì±ì ê°ì§ê³ ììŽì catì petì í ë¹í ì ìë€.
ìë¡ ë€ë¥ž ë íì ê°ì ížíì±ì ì€ë¡ì§ íì ëŽë¶ì 구조ì ìíŽ ê²°ì ëë€. íì Aê° íì Bì ìëžíì ìŽëŒë©Ž A íì ì ìžì€íŽì€ë B íì ìŽ íìí ê³³ì ìžì ë ì§ ìì¹í ì ìë€.
ìŠ, íì ìŽ ê³ìžµ 구조ë¡ë¶í° ìì ë¡ë€.
ìë°ì€í¬ëŠœížë¥Œ ë®ì íì ì€í¬ëŠœíž
구조ì ìëžíìŽíì ëª ëª©ì íìŽí곌 ëì¡°ì ìž íìŽí ë°©ììžë° ëª ëª©ì íìŽíì íì ì êµ¬ì¡°ê° ìë íì ìŽëŠë§ìŒë¡ 구ë³íë ê²ìŽë€.
ëª ëª©ì íìŽíìì êµ¬ì¡°ê° ê°ëëŒë ìŽëŠìŽ ë€ë¥Žë©Ž ë€ë¥ž íì ìŒë¡ ì·šêžíë€.
ëª ëª©ì íìŽíì ê°ì²Žì ìì±ì ë€ë¥ž ê°ì²Žì ìì±ê³Œ ížíëì§ ìëë¡ íŽ ìì ì±ì ì¶êµ¬íë€.
íì ì€í¬ëŠœížê° 구조ì íìŽíì ì±íí ìŽì ë ìë°ì€í¬ëŠœížë¥Œ 몚ëžë§í ìžìŽìŽêž° ë묞ìŽë€.
ìë°ì€í¬ëŠœížë ë íìŽíì êž°ë°ìŒë¡ íëë° ìŽë€ íšìì ë§€ê°ë³ì«ê°ìŽ ì¬ë°ë¥Žê² 죌ìŽì§ë©Ž ê·ž ê°ìŽ ìŽë»ê² ë§ë€ìŽì¡ëì§ ì 겜 ì°ì§ ìê³ ì¬ì©íë€ë ê°ë ìŽë€.
ë íìŽí곌 구조ì íìŽí 몚ë ê°ì²Ž ë³ì, ë©ìë ê°ì íë륌 êž°ë°ìŒë¡ íì ì ê²ì¬íë€ë ì ìì ëìŒíì§ë§ íì ì ê²ì¬íë ìì ìŽ ë€ë¥Žë€. 구조ì íìŽíì 컎íìŒíì, ë íìŽíì ë°íìì íì ì ê²ì¬íë€.
ë íìŽíì ì£Œë¡ ëì íìŽí, 구조ì íìŽíì ì ì íìŽíìì ì¬ì©ëë€.
íì ì€í¬ëŠœížì ì ì§ì íì íìž
ì ì§ì íì ê²ì¬ë 컎íìŒ íìì íì ì ê²ì¬í멎ì íìì ë°ëŒ íì ì ìž ìëµì íì©íë ë°©ì
íì ì ì§ì í ë³ìì ííìì ì ì ìŒë¡ íì ê²ì¬, íì ì ìžìŽ ìëµë멎 ëì ìŒë¡ íì ê²ì¬, ììì íì ë³íìŽ ìŒìŽëë€.
function add(x, y) {
return x + y;
}
// ì ìœëë ìëì²ëŒ ììì íì
ë³íìŽ ìŒìŽëë€
function add(x: any, y: any): any;
add íšìì ë§€ê°ë³ìì íì ì ì ìžíì§ ììì§ë§ 컎íìŒë¬ë ì못ë ê²ìŽëŒê³ ì¬êž°ì§ ìê³ ëªšë any íì ìŒë¡ ì¶ë¡ íë€.
íì ì€í¬ëŠœížë íìì ë°ëŒ íì ì ìëµí ì ìê³ ì ì§ì ìŒë¡ ì¶ê°í ì ìë€.
any íì
any íì ì íì ì€í¬ëŠœíž ëŽ ëªšë íì ì ì¢ ë¥ë¥Œ í¬íšíë ê°ì¥ ìì íì ìŒë¡ ìŽë€ íì ê°ìŽë í ë¹í ì ìë€.
ëš, íì ì€í¬ëŠœíž ì»ŽíìŒ ìµì ìž noImplicitAny ê°ìŽ trueìŒ ëë ìë¬ê° ë°ìíë€. noImplicitAnyë íì ì ëí ìŽì ìŽ ìì ë ë³ìê° any íì ìŒë¡ ì¶ë¡ ëë ê²ì íëœíì§ ìëë€. íì ì€í¬ëŠœížë¡ ìì±í ëë ì íí íìŽíì ìíŽ tsconfigì noImplicitAny ìµì ì trueë¡ ì€ì íë ê² ì¢ë€.
ìë°ì€í¬ëŠœíž ìíŒì ìŒë¡ìì íì ì€í¬ëŠœíž
íì ì€í¬ëŠœížë Ʞ졎 ìë°ì€í¬ëŠœíž ìœëì ì ì íìŽíì ì¶ê°í ê²ìŒë¡ ìë°ì€í¬ëŠœížì ìì ì§í©
몚ë ìë°ì€í¬ëŠœíž ìœëë íì ì€í¬ëŠœíž ìœëë¡ ë³Œ ì ìì§ë§ 몚ë íì ì€í¬ëŠœíž ìœëê° ìë°ì€í¬ëŠœíž ìœëë ìëë€!!
function greet(name: string) {
console.log("hello", name);
}
ì ìœëë íì ì€í¬ëŠœížììë ì íšíì§ë§ ìë°ì€í¬ëŠœíž ë°íììì ì€ë¥ê° ë°ìíë€.
: stringì íì 구묞ìžë° íì 구묞ì ì¬ì©íë ìê°ë¶í° ìë°ì€í¬ëŠœížë íì ì€í¬ëŠœíž ìììŒë¡ ë€ìŽê°ê² ëë€.
let developter = "Jin";
console.log(developer.toUppercase());
ìŽ ìœë륌 íì ì€í¬ëŠœíž ì»ŽíìŒë¬ë¡ ì€íí멎 ì€ë¥ê° ë°ìíë€.
// Property 'toUpperCase' does not exist on type 'string'.
// Did you mean 'toUpperCase'?
developer ë³ìê° ë¬žììŽìŽëŒë ê²ì ìë €ì£Œì§ ììë ìŽê¹ê°ìŒë¡ íì ì ì¶ë¡ íŽ toUppercase ëì toUpperCase ë©ìëë¡ ë첎í ê²ì ì ìíë€.
ê°ì ìœë륌 ìë°ì€í¬ëŠœíž ë°íììì ì€íí멎
// developter.toUppercase is not a function
ìŽë° ìë¬ë¥Œ ëì žì€ ë¿,,
ê° vs íì
ê°ì íë¡ê·žëšìŽ ì²ëЬíêž° ìíŽ ë©ëªšëЬì ì ì¥íë 몚ë ë°ìŽí°ë¡ íë¡ê·žëšìì ë€ë£° ì ìë ìŽë€ ííìŽë©° ë€ìí ííì ë°ìŽí°ë¥Œ í¬íšíë€.
íë¡ê·žëë° êŽì ìì 묞ììŽ, ë³ì, ì«ì ë±ìŽ ê°ì íŽë¹íë€.
11; // ì«ì ê°
"hello"; // 묞ììŽ ê°
let foo = "bar"; // ë³ì«ê°
íì ì€í¬ëŠœížìì ë³ì, ë§€ê°ë³ì, ê°ì²Ž ìì± ë±ì : type ííë¡ íì ì ëª ìíë€.
const a: string = "hi";
const b: number = 2025;
const c: boolean = true;
const d: number[] = [1, 2, 3];
type Person = {
name: string;
age: number;
};
interface Person {
name: string;
age: number;
}
ê° ê³µê°ê³Œ íì ê³µê°ì ìŽëŠì ìë¡ ì¶©ëíì§ ìêž° ë묞ì íì 곌 ë³ì륌 ê°ì ìŽëŠìŒë¡ ì ìí ì ìë€.
íì ì€í¬ëŠœíž ë¬žë²ìž typeìŒë¡ ì ìžë ëŽì©ì ìë°ì€í¬ëŠœíž ë°íììì ì ê±°ëêž° ë묞ì ìë¡ ì¶©ë X
íì ì€í¬ëŠœížììë ê°ê³Œ íì ìŽ íšê» ì¬ì©ëë€. ê°ê³Œ íì ì íì ì€í¬ëŠœížìì ë³ëì ë€ìì€íìŽì€ì 졎ì¬íë€.
ê°ê³Œ íì ì 구ë¶ìŽ ë§¥ëœì ë°ëŒ ë¬ëŒì ž íŒëí ëë ìëë° ìŽë¥Œ íŽê²°íêž° ìíŽìë ê°ê³Œ íì ì 구ë¶íŽ ìì±íŽìŒ íë€.
function email({
person,
subject,
body,
}: {
person: Person;
subject: string;
body: string;
}) {
// ...
}
íŽëì€ë ê°ì²Ž ìžì€íŽì€ë¥Œ ëì± ìœê² ìì±íêž° ìí ë¬žë² êž°ë¥ìŒë¡ ì€ì ëìì íšìì ê°ë€.
class Rectangle {
contructor(height, width) {
this.height = height;
this.width = width;
}
}
const rec1 = new Rectangle(3, 4);
íŽëì€ë íì ìŒë¡ë ì¬ì©ëëë° íì ì€í¬ëŠœíž ìœëìì íŽëì€ë ê°ê³Œ íì ê³µê° ëªšëì í¬íšë ì ìë€ë ë§ìŽë€.
class Developer {
name: string;
domain: string;
constructor(name: string, domain: string) {
this.name = name;
this.domain = domain;
}
}
const me: Developer = new Developer("Jii", "frontend");
me ë€ì ëì€ë Developerë íì ì íŽë¹íì§ë§ new í€ìë ë€ Developerë íŽëì€ì ìì±ì íšììž ê°ìŒë¡ ëìíë€.
íŽëì€ë íì ì ëí ìŽì ìŒë¡ ì¬ì©í ì ìì§ë§ ë°íììì ê°ì²Žë¡ ë³íëìŽ ìë°ì€í¬ëŠœíž ê°ìŒë¡ ì¬ì©ëë í¹ì§ì ê°ì§ë€.
enumì ë°íìì ì€ì ê°ì²Žë¡ 졎ì¬íë©° íšìë¡ ííí ì ìë€.
enum Direction {
Up, // 0
Down, // 1
Left, // 2
Right, //3
}
enumë íŽëì€ì²ëŒ íì ì ì ííë ìí ì íì§ë§ ìë°ì€í¬ëŠœíž ë°íììì ì€ì ê°ìŒë¡ë ì¬ì©ë ì ìë€.
íì ì íìžíë ë°©ë²
íì ì€í¬ëŠœížìì typeof, instanceof, íì ëšìžì ì¬ì©íŽ íì ì íìží ì ìë€.
typeofë ì°ì°íêž° ì ì íŒì°ì°ìì ë°ìŽí° íì ì ëíëŽë 묞ììŽì ë°ííë€.
typeof 20; // "number"
typeof "woo"; // "string"
typeof true; // "boolean"
typeof {}; // "object"
typeof ì°ì°ìë ê°ìì ì°ìŒ ëì íì ìì ì°ìŒ ëì ìí ìŽ ë€ë¥Žë€.
ê°ìì ì¬ì©ë typeofë ìë°ì€í¬ëŠœíž ë°íìì typeof ì°ì°ìê° ëê³
íì ìì ì¬ì©ë typeofë ê°ì ìœê³ íì ì€í¬ëŠœíž íì ì ë°ííë€.
âïž ìì íì
ìë°ì€í¬ëŠœížì 7ê°ì§ ìì ê°ì íì ì€í¬ëŠœížìì ìì íì ìŒë¡ 졎ì¬íë€.
boolean
const isEmpty: boolean = true;
const isLoading: boolean = false;
// errorAction.type곌 ERROR_TEXTê° ê°ìì§ ë¹êµí ê²°êŽê°ì boolean íì
ìŒë¡ ë°í
function isTextError(errorCode: ErrorCodeType): boolean {
const errorAction = getErrorAction(errorCode);
if (errorAction) {
return errorAction.type === ERROR_TEXT;
}
return false
}
ì€ì§ trueì false ê°ë§ í ë¹í ì ìë boolean íì
undefined
let value: string;
console.log(value); // undefined
type Person = {
name: string;
job?: string;
};
ì ìëì§ ììë€ë ì믞ì íì ìŒë¡ ì€ì§ undefined ê°ë§ í ë¹ ê°ë¥
null
let value: null | undefined;
console.log(value) // undefined
value = null;
console.log(value); // null
ì€ì§ nullë§ í ë¹ ê°ë¥, ìë°ì€í¬ëŠœížìì ë³Žíµ ë¹ ê°ì í ë¹íŽìŒ í ë null ì¬ì©
number
const maxLength: number = 19;
const maxWidgth: number = 240;
const maximum: number = +Infinity;
const notANumber: number = NaN;
ìë°ì€í¬ëŠœížì ì«ìì íŽë¹íë 몚ë ìì ê° í ë¹ ê°ë¥
bigInt
const bigNumber1: bigint = BigInt(999999999999);
const bigNumber2: bigInt = 999999999999n;
string
const name: string = "Jisoo";
const phoneNum: string = "010-4444-4444";
const content: string = `ìë
, ëŽ ìŽëŠì ${name}ìŽìŒ.`;
묞ììŽ í ë¹í ì ìë íì ìŒë¡ 공백ë string íì ì íŽë¹
symbol
const MOVIE_TITLE = Symbol('title');
const MUISC_TITLE = Symbol('title');
console.log(MOVIE_TITLE === MUSIC_TITLE); // false
let SYMBOL: unique symbol = Symbol(); // A variable whose type is a 'unique symbol' type must be 'const'
Symbol íšì륌 ì¬ì©í멎 ìŽë€ ê°ê³Œë ì€ë³µëì§ ìë ì ìŒí ê°ì ìì±í ì ìë€.
âïž ê°ì²Ž íì
7ê°ì§ ìì íì ì ìíì§ ìë ê°ì 몚ë ê°ì²Ž íì ìŒë¡ ë¶ë¥ ê°ë¥íë€.
ë€ìí íí륌 ê°ì§ë ê°ì²Žë§ë€ ê°ë³ì ìŒë¡ íì ì ì§ì í ì ìë€.
object
ìë°ì€í¬ëŠœíž ê°ì²Ž ì ìì ë§ê² ìŽì ëìíë íì ì€í¬ëŠœíž íì ìì€í ì object íì
ê°êžì ì¬ì©íì§ ë§ëë¡ ê¶ì¥ëëë° ê°ì²Žì íŽë¹íë 몚ë íì ê°ì ì ëì ìŒë¡ í ë¹í ì ììŽ ì ì íìŽí ìë¯žê° í¬ê² íŽìëêž° ë묞ìŽë€.
any íì 곌 ë€ë¥Žê² ìì íì ì íŽë¹íë ê°ì object íì ì ìíì§ ìëë€.
function isObject(value: object) {
return (
Object.prototype.toString.call(value).replace(/\[|\]|\s|object/g, "") === "Object"
);
}
// ê°ì²Ž, ë°°ìŽ, ì ê· ííì, íšì, íŽëì€ ë± ëªšë object íì
곌 ížíëë€
isObject({});
isObject({ name: "JI" });
isObject([1, 2, 3]);
isObject(new RegExp("object"));
isObject(function () {
console.log("hi");
}
isObject(class Class {});
// ìì íì
ì ížíëì§ ìëë€
isObject(20); // false
isObejct("JI"); // false
{}
íì ì€í¬ëŠœížìì ê°ì²Žë¥Œ íìŽíí ëë ì€êŽížë¥Œ ìž ì ìëë° ì€êŽíž ìì ê°ì²Ž ìì± íì ì ì§ì íŽ ì£Œë ììŒë¡ ì¬ì©íë€.
const nini: { title: string; content: string } = {
title: "ì 목",
content: "ëŽì©",
};
{} íì ìŒë¡ ì§ì ë ê°ì²Žë ìì í ë¹ìŽìë ìì ê°ì²Žë ìëë€.
array
íì ì€í¬ëŠœíž ë°°ìŽ íì ì íëì íì ê°ë§ ê°ì§ ì ìë€. ë°°ìŽ íì ì ìž ë°©ìì Array í€ìëë¡ ì ìžíê±°ë ëêŽížë¥Œ ì¬ì©íŽ ì ìžíë€.
const getCartList = async (cartId: number[]) => {
const res = await CartApi.GET_CART_LIST(cartId)l
return res.getData();
};
getCartList([]); // (O)
getCartList([1001]); // (O)
getCartList([1001, 1002, 1003]); // (O)
getCartList([1001, "1002"]); // (X) '1002'ë string
íí íì ë ëêŽížë¡ ì ìžíŽìŒ íë€.
type곌 interface í€ìë
ê°ì²Žë¥Œ íìŽííêž° ìíŽ íì ì€í¬ëŠœížììë§ ì¬ì©í ì ìë í€ìë륌 ì¬ì©íë ê² ìŒë°ì ìŽë€. ê°ì²Ž íìŽíì ì죌 ì¬ì©ëë í€ìëë¡ type곌 interfaceê° ìë€.
type NoticePopupType = {
title: string;
content: string;
};
interface INoticePopup {
title: string;
content: string;
};
const noticePopup1 = NoticePopupType = { ... };
const noticePopup2 = INotivePopup = { ... };
ìŒë°ì ìŒë¡ ë³ì íì ì ëª ìì ìŒë¡ ì ìžíì§ ììë 컎íìŒë¬ê° ìëìŒë¡ íì ì ì¶ë¡ íêž°ì 몚ë ë³ìì íì ì ìŒìŒìŽ ì ìží íì ìë€.
function
function add(a, b) {
return a + b;
}
console.log(typeof add); // 'function'
íšì륌 ë³ë íšì íì ìŒë¡ ì§ì í ì ìë€.
ìë°ì€í¬ëŠœížìì typeof ì°ì°ìë¡ íìží functionìŽëŒë í€ìë ì첎륌 íì ìŒë¡ ì¬ì©íì§ë ìëë€.
íšìë ë§€ê°ë³ì 목ë¡ì ë°ì ì ìëë° íì ì€í¬ëŠœížììë ë§€ê°ë³ìë ë³ë íì ìŒë¡ ì§ì íŽìŒ íë€.
function add(a: number, b: number): number {
return a + b;
}
íšì ì첎ì íì ì ížì¶ ìê·žëì²ë¥Œ ì ìíë ë°©ìì ì¬ì©í멎 ëë€.
ížì¶ ìê·žëì²
íì ì€í¬ëŠœížìì íšì íì ì ì ìí ë ì¬ì©íë 묞ë²ìŽë€. íšì íì ì íŽë¹ íšìê° ë°ë ë§€ê°ë³ìì ë°íê°ì íì ìŒë¡ ê²°ì ëë€. ížì¶ ìê·žëì²ë ìŽë° íšìì ë§€ê°ë³ìì ë°í ê°ì íì ì ëª ìíë ìí ì íë€.
type add = (a: number, b: number) => number;
íì ì€í¬ëŠœížìì íšì ì첎ì íì ì ëª ìí ëë íìŽí íšì ë°©ììŒë¡ë§ ížì¶ ìê·žëì²ë¥Œ ì ìíë€.
'Frontend > Typescript' 칎í ê³ ëŠ¬ì ë€ë¥ž êž
[ì°ìí íì ì€í¬ëŠœíž] 4ì¥ (2) | 2025.05.23 |
---|---|
[ì°ìí íì ì€í¬ëŠœíž] 3ì¥ (0) | 2025.05.09 |
[ì°ìí íì ì€í¬ëŠœíž] 1ì¥ (11) | 2025.04.30 |
[Udemy React ì벜 ê°ìŽë] 늬ì¡íž + TypeScript (1) | 2024.06.04 |
[íì ì€í¬ëŠœížë¡ ëžë¡ì²Žìž ë§ë€êž°] Typescript Blockchain (0) | 2024.04.20 |