사내스터디 1일차 정리내용
회고

• 문서를 보면 알겠는 내용이지만 실무로 적용할 때는 어떤식으로 해야될지 감이 잘 안옴.
• 우리가 사용하려는 스펙인 typescript + express 보일러플레이트를 공부해가면서 만드는게 더 빠르지 않을까 하는 공통된 의견
• 하루의 공통된 목표를 정해놓고 하니까 굉장히 시간이 빨리가고...
• 큰 일정은 정해놓되 그 안에서는 유동적인 일정조정이 필요하겠다는 판단이 들었음. (실무의 이슈처리시간도 있으니까)

---

기본적인 Type

String, number, boolean

• 가장 기본적으로 사용되는 유형
• string : "Hello, world"
• number : 42
  - 자바스크립트에서는 int나 float, double 등 세부적으로 숫자형태가 구분되지 않음.
  - 모든 숫자 형태가 number
• boolean : true / false

//Type annotation - : 를 이용하여 js 코드에 타입을 정의하는 방식
//string
let str: string = 'hi';

//number
let num: number = 10;

//boolean
let isLoggedIn: boolean = false;

Arrays

• [1, 2, 3] or Array<number> 형태로 선언, string[] / number[] 의 형태로도 선언가능.
• 비슷해보이지만 [number] 의 형태로 사용하면 숫자의 집합이라는 뜻으로 Array가 아닌 Tuple에 해당함.

let arr: number[] = [1,2,3];

let arr: Array<number> = [1,2,3];

Tuple

• 배열의 길이가 고정되고 각 요소 타입이 지정되어있는 배열형식
• 당연하지만 정의되지 않은 타입, 인덱스로 접근할 경우 오류 남.

let arr: [string, number] = ['hi', 10];

Enum

• 특정 값(상수)들의 집합
• 인덱스 번호로도 접근가능하고 기본적으로 0부터 시작하지만 사용자 편의로 변경하여 사용할 수도 있음.

enum Avengers { Capt, IronMan, Thor}
let hero: Avengers = Avengers.Capt;
console.log(hero);    //Capt에 해당하는 인덱스번호 0이 출력됨

let hero2: Avengers = Avengers[0];
console.log(hero2);   //"Capt"

any

• 항상 타입검사를 통과하게 만드는 타입
• 비정상적인 연산이라도 any 타입이 붙으면 타입검사를 통과하게 되서 안정성을 낮추는 타입이기도함.
• 안전한 any 타입 만들기 | overcurried

Void

• 변수에는 undefined 와 null 만 할당하고 함수에는 반환값을 설정할 수 없는 타입

Never

• 함수의 끝에 절대 도달하지 않는다는 의미

Bigint

• ES2020 버전부터 추가된 엄청 큰 숫자에 사용하는 타입

//BigInt function으로 생성하거나
const oneHundred: bigint = BigInt(100);
//literal syntax로 bigint를 생성
const anotherHundred: bigint = 100n;

Symbol

• number, string 과 같은 기본자료형 ( ES2015부터 )

//Symbol 생성자를 호출해서 생성
let sym1 = Symbol();

//생성된 symbol은 불변하고 유일하기 때문에 아래 두개값은 비교했을 때 false
let sym2 = Symbol("key");
let sym3 = Symbol("key");
sym2 === sym3;

//심벌은 객체 프로퍼티의 키로 사용할 수도 있음
const sym = Symbol();

let obj = {
	[sym]: "value"
};

console.log(obj[sym]);  //"value"

Object

• property를 가지는 객체 타입
• 각 프로퍼티 구분할 때 , 또는 ; 를 사용
• 각 프로퍼티의 타입 표기 또한 선택사항인데 타입을 지정하지 않으면 any 타입으로 간주됨.
• 프로퍼티 이름 뒤에 ? 를 붙이면 옵셔널 property가 되서 필수로 필요하지 않은 값이 됨.
• 옵셔널로 선언되면 값이 안 들어온 경우 undefined로 로그 출력됨
• 옵셔널 프로퍼티 읽을 때는 undefined 일 수도 있으므로 undefined 여부를 먼저 확인해야됨.

function printName(obj: { first: string; last?: string }) {

  // ...
  console.log(obj.first);
  console.log(obj.last);
}

// 둘 다 OK
printName({ first: "Bob" });
printName({ first: "Alice", last: "Alisson" });

![[Pasted image 20221017132238.png]]

Union Type

• 기본 원시타입들을 조합해서 새로운 타입을 만들어내서 사용 가능
• 서로 다른 2개 이상의 타입을들 사용하여 만드는 것
• 배열과 조합하여 사용할 경우 Array.isArray(파라미터) 함수로 좁혀서 사용가능
• 유니언의 모든 멤버가 공통으로 가지는 프로퍼티가 있다면 좁히기 없이도 사용 가능
  예를 들어 배열과 문자열은 둘다 slice 메서드를 내장하고 있음.

function printId(id: number | string) {
	console.log("ID : " + id);
	//오류 : string 타입에만 유효한 메서드는 사용할 수 없음. 반대로 number 타입에만 유효한 메서드도 사용할 수 없음.
	console.log(id.toUpperCase());

	// typeof로 타입범위를 좁혀서 사용 가능
	if (typeof id === "string") {
		//여기는 string 타입
	} else {
		//여기는 number 타입
	}
}

