🟦 Typescript 공부하기 🟦

사부님 숙제.

오늘 10시 회의인데 3시간 남았다.

TypeScript 한글 문서

아~

몰라몰라

---

 동일 연산자는 (==) 인수를 강제로 변환하여(coerces), 예기치 않은 동작을 유발

if ("" == 0) {
  // 참입니다! 근데 왜죠??
}
if (1 < x < 3) {
  // *어떤* x 값이던 참입니다!
}

존재하지 않는 프로퍼티의 접근을 허용

const obj = { width: 10, height: 15 };
// 왜 이게 NaN이죠? 철자가 어렵네요!
const area = obj.width * obj.heigth;

 

 

정적 검사

프로그램을 실행시키지 않으면서 코드의 오류를 검출하는 것

 

TypeScript == 정적 타입 검사자

프로그램을 실행시키기 전에 값의 종류를 기반으로 프로그램의 오류를 찾음

- 어떤 JavaScript 코드를 TypeScript 파일에 넣어도 잘 작동

- 그러나 TypeScript는 다른 종류의 값들을 사용할 수 있는 방법이 추가된, 타입이 있는 상위 집합

 

 

console.log(4 / []);

 JavaScript에서 NaN을 출력

TypeScript에서 오류

 

 

+ TypeScript는 JavaScript 코드의 런타임 특성을 절대 변화시키지 않음

+ TypeScript의 컴파일러가 코드 검사를 마치면 타입을 삭제해서 결과적으로 "컴파일된" 코드를 만듭니다. 즉 코드가 한 번 컴파일되면, 결과로 나온 일반 JS 코드에는 타입 정보가 없음.(TypeScript가 추론한 타입에 따라 프로그램의 특성을 변화시키지 않음)

 

=> TypeScript는 컴파일-타임 타입 검사자가 있는 JavaScript의 런타임

 

 

- 타입 추론 (Types by Inference)

- 타입 정의하기 (Defining Types)

any (무엇이든 허용합니다), unknown (이 타입을 사용하는 사람이 타입이 무엇인지 선언했는가를 확인하십시오), never(이 타입은 발생될 수 없습니다) void (undefined를 리턴하거나 리턴 값이 없는 함수)

 

 Interfaces and Types - interface를 우선적으로 사용하고 특정 기능이 필요할 때 type을 사용

- 타입 구성 (Composing Types)

유니언(Union)과 제네릭(Generic)

 

유니언은 타입이 여러 타입 중 하나일 수 있음을 선언하는 방법

제네릭은 타입에 변수를 제공하는 방법

 

- 구조적 타입 시스템 (Structural Type System)

타입 검사가 값이 있는 형태에 집중한다

---

🟦 기본 타입

TypeScript는 JavaScript와 거의 동일한 데이터 타입을 지원, 열거 타입을 사용하여 더 편리

불리언 (Boolean)

let isDone: boolean = false;

숫자 (Number)

부동 소수 값

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

문자열 (String)

let color: string = "blue";
color = 'red';

let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ fullName }.
I'll be ${ age + 1 } years old next month.`;

let sentence: string = "Hello, my name is " + fullName + ".\n\n" +
    "I'll be " + (age + 1) + " years old next month.";

배열 (Array<타입>, 배열 요소타입[])

let list: number[] = [1, 2, 3];

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

튜플 (Tuple)

 요소의 타입과 개수가 고정된 배열

// 튜플 타입으로 선언
let x: [string, number];
// 초기화
x = ["hello", 10]; // 성공
// 잘못된 초기화
x = [10, "hello"]; // 오류

열거 (Enum)

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

Any

알지 못하는 타입을 표현

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // 성공, 분명히 부울입니다.

let list: any[] = [1, true, "free"];

list[1] = 100;

Void

 반환 값이 없을 때 반환 타입을 표현하기 위해 쓰이는 것

Null and Undefined

// 이 밖에 이 변수들에 할당할 수 있는 값이 없습니다!
let u: undefined = undefined;
let n: null = null;

Never

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function error(message: string): never {
    throw new Error(message);
}

// 반환 타입이 never로 추론된다.
function fail() {
    return error("Something failed");
}

// never를 반환하는 함수는 함수의 마지막에 도달할 수 없다.
function infiniteLoop(): never {
    while (true) {
    }
}

객체 (Object)

declare function create(o: object | null): void;

create({ prop: 0 }); // 성공
create(null); // 성공

create(42); // 오류
create("string"); // 오류
create(false); // 오류
create(undefined); // 오류

타입 단언 (Type assertions)

"angle-bracket" 문법

as-문법 

 

var 대신 let 쓰기

---

🟦 인터페이스

선택적 프로퍼티 (Optional Properties)

읽기전용 프로퍼티 (Readonly properties)

readonly

ReadonlyArray<number>

---

🟦 함수

---

🟦 리터럴 타입 

리터럴 타입 좁히기 (Literal Narrowing)

// const를 사용하여 변수 helloWorld가
// 절대 변경되지 않음을 보장합니다.

// 따라서, TypeScript는 문자열이 아닌 "Hello World"로 타입을 정합니다.
const helloWorld = "Hello World";

// 반면, let은 변경될 수 있으므로 컴파일러는 문자열이라고 선언할 것입니다.
let hiWorld = "Hi World";

문자열 리터럴 타입 (String Literal Types)

---

🟦 유니언과 교차 타입

---

🟦 클래스

---

🟦 열거형

---

🟦 제네릭

---

으아 졸려

서

타입스크립트 깔고

직접 그냥 써보기로

 

tsc 파일명.ts

타입스크립트에서 작성한 코드를 자바스크립트로 컴파일

 

tsc -w 파일명.ts

자동으로 감지해 입력된 코드를 알아서 컴파일

 

프로젝트할래