코드존 코드존

Step 1. Settings Install Typescript FOLDER > npm install typescript --save-dev tsconfig.json 파일 생성 FOLDER > npx tsc --init 폴더 생성 (src, dist) FOLDER > mkdir src dist tsconfig.json 설정 변경 { "compilerOptions": { ... "outDir": "./dist", ... }, "include": ["src"] } Watch 모드 설정 FOLDER > npx tsc --watch Step 2. DOM tsconfig.json의 lib에서 "DOM"을 적용하거나, 주석 처리 Default인 경우 DOM 사용 가능 Javascript와 같은 방식으로 DOM 사용..

tsconfig.json 생성 Typscript 설정 변경 파일 생성 tsc --init 감시 모드 변경 사항 저장 후, 컴파일 실행(tsc 파일명.ts) 없이도 자동 컴파일 tsc -watch // 모든 .ts 파일 적용 tsc -w 파일명.ts // 특정 .ts 파일 적용 다중 파일 컴파일 tsconfig.json이 있는 폴더에서 tsc 선언시 모든 ts 파일 컴파일 tsc 특정 파일 컴파일 files 옵션 - 컴파일이 필요한 파일 작성 소규모의 프로젝트에 적합 // tsconfig.json "files": ["compile01.ts", "compile02.ts"] // Terminal tsc 특정 폴더 컴파일 Include / Exclude 옵션 - 폴더 전체를 Include 후 불필요한 파일을 E..

Interfaces 오직 객체 생성에만 사용 생성한 인터페이스가 객체가 되기위해 필요한 속성 모음 Custom Type 과 거의 동일하게 동작 interface Keyword { ... } interface Person { readonly id: number first: string last: string nickname?: string } let tomas: Person = { id: 123455, first: 'seo', last: 'tomas' } tomas.id = 423423 // ERROR - id is readonly Interface Method 속성 뒤에 괄호를 사용하여 메소드임을 명시 메소드의 반환 타입 지정 가능 interface Person { readonly id: number f..

Tuples 튜플. 고정된 길이와 타입의 위치를 가지는 배열 let rgbColors: [number, number, number] = [255, 255, 255] rgbColors = [123, 5] // ERROR - rgbColors length is 3 rgbColors = [255, 0, '255'] // ERROR - third type of rgbColors is number Custom Type에서도 튜플 배열 사용 type HttpResponse = [number, string] let goodRes: HttpResponse = [200, 'SUCCESS'] goodRes = ['FAIL', 404] // ERROR - tuple type is [number, string] let res..

Union Types 단일 타입이 아닌 다중 타입을 가질 수 있음 | 사용하여 여러 타입 명시 let ages: number | string ages = 15 // OK ages = '15' // OK Custom Type Union type Point = { x: number, y: number } type Loc = { lat: number, long: number } let coordinates: Point | Loc coordinates = { x: 4, y: 8 } // OK coordinates = { lat: 55.2342, long: 234942.2 } // OK Narrowing the Type (타입 좁히기) Union Type의 값을 특정 타입으로 확인하는 단계 추가 typeof 구문..

Array Types 배열 대괄호 앞에 배열 타입 명시 배열 타입 추론 가능 -> 변수 초기화 시, 해당 배열 안의 데이터들을 추론하여 배열 타입 지정 let names: string[] let ages: number[] let items = [true, false] items.push('hi') // ERROR - items is boolean array items.push(false) // OK items.push(123) // ERRIR 새로운 배열 선언 법 - Array // let newArray: number[] let newArray: Array Custom type 배열 Custom type으로 선언한 객체만 가지는 배열 type Point = { x: number, y: number } ..

How to use Object Type 함수의 파라미터로 객체 타입 입력 /** const printName = (first: string, last: string) => { return `Her name is ${last} ${first}` } **/ const printName = (name: { first: string, last: string }) => { return `Her name is ${name.last} ${name.first}` } printName({ first: 'SEO', last: 'HYEJIN' }) 객체 타입 변수 선언 객체의 key 이름과 타입을 맞춰줘야 함 let coordinate: { x: number, y: number } = { x: 34, y: 2 } 함수에서..

Function Parameter 파라미터 타입을 지정하지 않으면 암묵적 Any 타입 파라미터로 지정 // 암묵적 Any 타입 파라미터 function square (num) { return num * num } square(5) // 가능 square('strings') // 가능 // 명시적 타입 파라미터 function greeting (name: string) { let temp = name * name // ERROR return `Good morning, ${name}` } greeting(5) // 불가능 greeting('서앶진') // 가능 다수의 타입 파라미터를 가지는 함수는 호출 시에 파라미터 갯수와 타입을 잘 맞춰야 함 // 다양한 파라미터 function doSomethings (..