[Typescript] 25장(완) - 변수 선언

✅ 1. 변수 선언 키워드타입스크립트는 JS와 마찬가지로 var, let, const를 지원하나, 타입을 지정할 수 있습니다 let 재할당 가능함블록 스코프( { } 내부 범위에 한정함 )let keyword: string = 'Action';keyword = 'Horror'; // ✅ 가능console.log(keyword); // Horrorconst 재할당 불가능상수(변하지 않는 값) 지정const pi: number = 3.14;pi = 3.14159; // ❌ 에러var함수 스코프최신 Typescript/JS에서는 가급적 사용을 지양함var km: number = 1.5;km = 1.7; // ✅ 가능const fixedNum1: string = km.toFixed(2);console.log(..

• format_list_bulleted Front-End/TypeScript
• · 2025. 8. 21.
• textsms

[TypeScript] 24장 - DOM 조작

✅ 1. DOM타입스크립트에 DOM 조작은 기본 자바스크립트와 동일하나, 정적 타입 검사를 통해 더욱 안전하게 다룰 수 있습니다.const title = document.getElementById('title');if (title) { title.innerText = 'Hello TypeScript DOM!';} npx tsc typescript-dom.ts // js로 변환 // 변환된 스크립트 불러오기 ✅ 2. Document 인터페이스📌 2-1. Document.getElementByIdconst button = document.getElementById('btn') as HTMLButtonElement;button.addEventListener('click', () =>..

• format_list_bulleted Front-End/TypeScript
• · 2025. 8. 19.
• textsms

[Typescript] 23장 타입 추론

✅ 1. 최적 공통 타입 (Best Common Type)여러 개의 값이 썪여 있을 때, 타입스크립트는 모든 값을 포함할 수 있는 가장 넓은 타입을 찾습니다. let arr = [1, 2, 3]; // number[]로 추론console.log(arr);let mixed = [1, 'two'];console.log(mixed);// (string | number)[] 로 추론let mixed2 = [1, true, 'str'];// (string | number | boolean)[] 로 추론 💡특징 배열, 객체 리터럴 등에서 자주 나타남하나라도 타입이 다르면 Union(유니온) 타입으로 추론만약 타입을 결정할 수 없으면 any🍎 Any 일 경우 let weird = [1, () => {}, 'tex..

• format_list_bulleted Front-End/TypeScript
• · 2025. 8. 11.
• textsms

[Typescript] 22장 타입 호환성

✅ 1. 시작하기타입 호환성(Type Compatibility)은 타입스크립트가 한 타입을 다른 타입에 할당할 수 있는지 판단하는 규칙입니다. 구조적 타입 시스템(structural type system)을 사용합니다.interface Person { name: string;}let p: Person = { name: 'John' };let obj = { name: 'Doe', age: 30 };p = obj;console.log('p:', p);✅ 2. 두 함수 비교함수의 매개변수와 반환 타입이 호환되는지를 비교합니다.let f1 = (a: number) => 0;let f2 = (b: number, s: string) => 0;// f1 = f2; // error: f2 has mor parame..

• format_list_bulleted Front-End/TypeScript
• · 2025. 8. 11.
• textsms

[Typescript] 21장 심볼

✅ 1. Symbol의 기본 개념Symbol(심볼)은 절대 중독되지 않는 유일한 값을 생성하고 같은 설명(description)을 줘도 값은 다릅니다. 객체의 키(Key)로 많이 쓰이고 있습니다.const a = Symbol('id');const b = Symbol('id');console.log(a === b); // false;✅ 2.Symbol 생성 방법const mySymbol = Symbol(); // Creating a symbol without a descriptionconst mySymbol2 = Symbol('description'); // Creating symbolsconsole.log(mySymbol2.toString()); // Symbol(description)✅ 3. Symbo..

• format_list_bulleted Front-End/TypeScript
• · 2025. 8. 9.
• textsms

[Typescript] 20장 타입스크립트 모듈과 네임스페이스

1. 타입스크립트 모듈 타입스크립트 모듈은 코드의 구조를 분리해 재사용성을 높이고 Javascript 모듈 시스템을 기반으로 타입 지원을 추가해주는 형태입니다. 모듈은 각각 .ts 또는 .tsx 파일이 하나의 모듈로 구성되어 있고, 다른 파일의 함수, 변수, 클래스 등을 가져오거나 내보낼 수 있습니다. 먼저 타입스크립트에서 모듈은 기본적으로 파일 단위로 독립된 스코프를 가집니다// crack.tsexport class Crack { check() { console.log("Crack check"); }}// main.tsimport { Crack } from './crack';const OnCrack = new Crack();OnCrack.check(); // Ou..

• format_list_bulleted Front-End/TypeScript
• · 2025. 8. 4.
• textsms