// OK
printID(101);
// OK
printID("202");
// 오류 : number나 string에 해당하지 않기 때문에 오류
printId({ myID : 22342});

function welcomePeople(x: string[] | string) {
	if (Array.isArray(x)) {
		// 여기에서 'x'는 'string[]' 타입입니다
		console.log("Hello, " + x.join(" and "));
	} else {
		// 여기에서 'x'는 'string' 타입입니다
		console.log("Welcome lone traveler " + x);
	}
}

typeof guard

• 타입이 원시값인지 확인하여 타입을 좁히는 방법
• string 타입으로 리턴되고 number, string, boolean, symbol, bigint, undefined, object, function 형태로 리턴됨 ( 주로 원시타입들 )
• 위의 문자열들 이외에 다른 문자열과 비교하는걸 막지는 않지만, 타입가드 표현식으로 인지되지 않음.

in 연산자

type Fish = { swim: () => void };
type Bird = { fly: () => void };

function move(animal: Fish | Bird) {
	// n in x  = "swim" in animal
	// 여기서 n : swim 은 문자열 리터럴 타입이고
	// x : animal 은 유니언 타입
	if ("swim" in animal) {
		//swim 프로퍼티가 있는 Fish Type에 해당
		return animal.swim();
	}
	//swim 프로퍼티가 없는 Bird Type에 해당
	return animal.fly();
}

instanceof

• 생성자 함수를 사용하여 타입을 좁히는 방법

function logValue(x: Date | string) {
	if (x instanceof Date) {
		//logValue(new Date()); 로 함수 호출한 경우에는 이쪽으로 분기됨.
		console.log(x.toUTCString());
	} else {
		//new Date가 아닌 그 외 string의 경우 이쪽으로 분기
		console.log(x.toUpperCase());
	}
}

타입 별칭(Type Aliases)

• 새로운 타입이 아닌 정의한 타입을 나중에 쉽게 다시 사용할 수 있도록 이름을 부여하는 것
• 원시타입 말고도 interface 타입도 별칭 부여 가능

type Point = {
	x: number;
	y: number;
};

function printCoord(pt: Point) {
	console.log("The coordinate's x value is " + pt.x);
	console.log("The coordinate's y value is " + pt.y);
}

printCoord({ x: 100, y: 100 });

// 유니언 타입에 별칭을 부여한 경우
type ID = number | string;

인터페이스 (Interface)

• object 타입을 만드는 또 다른 방법
• 인터페이스를 파라미터로 적용 시 typescript에서는 인터페이스에 정의된 속성, 타입만 만족한다면 객체의 속성 갯수가 더 많아도 상관없고, 선언된 속성순서도 지키지 않아도됨.

interface personAge {
  age: number;
}

function logAge(obj: personAge) {
  console.log(obj.age);
}

//여기서 name 하나 더 들어갔다고 해서 오류 안나고
//age를 먼저 넣는다고 해서 오류 안남.
let person = { name: 'Capt', age: 28 };
logAge(person);

Readonly

• 처음 객체 생성 시 값을 할당하고 그 이후에는 변경할 수 없는 속성

//속성앞에 readonly 추가
interface Car {
	readonly brand: string;
}

let myCar: Car = {
	brand: 'Audi'
};

//readonly 속성이기 때문에 에러발생
//Cannot assign to 'brand' because it is a read-only property.
myCar.brand = "genesis";

함수타입

• 함수타입을 정의할 때도 인터페이스 사용가능

interface login {
	//함수인자 1,2의 타입정의 : 반환값의 타입을 정의
	(username: string, password: string): boolean;
}

//login 인터페이스를 이용하여 타입을 먼저 정의하고 
//그 다음 함수의 동작을 정릐
let loginUser: login;
loginUser = function(id: string, pw: string) {
	console.log('로그인 했습니다.');
	return true;
}

인터페이스 확장

//extends로 인터페이스간 확장 가능
interface Person {
	name: string;
}

interface Developer extends Person {
	skill: string;
}

타입별칭과 인터페이스

• interface가 가지는 대부분의 기능은 type 에서도 동일하게 사용가능
• 둘의 가장 큰 차이점은 확장 가능(interface) / 불가능(type)
• SOLID 원칙 중 O 에 따라서 확장이 가능한 interface로 선언하면 더 좋음.
  "언제나 확장이 용이해야함."

타입단언

• 개발자가 해당 타입에 대하여 확신이 있을 때 사용하는 타입 지정 방식
• 타입스크립트에서 특별히 타입을 체크하지 않고, 데이터의 구조도 신경쓰지 않음

let shouldString: any = 'hi';

//shouldString 이 string 타입인걸 확실히 알고 있는 경우
//typescript를 JSX와 사용할 때는 이 스타일로는 사용할 수 없음. 
let stringLength: number = (<string>shouldString).length;
//or 
//type assertions - as 문법으로 지정
let stringLength: number = (shouldString as string).length;

• JSX : Javascript를 확장한 문법. react 엘리먼트를 생성함. React 문서에 설명이 되어있는 걸 보니 리액트에서 사용하는 듯 => 그렇다면 우리가 실제 프로젝트를 할 때 assertions를 쓰는 경우에는 as 스타일로 써야함.