Interfaces 속성 이름과 객체의 값의 type을 나타내는 새로운 type을 만드는 것 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // 너무 긴 annotation const oldCivic = { name: 'civic', year: 2000, broken: true, }; const printVehicle = (vehicle: { name: string; year: number; broken: boolean; }): void => { console.log(`Name: ${vehicle.name}`); console.log(`Year: ${vehicle.year}`); console.log(`Broken? ${vehicle.broken}`); }; printVehicle(oldCivic); 인터페이스를 통해 간편하게 할 수 있다. ...
Class 클래스 : 어떤 ‘것’을 나타내는 필드(값)와 메서드(함수)를 가지는 객체를 만들기 위한 청사진 정의 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // 1) class 정의 class Vehicle { drive(): void { console.log('yeeeees'); } honk(): void { console.log('liverpool'); } } const vehicle = new Vehicle(); vehicle.drive(); vehicle.honk(); // 출력결과 // yeeeees // liverpool extends 다른 클래스의 메서드를 가져온다. ...
Type 정의 타입은 value가 가진 다양한 속성,메서드를 지칭하는 지름길이라고 볼 수 있다. 함수로서의 타입, 클래스로서의 타입 등등 이 있다. variable(변수) : string, number, boolean, null, undefined, object, function, array 등등.. “red” 를 보면 string 이다. string이 가진 모든 개체와 method들 이다. 두 방법으로 대답할 수 있다. 예를 들어, string은 charAt(), indexOf() 등 다양한 method를 가진다. 이걸 매번 다 설명하지 않고 모두를 통칭하기 위한 것이 Type 이다. 따라서 Type은 하나의 값이 가지는 다양한 속성과 메소드를 지칭하기 위한 지름길인 것이다. ...
Typescript 개념 Typescript = Javascript + A type system 이다. TS Type System의 특징은 다음과 같다. 개발 중 에러 포착 가능 type annotation 개발중에만 active된다 성능 최적화 없음 TS를 작성하지만 실제론 컴파일러에선 JS를 실행하는 것이다! 자세히 말하자면, 사실 JS를 작성하고 Type annotiation 추가하는 것이 TS를 작성하는 것. 이 과정을 풀어서 설명하자면 Typescript code = Javascript with type annotations -> Typescript Compiler -> Plain old Javascript 인 것이다. json 데이터 받아오기 교육용 Json 사이트 를 접속해서 밑의 resource에 todo를 들어가보자 ...
Arrays in Typescript Typed Arrays : 원소들이 동일한 타입의 값인 것 annotation 없어도 존재하는 원소들을 보고 inference 한다. 빈 배열은 inference할 수 없으므로 any타입이 된다. 1 2 3 4 5 6 7 8 // type annotation const carMarkers: string[] = ['ford', 'toyota', 'chevy']; // Date[] 타입으로 inference const dates = [new Date(), new Date()]; // 2차원. string[][] type이다. const carsByMake = [['f150'], ['corolla'], ['camaro']]; 특징 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // 배열에서 추출시 type inference 한다. const car = carMakers[0]; // string type const myCar = carMakers.pop(); // string type // 배열에 동일하지 않은 type의 값은 추가할 수 없다. carMakers.push(100); // string[]에 number를 넣으면 오류 발생 // 'map, 'forEach', 'reduce' 사용 carMakers.map((car: string): string => { return car.toUpeerCase(); }); // 다수의 type 사용. // const importantDates: (string | Date)[]로 inference 된다. const importantDates = [new Date(), '2030-10-10']; // annotation const importanteDates: (Date | string)[] = [new Date()]; Tuple 각 원소가 기록의 속성을 나타내는 배열과 같은 구조 ...