타입스크립트 기본 타입

TypeScript?

• 동적 타입언어인 js의 단점을 보완하기 위한 superset(상위집합)이 typescript
  (타입스크립트는 자바스크립트로 컴파일되는, 자바스크립트의 타입이 있는 상위집합)
• 즉,정적 타입 시스템을 도입한 자바스크립트. 즉 정적 타입 언어에서는 프로그램의 예상 동작을 타입을 통해 나타내고, 그 예상에 걸맞게 동작할 지의 여부를 타입 검사기(type checker)를 통해 실행 전에 확인가능하므로 타입이 중요

주의

• 변수 타입 정의시 Number,String...은 객체를 의미하므로 number,string처럼 소문자로 시작해야

1.숫자
let firstNumber: number =3;
let secondNumber: number;
secondNumber = 10; //이건 ok
secondNumber = 'string'(x) 숫자가 들어가야

2.문자
let str: string = 'Seoul';
let str2: string = firstNumber.toString();

3. boolean
let bool: boolean = true;
bool = false

4.Array
기본 형태
let arr: number[] = [1,2,3]; 배열의 원소로 number만 받는다
let arr1:Array<number>=[4,5,6]; 이 방식은 제네릭에서 많이 사용
arr[3] = 10;

배열 원소의 타입들을 지정할 때
let arr2:(string|boolean|number) [] = ['seoul',10];
배열의 원소가 string / boolean / number 중 하나면 된다

|를 유니언이라 한다.(또는의 역할)

5.튜플
정의:배열의 인덱스와 요소의 타입을 정의해준 형식
배열의 길이와 원소 타입을 정하고 싶을 때
배열 길이=3 / 첫째 원소는 숫자, 둘 째는 boolean,셋 째는 string이어야 
let arr3:[number,boolean,string] = [5,false,'String']

원소를 딱 정해서 줄 수도
let arr4:[2,'Seoul','Lite'] = [2,'Seoul','Lite']; 
let arr5:[2,'Seoul','Lite'] = [2,'Seoul','김말쑥']; <- 'Lite'아닌 다른 값이 들어가서 오류 생김

6.Object
let obj1:{a:number,b:string} = {a:10,b:'seoul'};
let obj2:{a:number,b?:string} = {a:10}; // ?붙으면 해당값을 사용하지 않을수도 있다는 의미,따라서 b라는 값은 처음에 바로 값을 주지 않고 나중에 값을 줄 수도 있다.
obj1.a = 77;

객체의 속성값을 변경못하게 하고 싶을때
let obj3 :{a:number,b:string} = {a:2020,b:'not easy'} as const;
obj3.a = 10000

혹은

let obj4 : object = {a:'sdd', b:'sdsd}도 가능

7.function 
매개변수와 return 값에 대한 타입을 지정해 놓아야
const foo = (a:number,b:number): number =>{
    return a+b
}

리턴값이 undefined라면 void를 명시해줘야
const foo2 = (a:number,b:number):void =>{
    console.log(a+b)
}
const fooo2 = (a:number,b:number):void =>{
    return 
}

-함수를 리턴값으로 가질 때

const foo3 = (a:string,b:string):(c:string)=>string => {
    return (c:string)=>{
        return a+b
    }
}

(c:string)=>string => 함수 foo3의 return 값이 (c:string)을 인수로 받고 string을 return하는 함수임을 명시

-함수 안의 함수가 다시 함수를 리턴할 때
const foo4 = (a:string,b:string):(c:string)=>(d:string)=>string => {
    return (c:string)=>{
        return (d:string)=>{
            return d
        }
    }
}

객체의 method

const obj4:{a:(b:string,c?:number)=>number } = {
    a라는 method는 (b,c)를 인자로 받고 number를 리턴하는 함수
    a : (b:string,c?:number)=>{
        return c ? c : 100
    }
}
즉,함수 선언이 아닌, 함수의 내부함수나 객체의 method는 (매개변수)=>리턴값의 타입 형태로 쓴다
함수 선언 = (매개변수:타입):리턴값의 타입
함수의 내부함수 혹은 객체 method = (매개변수:타입)=>리턴값의 타입

null/undefined도 타입 정의 가능
let a:null = null;
let b:undefined = undefined;

type Width = number | string
let width:Width;
width = 100;
width='sdsd