개발언어/TypeScript13 컴파일러(compiler) 설정 방법 TypeScript는 브라우저에서 바로 compile하지 못한다. 브라우저가 읽을 수 있는 JavaScript로 변경해줘야한다. (정확히는 ECMAscript) TypeScript는 자체에서 JavaScript로 변경할 수 있는 compiler가 내장되어있고 다양한 설정이 가능하다. 명령어 npm install -g typescript 타입스크립트를 설치하면 tsc 명령어로 컨트롤할 수 있다. tsc logging.ts -w 낱개로 컴파일 하는 법 (타입스크립트 파일을 지정하여 저장 할때마다 자동 컴파일 함. = watching모드) tsc --init tsconfig.json 생성 tsc -w tsconfig.json의 설정대로 컴파일 실행 tsconfig.json 설정방법 { "compilerOpti.. 2021. 4. 16. 유틸리티 타입 (Utility Types) Typescript에서는 generic을 사용하여 type이나 interface의 특성을 쉽게 바꿔주는 유틸리티 타입을 제공한다. 사용법만 알면 쉽게 사용할 수 있다. 공홈에는 20여가지의 리스트가 있는데 그 중에 자주 사용하는 몇 가지를 알아보자. partial(부분적인) : Partial 전체를 옵셔널(optional)로 바꿔줌 Partial로 만들어진 Coordinate2 타입은 field들이 모두 optional이기때문에 compile error가 나지않음 required(필요한, 필수인) : Required 전체를 빠지면 안되는 것으로 바꿔줌 Partial과는 반대로 모든 field들을 필수로 바꿈 readonly : Readonly 읽기전용 target과는 다르게 hanaMt는 읽기전용이기때문.. 2021. 4. 16. type과 interface 차이 타입과 인터페이스는 TypeScript의 버전이 올라가면서 함께 변화해갔다. 처음에는 타입의 기능이 약해서 인터페이스를 쓰라고 권장했지만 지금은 타입의 기능이 많이 강화되었는데 인터페이스와 사용성이 모호한 시점인듯하다. 그래서 역할을 정확히 나누는것이 좋다. Interface Class의 규격, Object 간 소통할 때 쓰는 규약 이 인터페이스를 통해 구현해야하는 클래스가 있을 때 재정의할 수 있다. (let처럼) Type 데이터의 타입 정의 구현할 목적이 아니라 데이터를 담을 목적으로 사용 재정의 할 수 없다. (const처럼) type alias를 통해 원시타입, 배열, 유니온 타입 등을 별칭화 할 수 있다. 2021. 4. 16. 제네릭 <Generic> function checkNull(arg: number | null): number { if (arg == null) throw new Error('앗 널이다!!'); return arg; } null을 체크하는 함수이다. 파라미터로 number 혹은 null 타입을 받고 있다. 리턴도 넘버타입이다. 그럼 string은? boolean은? 혹은 내가 만든 타입이라면??? function checkNull(arg: any | null): any { if (arg == null) throw new Error('앗 널이다!!'); return arg; } any타입으로 만들어보았다. 리턴도 any타입이다. 이제 문제가 없다. 재사용성이 향상됐으니까. function checkNull(arg: any | nul.. 2021. 4. 15. 타입스크립트의 객체지향 OOP Object-Oriented Programming 객체 지향 프로그래밍 목적 간단히 얘기해서 좋은 프로그램을 만들기위함이다. 기존의 절차지향적 프로그래밍에서 개선된 프로그래밍 패러다임(모형)이다. 하지만 절차지향과 객체지향 각각의 특장단점이 있기에 뭐가 더 좋다라고 할 수는 없지만 만들려는 프로그램을 분석하여 하나만 사용하던 섞던 하면 된다. 방식 큰 틀에서 세분화하는 것이 아니라 세분화된 조각들을 조립하는 것이다. 레고를 떠올리면 가장 쉬운데 여러 모양의 레고들이 있고 이를 설계도 대로 조립을 하면 하나의 완성품이 되는 것처럼 말이다. 이런 조각(=레고)이 바로 객체(Object)이다. 요소 객체지향이라는 것이 의미가 있으려면 아래 4가지 요소들을 이해해야한다. 캡슐화(Encapsulation).. 2021. 4. 15. 타입 단언 (Type Assertions) 타입 단언은 말그대로 컴파일러에게 타입이 이것이다라고 단언하는 것이다. 사용 방법은 두가지이다. let code: any = 123; let employeeCode = code; let employeeCode = code as number; 형변환과는 다르다. 형변환은 실제로 데이터의 구조를 변환하는 것이고 타입단언은 컴파일러에게 강제하는 것이다. DOM구조에 접근할 때 주로 쓴다. const button = document.querySelector('.btn')! as HTMLButtonElement; // button에 HTMLButtonElement구조가 타입단언되면서 지원되는 api를 사용할 수 있다. 사용을 잘 못하면 재앙이... Assertions 주장 단언 자기 주장 2021. 4. 12. 타입 추론 (Type Inference) function add(x: number, y: number): number { return x + y; } const result = add(1, 2); result 변수는 타입을 지정하지 않았지만 add함수의 리턴 타입이 number이기때문에 typescript가 자동으로 number type으로 인식한다. 이 타입 추론을 통해 코딩량이 줄 수도 있겠지만 기준이 모호해서 모든 것에 타입을 지정할지 어느정도 타입추론을 사용할지는 각 조직에서 기준을 세워서 사용하면 되겠다. Inference 추론 추정 추리 2021. 4. 12. 교차타입 (Intersection Types) Intersection Type은 여러 타입을 묶어서 합쳐준다. (Intersection이 교차, 사거리라는 뜻인데...뭔가 애매하다) type Student = { name: string; score: number; }; type Worker = { empolyeeId: number; work: () => void; }; function internWork(person: Student & Worker) { console.log(person.name); console.log(person.score); console.log(person.empolyeeId); console.log(person.work()); } internWork({ name: 'steve', score: 50, empolyeeId: 80.. 2021. 4. 12. 식별 유니온 타입 (Discriminated Unions Type) type Square { kind: "square"; size: number; } type Rectangle { kind: "rectangle"; width: number; height: number; } type Shape = Square | Rectangle; 객체 타입들을 유니온으로 가지고 있는 타입은 공통으로 가지고 있는 키를 식별하여 구분할 수있게 해준다. 자바스크립트와는 차원이 다른 명확함을 표한한다. Discriminate 차별하다 식별하다 2021. 4. 12. 타입 에일리어스 (Type Alias), 유니온 타입 (Union Type) Type Alias // 문자열 type Text = string; // 숫자 type Num = number; // 불리언 type check = boolean; // 함수 type Func = () => void; // 객체 type Student = { name: string; age: number; }; const student: Student = = { name: 'ellie', age: 12, } Union Type // string type Direction = 'left' | 'right' | 'up' | 'down'; // number type TileSize = 8 | 16 | 32; // object type obj1 = { a: 1 }; type obj2 = { a: 2 }; typ.. 2021. 4. 10. 배열 (Array), 튜플 (Tuple) Array 두가지 방법 const strNum1: string[] = ['one', 'two']; const strNum2: Array = ['one', 'two']; const realNum1: number[] = [1, 2]; const rearNum2: Array = [1, 2]; Tuple 다른 타입을 같이 담을 수 있다. 튜플 보다는 interface / type alias / class를 사용하자. const student: [string, number] = ['steve', 56]; student[0]; // steve student[1]; // 56 const [name, age] = student; // name → steve // age → 56 2021. 4. 10. 함수 (Function) 기본형태 각각 파라미터에 타입 선언, 리턴 타입도 선언 // JavaScript function jsAdd(num1, num2) { return num1 + num2; } // TypeScript function tsAdd(num1: number, num2: number): number { return num1 + num2; } Optional Parameter 옵셔널 문법을 사용한 함수 // 파라미터명 옆 물음표로 해당 파라미터의 사용유무를 선택할 수 있음 function printName(firstName: string, lastName?: string) { console.log(firstName); console.log(lastName); } printName('Steve', 'Jobs'); pri.. 2021. 4. 10. 원시타입 (primitive type) 본 블로그에 올라오는 TypeScript 예제는 엘리의 타입스크립트+객체지향 프로그래밍 마스터 강의에 기초함. academy.dream-coding.com Dream Coding All Courses, 프론트엔드 중급, 백엔드 타입스크립트 + 객체지향 프로그래밍 마스터 (12) 5.0 average rating academy.dream-coding.com number const num1: number = 11; const num2: number = -11; const num3: number = 0; string const str1: string = 'hello'; const str2: string = "hello"; const str3: string = `hello`; boolean const bool1.. 2021. 4. 10. 이전 1 다음
