24일차

🦄

24일차

 

Part 4. TypeScript Essentials

Ch 1. TypeScript

Ch 2. Basic Types

 

---

 

 

Ch1. TypeScript

 

 

Typescript는 유형을 추가하여 JavaScript를 확장한다.
Typescript를 사용하면 코드를 실행하기 전에 오류를 포착하고 수정 사항을 제공하는 시간을 절약할 수 있다.

 

 

🔗 타입스크립트 컴파일러를 글로벌로 설치 후,

// 타입스크립트 컴파일러 글로벌 설치
$ npm i typescript -g

// cli 명령어로 파일 컴파일
$ tsc test.ts

// 특정 프로젝트 폴더에서 타입스크립트 컴파일러 설정에 맞춰 컴파일
$ tsc --init
$ tsc

 

🔗 프로젝트에 타입스크립트 컴파일러를 설치 후,

// 프로젝트에 타입스크립트 컴파일러 설치
$ npm i typescript

// .bin 안의 명령어로 파일 컴파일 (node_modules/.bin/tsc)
$ npx tsc --init
$ npx tsc

// npm 스크립트로 파일 컴파일

// 프로젝트에 있는 타입스크립트 설정에 맞춰, npm 스크립트로 컴파일

 

 

 🔗 TypeScript Annotation 

let a: number;
a = 39;
a = "Mark"; // Error

function hello(b: number) {}
hello(39);
hello("Mark"); // Error

 

---

 

 

Ch2. Basic Types

 

 

•  Primitive Types 
  • boolean
  • number
  • string
  • symbol
    • primitive 타입의 값을 담아서 사용한다.
    • 고유하고 수정 불가능한 값으로 만들어준다.
    • 그래서 주로 접근을 제어하는데 쓰는 경우가 많다.
  • null & undefined
    • null 이라는 타입은 null 이라는 값만 가질 수 있다.
    • 런타임에서 typeof 연산자를 이용해서 알아내면 null은 object, undefined는 undefined이다.

• object
  • "primitive 타입이 아닌 것"을 나타내고 싶을 때 사용하는 타입
• Array
  • 배열 안에 요소들은 모두 같은 타입이다.
• Tuple
  • 길이가 정해져 있다.
  • 타입이 정확하다.
• any
  • 어떤 타입이이어도 상관없는 타입이다.
  • 최대한 쓰지 말기~~~
• unknown
  • 이 변수가 무엇(타입)이든 될 수 있음을 알려준다.
• never
  • never 에는 그 어떤 것도 할당할 수 없다.
  • 잘못된 타입을 넣는 실수를 막고자 할 때 사용하기도 한다.
• void
  • undefined를 return

 

// boolean.ts

let isDone: boolean = false;
isDone = true;
console.log(typeof isDone); // boolean

let isOk: Boolean = true;
let isNotOk: boolean = new Boolean(true); // Error !boolean 대문자로!

 

// symbol.ts

console.log(Symbol("foo") === Symbol("foo")); // false

const sym = Symbol();
const obj = {
  [sym]: "value",
};
obj[sym];

 

// object.ts

const person1 = { name: "Mark", age: 39 };

// declare function create(o: object | null): void;
const person2 = Object.create({ name: "Mark", age: 39 });

 

// array.ts

let list: (number | string)[] = [1, 2, 3, "4"];

// let list: Array<number> = [1, 2, 3];

 

// tuple.ts

let x: [string, number];
x = ["hello", 39];
x = [10, "Mark"]; // Error
x[2] = "world"; // Error

const person: [string, number] = ["Mark", 39];
const [first, second, third] = person; // first: string, second: number, third Error

 

// any.ts

function returnAny(message: any): any {
  console.log(message);
}
const any1 = returnAny("리턴은 아무거나");
any1.toString();
let looselyTyped: any = {};

// any는 계속해서 개체를 통해 전파된다.
// 결국, 모든 편의는 타입 안전성을 잃는 대가로 온다.
const d = looselyTyped.a.b.c.d;

function leakingAny(obj: any) {
  const a: number = obj.num; // 누수 막기!
  const b = a + 1;
  return b;
}
const c = leakingAny({ num: 0 });
c.indexOf("0"); // Error

 

// unknown.ts

declare const maybe: unknown;

const aNumber: number = maybe; // Error

if (maybe === true) {
  const aBoolean: boolean = maybe; // 타입 가드를 통해서 타입을 한정 시킴.
  const aString: string = maybe; // Error
}

if (typeof maybe === "string") {
  const aString: string = maybe;
  const aBoolean: boolean = maybe; // Error
}

 

// never.ts

function error(message: string): never {
  throw new Error(message);
}

function fail() {
  return error("failed");
}

function infiniteLoop(): never {
  while (true) {}
}

let a: string = "hello";
if (typeof a !== "string") {
  a; // a: never
}

declare const b: string | number;
if (typeof b !== "string") {
  a; // b: number
}

 

// void.ts

// returnVoid: void
function returnVoid(message: string): void {
  console.log(message);

  return undefined;
}

returnVoid("리턴이 없다.");