Today I Learned_230116

TypeScript

인프런 타입스크립트 강의 수강

타입스크립트 프로젝트 세팅

ts 문법

• 기본적으로 변수, 속성, 매개변수, 리턴값에 타입이 붙었다고 생각하면 됨.

const a: number = 5;
function add(x: number, y: number): number { return x + y }
const add: (x: number, y: number) => number = (x, y) => x + y;
const obj: { lat: number, lon: number } = { lat: 37.5, lon: 127.5 };

위 코드를 그대로 IDE에 복사-붙여넣기 하면 오류를 찾을 수 있다!

add - 중복 정의라고 IDE가 검사해 줌!

// 변수 뒤에는 콜론(:) 타입을 붙이면 된다.
const a: number = 5; //5와 같이 타입이 명확한 경우 명시해줄 수 있다.
// 대문자 쓰면 안 된다
//const a: Number = 5; 이거 안 됨

const b: string = '5';
const c: boolean = true;
const d: undefined = undefined;
const e: null = null;
const f: symbol = Symbol.for('abc')

//여기서 BigInt literals are not available when targeting lower than ES2020. 가 발생
const g: bigint = 1000000n;
//찾아보니 tsconfig.json에서 target이 es2016으로 되어있었다.
//target es2020으로 바꾸니 해결.

const h: any = true; //any : 모든 타입 지원
//any를 쓰는것은 사실상 의미가 없다. javascript나 다름없기 때문에

//매개면수 뒤에토 타입을 붙여줘야 하고, 리턴값 뒤에도 타입을 붙여줘야 한다.
//리턴값의 타입 : 매개변수 뒤에 붙여준다.
function add(x: number, y: number): number { return x + y } //add의 return값은 number

//객체에도 타입을 붙여줄 수 있다.
const obj: { lat: number, lon: number } = { lat: 37.5, lon: 127.5 };

타입스크립트는 자바스크립트의 변수, 매개변수, 리턴값에 타입을 붙여넣은 것.

타입스크립트에서 any라는 타입을 전부 없애면 javascript에서 타입스크립트로 완벽하게 변환했다고 볼 수 있다.

타입스크립트의 목적 : any를 없애는 것

타입을 붙여주는 행위 : 타이핑한다

함수명에도 타입을 붙여주는 이유 : 자바스크립트의 변수, 매개변수, 리턴값에 타입을 붙이는 것이 목표이기 때문에

화살표 함수 읽는 법

//아래와 같은 함수일 때
const add: (x: number, y: number) => number = (x, y) => x + y;
//일단 콜론을 찾아서 뒷부분을 없애보자. 다 지웠을 때 javascript로 말이 되는 코드인지 확인.
const add = (x, y) => x + y;

//type으로 타입을 선언하는 방식 : type alias
//매개변수 2개와 리턴값
type Add = (x: number, y: number) => number;
const add: Add = (x, y) => x+y;  //이렇게 타입을 별칭으로 빼 둘 수 있다.

//주의해야 할 점! -> function과 화살표의 차리
//function은 타입이 콜론(:)으로 나오는데
function add(x: number, y: number): number { return x + y }
//화살표 함수는 타입이 화살표(=>)로 나온다
type Add = (x: number, y: number) => number;

//배열 타이핑 방법
const arr: string[] = ['123', '456']
const arr2: number[] = [123, 456]
const arr3: Array<number> = [123, 456] //제네릭 사용. 제네릭도 타이핑의 핵심

//튜플 : 고정된 길이의 배열 (배열은 길이를 마구 늘릴 수 있다)
const arr4: [number, number, string] = [123, 456, 'hello'] //개수 맞춰야 한다
const arr4: [number, number, string] = [123, 456, 'hello', 111] //이러면 에러남

//아예 값을 고정시켜버릴 수 있다.
//타입 자리에 고정된 원시값을 넣을 수 있다
const i: true = true; //true만 넣을 수 있음
const i: true = false; //이러면 안 된다
const i: 5 = 5;
//고정된 원시값이 필요한 경우 : const
//상수는 굳이 타입을 명시할 필요가 없다. 왜냐면 그 값으로 고정이니까

타입스크립트는 타입을 선언하는 방법이 엄청 많다..

//인터페이스를 통해 함수의 타입을 정의하는 방법
interface Add2 {
    (a: number, b:number): number;
}

const add: Add2 = (a, b) => a+b;

함수 타이핑하는 방법

1. 일반 함수 타이핑(콜론 사용)
2. 화살표 함수
3. 인터페이스

대부분 1번과 2번 방법을 사용한다.