타입스크립트 공부하기, 타입스크립트 실행 방법, 따라하면서 이해하기 Studying TypeScript, How to execute TypeScript, Understanding while following

npm install -g typescript

ts-node [해당ts파일이름].ts

// 93.tsconst size: number = 123; const isBig: boolean = size >= 100; const msg: string = isBig ? "크다" : "작다"; // @ : 1) 배열은 두 가지로 정의할 수 있다.const values: number[] = [1, 2, 3]; const values2: Array<number> = [1, 2, 3]; values.push('a');// @ : 타입 에러 2) 숫자 배열에 문자열로 입력하면 타입 에러// @ : 3) 문자열과 숫자로 구성된 튜플 타입 정의const data: [string, number] = [msg, size]; data[0].substr(1); data[1].substr(1);// @ : 타입 에러 4) 두 번째 아이템의 타입은 숫자인데 문자열의 메서드를 호출하면 타입 에러

// 94.ts// @ : 1) undefined와 null은 타입으로 사용될 수 있다.let v1: undefined = undefined; let v2: null = null; v1 = 123;// @ : 타입 에러 2) undefined 타입에 숫자를 입력하면 타입 에러// @ : 3) undefined와 null 타입은 다른 타입과 함께 유니온 타입으로 정의할 때 많이 사용let v3: number | undefined = undefined; v3 = 123;

// 95.tslet v1: 10 | 20 | 30;// @ : 1) v1 = 10; v1 = 15;// @ : 타입 에러 2)let v2: '경찰관' | '소방관';// @ : 3) v2 = '의사';// @ : 타입 에러

// 96.tslet value: any; value = 123; value = "456"; value = () => {};

// 97.ts// @ : 1) 아무 값도 반환하지 않음 voidfunction f1(): void { console.log("hello"); } // @ : 2) 함수가 비정상적으로 종료되므로 neverfunction f2(): never { throw new Error("some error"); } // @ : 3) 함수가 종료되지 않으므로 neverfunction f3(): never { while (true) { // ... } }

// 98.tslet v: object; v = { name: "abc" }; console.log(v.prop1);// @ : 타입 에러 1) 객체의 속성에 대한 정보가 없기 때문에 접근하면 타입에러가 발생한다.// @ : 속성 정보를 포함해서 타입 정의하기 위해서 interface를 사용해야 한다.

// 99.ts// @ : 1) 타입은 3 | 5let v1: (1|3|5) & (3 | 5| 7) v1 = 3; // @ : 2) v1에는 3 또는 5가 아닌 값을 할당할 수 없음 v1 = 1;

// 910.ts type Width = number | string// @ : 1) number | string 타입에 Width라는 별칭 부여let width : Width;// @ : 2) 일반적인 타입처럼 사용 width = 100; width = '100px';

// 911.ts// @ : 1) 열거형 타입을 이용하여 과일 정의 enum Fruit { Apple, Banana, Orange, } // @ : 2) 열거형 타입의 원소인 Apple을 값으로 사용const v1: Fruit = Fruit.Apple; console.log(typeof v1);// number// @ : 3) Apple을 타입으로 사용const v2: Fruit.Apple | Fruit.Banana = Fruit.Banana;

// 912.ts enum Fruit { // @ : 1) enum의 첫번째에 값 할당하지 않으면 자동으로 0 할당 Apple, // @ : 2) enum의 각 원소에 숫자 또는 문자열 할당 가능. 명시하지 않으면 이전 원소 + 1 Banana = 5, Orange, }

// 914.ts enum Fruit { Apple, Banana = 5, Orange, } // @ : 1) enum은 객체이므로 객체처럼 다룰 수 있다.console.log(Fruit.Banana);// 5console.log(Fruit["Banana"]);// 5// @ : 2) 각 원소의 이름과 값이 양방향 매핑되서 값으로 이름을 가져올 수 있다.console.log(Fruit[5]);// Banana

// 915.ts enum Language { Korean = "ko", English = "en", Japanese = "jp", }

// 917.tsfunction getEnumLength(enumObject: any) { const keys = Object.keys(enumObject); // @ : enum의 값이 숫자이면 두 개씩 들어가므로 문자열만 계산return keys.reduce( // @ : 1) 원소가 숫자면 양방향 매핑이므로 주의. 객체의 속성값이 문자열인 경우만 계산하면 열거형의 원소 개수를 구할 수 있다. (acc, key) => (typeof enumObject[key] === "string" ? acc + 1 : acc), 0 ); }

// 918.tsfunction isValidEnumValue(enumObject: any, value: number | string) { if (typeof value === "number") { // @ : 1) 값이 숫자이면 양방향 매핑인지 검사한다.return !!enumObject[value]; } else { return Object.keys(enumObject) .filter((key) => isNaN(Number(key))) // @ : 2) 값이 문자열이면 양방향 매핑에 의해 생성된 키를 제거하고 해당 값이 존재하는지 검사 .some((key) => enumObject[key] === value); } }

// 919.tsimport isValidEnumValue from "./918"; import getEnumLength from "./917"; enum Fruit { Apple, Banana, Orange, } enum Language { Korean = "ko", English = "en", Japanese = "jp", } console.log(getEnumLength(Fruit), getEnumLength(Language)); // @ : 3 3 1) 열거형 타입 원소 개수 출력console.log("1 in Fruit:", isValidEnumValue(Fruit, 1)); // @ : 2) 열거형 타입에 존재하는 값이 맞는지 검사// @ : trueconsole.log("5 in Fruit:", isValidEnumValue(Fruit, 5)); // @ : falseconsole.log("ko in Language:", isValidEnumValue(Language, "ko")); // @ : trueconsole.log("Korean in Language:", isValidEnumValue(Language, "Korean"));

// 923.tsimport getEnumLength from "./917"; const enum Fruit { Apple, Banana, Orange, } // @ : 타입 에러 1) 열거형 타입을 상수로 정의하면 열거형 타입의 객체를 사용할 수 없다.console.log(getEnumLength(Fruit));