TypeScript

• javascript 기본문법에 자료형 체크하는 기능을 추가한 것
• 자바스크립트가 자의적으로 type해석을 하고 코드를 실행 시켰을 때 의도돠 다른 방식으로 쓰이지 않도록 방지
• 정적파일언어
  • 실행하지 않고도 코드 상의 에어를 알려줌(실시간 디버깅 가능)
• 변수나 함수를 만들어 줄 때 타입까지 명시해서 선언
• ts라는 typescript확장자 사용

typescript 설치

• 설치 : npm install typesciprt -g
• 버전 확인 : `tsc -v'
• tsconfig 파일 생성 : `tsc --init'
• ts 파일을 js파일로 변환 : tsc 파일이름.ts
  • 변환된 js파일을 실제 사용하면 됨
• 변환 및 실행 자동화 : ts-node모듈 설치(npm install ts-node -g)후 실행(ts-node 파일이름.js)

JavaSciprt의 자료형을 TypeSciprt에서 사용

• 숫자형 : number
• 문자열 : string
• 배열 : number[], Array<string>, (string|boolean|number)[] 등
• 객체 : object
• null, undefined

let num1: number = 0; // 숫자
let str1: string = 'hi'; // 문자열
const TRUE: boolean = true; //boolean
//숫자 배열
let numbArr1: number[];
let numArr2: Array<number>;
//문자배열
let strArr1: string[];
let strArr2: Array<string>;
//여러 타입이 들어가는 배열
let variatyArr1: (number | string | object)[] = ['aa', 'bb', 0];
let variatyArr2: Array<number | boolean | string> = [true, 'hihi', 10];
//어떤 사료형이던 상관 없는 배열
let anyArr: any[];
//객체
let object: object = {
    id: '2013',
    name: '양갱',
};
//null
let nonono: null = null;
let HIHI: undefined;

JavaScript에 없는 TypeScript 자료형

Tuple

• 배열과 비슷하나 순서와 개수가 정해져있는 배열(요소의 길이와 타입 고정)
• 배열의 요소에 각각의 type을 지정해줘야함
• 순서와 규칙이 있는 배열이라면 Tuple사용
• 길이와 데이터 타입이 정해져있으나 push, pop등을 사용하면 길이가 변함 -> readonly를 사용하여 고정

let lunch: [string, number];

lunch = ['salad', 2];

console.log(lunch);  // [ 'salad', 2 ]

lunch.push('pasta');
//배열값을 고정시키려고 사용하였는데 길이가 변함

console.log(lunch); // [ 'salad', 2, 'pasta' ]

//readonly를 사용하여 길이 고정
let lunch: readonly [string, number];

lunch = ['salad', 5];
console.log(lunch);

Enum(열거형)

• 숫자형/ 문자열 기반 열거형 제공
• 이름있는 상수들의 집합 정의
• JS의 객체와 유사하지만 선언 이후로는 내용을 추가하거나 삭제할 수 없음

숫자 열거형

• 값을 지정해주지않으면 0부터 1씩 자동으로 증가해서 할당
• 값을 할당해주면 할당되지 않은 상수는 이전상수 +1을 할당
• 함수의 return값을 상수로 사용할 수 있으나 모든 값이 할당되어있지 않으면 초기화 된 상수 이후에 와야함

enum Direction {
    Up = 1, //Up을 1로 초기화하면 뒤에는 2,3,4 ... 자동으로 할당
    Down,
    Left,
    Right,
}
enum Direction2 {
	Up, //초기값을 정해주지 않는다면 0으로 할당후 1씩증가
  	Down,
  	Left,
  	Right
}

enum UserResponse {
  No = 0,
  Yes = 1,
}
 
function respond(recipient: string, message: UserResponse): void {
  // 열거형이름을 type으로 선언해 사용가능
}
 
respond("Princess Caroline", UserResponse.Yes);

enum E {
  A = getSomeValue(),
  B, // 오류! 앞에 나온 A가 계산된 멤버이므로 초기화가 필요합니다.
//Enum member must have initializer.
}

문자열 열거형

• 문자열 열거형은 문자열 리터럴 또는 다른 문자열 열거형의 멤버로 상수 초기화 해야함
• 숫자 열거형처럼 자동 증가기능은 없지만 직렬화를 잘함(숫자 열거형은 맵핑된 값을 모른다면 찾아야하지만 문자 열거형은 유의미함)

enum Direction {
	Up = "UP",
  	Down = "DOWN",
  	Left = "Left",
  	Right = "Right",
}

이종 열거형(Heterogeneous enums)

• 숫자 열거형과 문자열 열거형을 합쳐 사용한 것
• 잘 사용하지 않음

enum BooleanLikeHeterogeneousEnum {
  No = 0,
  Yes = "YES",
}

참고 : typescriptlang.org

any

• typechecking에러가 발생하는 걸 원하지 않을 때 사용 (빈배열을 먼저 선언하고 싶을 때, 받아오는 데이터 타입이 확실하지 않을 때 등)
• 정해진 값이 없기때문에 아무 값이나 넣을 수 있음
• 이걸 남발하게 되면 typescript를 사용하는 의미가 없기 때문에 잘 생각해보고 사용!

