goshek 님의 블로그

/*    ! 유니온 타입과 제네릭    유니온 타입(or, |)    : 여러 타입 중 하나가 될 수 있는 값을 의미    ? 유니온 타입을 제네릭의 타입 변수에 적용    extends 키워드를 사용(확장)*/// 해당 함수 호출 시// string 또는 number타입의 매개변수만 적용function unionGenericT extends string | number>(value:T){    if(typeof value=== 'string'){        return value.toLowerCase();    }    return value;}const result1= unionGeneric('sTriNg');const result2= unionGeneric(1000);console.log(res..

export const tmp='';// 예시 1) 제네릭 함수 구현function reverseArrayT>(array: T[]): T[]{    let reverseArr= array.reverse();    return reverseArr;}// 예시 2) 제네릭 인터페이스 정의interface keyValueK ,V>{ // K: key, V: value의 타입    key: K;    value: V;    };let keyValue: keyValuestring, number>={    key:"gwon",    value: 789}/*    ? 제약 조건의 예시*/interface ILength{    length: number;}/*    T라는 타입 변수는 ILength인터페이스를 포함하는..

/*    ! Generic    # 1. 제네릭 정의    : 재사용 가능한 컴포넌트를 만드는데 사용    >> 해당 컴포넌트가 처리할 데이터 타입을 미리 지정하지 않고,      해당 컴포넌트를 사용하는 시점에서 원하는 데이터 타입 지정    # 2. 제네릭 필요성    - 코드의 중복을 줄임    - 재사용 가능한 컴포넌트를 생성    - 타입 안정성 보장        >> 컴파일 시점에서 타입을 체크(런타임 환경에서 발생할 수 있는 에러를 방지)    # 3. 제네릭 기본 문법    : 사용할 컴포넌트(변수, 함수, 클래스 등)의 이름 뒤에 꺽쇠괄호안에 타입 변수를 지정    >> 함수나 클래스등을 사용할때 활용할 타입을 명시        *"타입 변수"    : 임의의 키워드를 사용하여 명시  ..

/*    ! 타입 선언    : 개발자가 타입스크립트 컴파일러보다 해당값의 타입의 주도권을 가지는 방법    ? 타입 단언 방법    as키워드를 사용*/let somValue: any='this is a string';//somValue=true;let length: number= (somValue as string).length;console.log(length); //16/*    # 타입 단언을 활용하는 예시    : 웹 개발에서 DOM요소를 조작할 때, 특정 DOM 요소를 구체적인 HTMLElement타입으로 단언    >> ts가 자동으로 해당 DOM요소의 정확한 타입을 추론할 수 없다.        1) HTMLButtonElement 단언    웹 문서에 이벤트를 등록하여, DOM 구조가..

export const tmp='';/*    ! 인터페이스 정의    : 객체구조를 정의하는 타입스크립트의 기능    +) 함수 타입 정의도 가능    >> 객체가 어떤 프로퍼티와 메소드를 가져야하는 지 명시    : 컴파일 시점에 타입 체킹을 위해 사용되는 개념    >> 다양한 구현체에 동일한 인터페이스를 저굥ㅇ하여 일관성과 재사용성 제공    cf) 타입별칭    - 다양한 데이터의 타입을 명시 가능    >> 원시타입, 유니온, 인터섹션등 모든 타입을 별칭으로 지정 가능    ? 인터페이스 구현 방법(명시)    : interface키워드를 사용하여 명시    : 인터페이스명은 대문자로 시작    >> 객체의 문법 체계를 모두 사용 가능(옵셔널, readonly 모두 가능)        cf) ..

// type06.tsexport const tmp = '';//! 리터럴 타입(Literal, 문자 그대로의)// : 특정 '값'만을 가질 수 있는 타입을 정의할 때 사용// >> 특정 '값'으로 제한//! 리터럴 타입의 종류// - 해당 값만을 가지는 상수// - 해당 값을 타입으로 지정한 변수// >> 다른 값을 할당하려고 하면 타입 에러가 발생//? 1) const 키워드를 사용하여 직접 리터럴 값을 할당(초기화)let str1 = '안녕하세요'; // string 타입str1 = 'hello';str1 = '곤니치와';const str2 = '반갑습니다.'; // "반갑습니다." 타입// str2 = 'hi';// str2 = '니하오';// >> 해당 값을 자동으로 리터럴 값으로 유추//? 2..

export const tmp='';/*    ! union type    : 여러 타입중 하나가 될 수 있는 값을 나타내는 방법    >> 값에 허용된 타일을 두 개 이상을 지정    >> OR 연산자 (A 또는 B또는 ...)    >> vertical bar를 사용하여 표현    ? union 타입의 사용    >> 변수, 함수의 매개변수, 반환값 등에서 모두 사용 가능    >> 타입의 유연성을 제공        : 무분별한 any 사용을 방지    type UnionType= Type01 | Type02.. */type VariableType= string | number | boolean | number[];let value: VariableType= '문자';/*    ? 타입 별칭의 예시 ..

export const tmp='';/*    ! typescript의 객체 타입    ? 1. 객체 타입 지정(명시)    : {} 중괄호를 사용하여 표현    >> 각 테이터별 타입 명시의 구분은 세미콜론 사용을 권장*/const user:{    /*        각 타입 구분 시 콤마와 세미콜론 모두 사용 가능        >> 세미콜론 사용을 권장    */    name: string,    height: number;    favorite: any[];}={    // 객체 내부에서 각 속성의 구분은 콤마로 표시    name: 'Gwon',    height: 178,    //hobby: 'Study' -Error    // >> 객체는 타입 명시를 하지 않은 속성은 정의할 수 없다.  ..

// helloWorld.tsconsole.log("Hello World");/*    ts 파일 명령어를 실행하기 위해서는 해당 파일을 js파일로 컴파일(번역)이 필요    >> tsc 파일명.ts    : 같은 파일명의 js 확장자 파일이 자동으로 생성    >> 컴파일 된 js파일을 Node.js 런타임 환경에서 실행    : node 파일명.js*/let num: number= 3; // type기능을 사용하는 typescript문법console.log(num);/*    >> typescript 코드는 실시간으로 javascript로 컴파일되지 않는다.        ! ts-node    : ts코드를 실시간으로 js로 컴파일하고 실행(js파일 생성하지 않고)    ? ts-node 설치    ..