2장 타입

우아한 타입스크립트 with 리액트  · 

2.1 타입이란

2.1.1 자료형의로서의 타입

2.1.2 자료형의로서의 타입

2.1.3 정적 타입과 동적 타입

2.1.4 강타입과 약타입

2.1.5 컴파일 방식

2.2 타입스크립트의 타입 시스템

2.2.1 타입 애너테이션 방식

let isDone： boolean = false;
let decimal： number = 6;
let color: string = "blue";

2.2.2 구조적 타이핑

2.2.3 구조적 서브타이핑

 type stringOrNumber = string | number;

interface Pet {
    name： string;
}
let cat = { name： "Zag", age: 2 };
function greet(pet： Pet) {
    console.log("Hello, " + pet.name);
}

greet(cat);

2.2.4 자바스크립트를 닮은 타입스크립트

2.2.5 구조적 타이핑의 결과

interface Cube {
    width: number;
    height： number;
    depth： number;
}

function addLines(c： Cube) {
    let total = 0;
    for (const axis of Object.keys(c)) {
        // * Element implicitly has an 'any' type
        // because expression of type 'string' can’t be used to index type 'Cube'
        //•No index signature with a parameter of type 'string'
        // was found on type 'Cube'
        const length = c[axis];
        total += length;
    }
}

2.2.6 타입스크립트의 점진적 타입 확인

2.2.7 자바스크립트 슈퍼셋으로서의 타입스크립트

2.2.8 값 vs 타입

11; // 숫자 값
"hello typescript"; // 문자열 값
let foo = "bar"; // 변숫값

 //함수
const goWork = function (developer) {
    console.log(`tired ${developer}`);
};

type Person = {
    name： string;
    age： number;
}；
interface Person {
    name： string;
    age： number;
}

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}
const rect1 = new Rectangle(5, 4);

 class Developer {
    name： string;
    domain： string;
    constructor(name： string, domain: string) {
        this.name = name;
        this.domain = domain;
    }
}
const me： Developer = new Developer("zig", "frontend”);

2.2.9 타입을 확인하는 방법

typeof 2022； // "number”
typeof "woowahan"; // "string”
typeof true; // "boolean"
typeof {}; // "object"

interface Person {
    first： string;
    last： string;
}
const person： Person = { first： "zig", last： "song" }；
function email(options: { person： Person; subject： string; body： string }) {}

const vl = typeof person; // 값은 'object'
const v2 = typeof email; // 값은 'function'

type T1 = typeof person; // 타입온 Person
type T2 = typeof email; // 타입은 (options： { person： Person; subject： string; body：
string; }) => void

class Developer {
    name： string;
    sleepingTime： number;
    constructor(name： string, sleepingTime： number) {
        this.name = name;
        this.sleepingTime = sleepingTime;
    }
}
const d = typeof Developer; // 값이 'function'
type T = typeof Developer; // 타입이 typeof Developer

const zig： Developer = new Developer("zig", 7);
type ZigType = typeof zig; // 타입이 Developer

2.3 원시 타입

2.3.2/3 undefined vs. null

type Person1 = {
    name: string;
    job?: string;
}；
type Person2 = {
    name： string；
    job： string | null;
}；

2.3.5 binInt

2.3.7 Symbol

2.4 객체 타입

2.4.1 object

2.4.2 {}

 // 정상
const noticePopup： { title: string; description： string } = {
    title： "IE 지원 종료 안내",
    description: "2022.07.15일부로 배민상회 IE 브라우저 치원을 종료합니다.",
}；
// SyntaxError
const noticePopup： { title： string; description： string } = {
    title： "IE 지원 종료 안내",
    description： "2022.07.15일부로 배민상회 IE 브라우저 지원을 종료합니다.",
    startAt; "2022.07.15 10:00:00", // startAt은 지정한 타입에 존재하지 않으므로 오류
}；

2.4.3 array

2.4.4 type과 interface 키워드

type NoticePopupType = {
    title: string;
    description： string;
}；
interface INoticePopup {
    title: string;
    description： string;
}

const noticePopupl： NoticePopupType = { ... };
const noticePopup2： INoticePopup = { ... };
type과 interface률 둘 다 쓸 수 있는 상황에서 팀은 주로 어떤 것을 사용하나요?

2.4.5 function

function add(a, b) {
    return a + b;
}
console.log(typeof add); // 'function'

function add (a： number, b： number)： number {
    return a + b;
}

type add = (a: number, b： number) => number;

끝!