let anyType:any ;
anyType = 1;
anyType = "HI";
anyType = [1,2,3]

interface

• 객체에 이름을 지정하는 또다른 선언 방법
• 내부의 key값의 type 지정가능

interface Student {
    name: string;
    isPassed: boolean;
}

const student1: Student = {
    name: '양갱',
    isPassed: true,
};

enum Score {
    Aplus = 'A+',
    A = 'A',
    Bplus = 'B+',
    B = 'B',
    Cplus = 'C+',
    C = 'C',
}

interface CollegeStudent extends Student {
    major: string;
    readonly id: number;
    [grade: number]: Score; // 학년 : 점수
    club?: string; // ?는 있어도 되고 없어도 됨
}

const yangGang: CollegeStudent = {
    name: '남양갱',
    major: '전자공학',
    isPassed: true,
    id: 2013,
    1: Score.A,
    2: Score.Aplus,
};

yangGang.club = 'coomroom';
//yangGang.id = "2017"; readonly로 error
console.log(yangGang);

Type alias

• 타입을 정의할 수 있다는 점에서 interface와 유사
• 원시값, 유니언타입, 튜플 등도 타입으로 지정가능
• 리액트에서는 유사한 방식으로 사용되며 interface는 라이브러리 제작하거나 API 명세를 작성할 때 사용하며 상속을 통해 확장이 필요한 경우 더 유리하며 좀 더 제한적으로 props나 state에 사용

interface HumanInterface { 
    name: string;
    age: number;
}
type HumanType = {
    name: string;
    age: number;
};

let human1 :HumanInterface = {
    name : "사람1",
    age : 20,
}
let human2 : HumanType = {
    name : "사람2",
    age : 20,
}


type Gender = 'F' | 'M';
type Person = {
    name: string;
    age?: number;
    like?: string[];
    gender: Gender;
};

let daniel: Person = {
    name: '양갱',
    gender: 'F',
};

// 문자열 리터럴로 타입 지정
type Str = "Lee";

// 유니온 타입으로 타입 지정
type Union = string | null;

// 문자열 유니온 타입으로 타입 지정
type Name = "Lee" | "Kim";

// 숫자 리터럴 유니온 타입으로 타입 지정
type Num = 1 | 2 | 3 | 4 | 5;

// 객체 리터럴 유니온 타입으로 타입 지정
type Obj = { a: 1 } | { b: 2 };

// 함수 유니온 타입으로 타입 지정
type Func = (() => string) | (() => void);

// 인터페이스 유니온 타입으로 타입 지정
type Shape = Square | Rectangle | Circle;

// 튜플로 타입 지정
type Tuple = [string, boolean];
const t: Tuple = ["", ""]; // Error

유니언타입/ 교차타입

유니언타입

• 타입이 1개가 아니라 여러 타입이 될 수 있을 때 사용
• |를 이용해 사용
• type이 다른경우 구체적으로 명시해서 처리해줌

let age : string | number; //string이나 number가 될 수 있음을 명시
function nextYearAge(age:number | string) { 
	if(typeof age === 'number') { //type을 구분하여 분기처리
    	console.log(`내년에는 ${age+1}살 입니다.`)
    } else {
    	console.log(`내년에는 ${Number(age) +1 }살 입니다.`)
    }
}

교차타입

• 기존타입을 합쳐 필요한 기능을 모두 가진 단일 타입으로 만드는 것
• 기존타입을 모두 만족해야한다.

type Common = {
    name: string;
    age: number;
    gender: string;
};

type Animal = {
    howl: string;
};

type Cat = Common & Animal; // 교차타입
type Dog = Common | Animal; // union타입

let dog: Dog = { // 둘중 하나만 만족하면되지만
    howl: '멍멍멍',
};
let cat: Cat = { //둘 모두 만족해야한다
    age: 1,
    gender: 'F',
    name: '나비',
    howl: '이야아아아아아아옹',
};

Generic

• 타입을 특정할 수 없는 값이 들어올 때, 호출하거나 생성시 데이터 타입을 지정하는 것

function data<T>(arr: T[]) { //어떤 배열이 넘어올지 모를때 generic으로 선언 후. 
    return arr.length;
}
console.log(data<number>([1, 2, 3])); //함수호출 시 타입 지정
console.log(data<string>(['a', 'b', 'c']));


function print<T, U>(x:T, y:U){ //각각 지정도 가능, 두개가 같은 타입이면 같은 문자 사용하면됨
    console.log(x,y)
}
print<string, number>("HIHI",1234);

interface Product<T>{ // interface에서도 generic 사용 가능
    company : string;
    createdAt : Date;
    option : T;
}

type phoneOption = {
    size : string
}
type noteBookOption = {
    inch : number
}

const iphone:Product<phoneOption> = {
    company : "apple",
    createdAt : new Date("2024-03-23"),
    option : {
        size : "pro"
    }
}
const macBook : Product<noteBookOption> = {
    company : "apple",
    createdAt : new Date("2024-03-23");
    option : {
        inch : 13
    }
}