TS - TIL(1)

ts가 필요한 이유

js로 웹과의 상호작용이 증가하면서, 웹 에플리케이션이 필요로 하는 js코드의 양이 늘어났다.

이로 인해서 한계점이 부각되었는데, 한계점이 무엇이었을까?
js는 동적 타입이 결정되어서 유연하고, 다양한 라이브러리와 프레임워크를 사용할 수 있는 유연함을 지니고 있지만,
타입의 명시성이 부족하다는 단점이 있다.

const add (x, y) => {
	return x+y;
}

add(5,'1');

위와 같은 상황이라면 어떨까?
얼핏 드는 생각은, 자열에 숫자를 어떻게 더해?!😑지만,

js는 문자열과 숫자를 더할 경우, 숫자 타입의 인수를 강제적으로 타입 변환해 문자열로 변환한다.

이를 보완하기 위해서, 명시적으로 타입을 지정해주는 ts가 생긴것!

---

ts를 사용했을때의 장점을 보여주는 예시 코드는 아래와 같다.

interface User {
  id: number;
  name: string;
}

function greetingUser(user: User) {
	 console.log(`Hello, ${user.name}!`)
}

const parkUser = {
	id: 1,
  name: "박해커"
};

greetingUser(parkUser);

ineterface를 통해서 User의 정보를 정확하게 파악할 수 있다.
greetingUser함수에도 매개변수로 User 타입을 사용해 어떤 인자를 받고있는지 정확히 명시해준다.

---

TypeScript의 Type

Boolean타입

let isShow: boolean = true;
let isDone: boolean = false;

Number타입

let number1: number = 5;
let number2: number = 0.7;

string타입

let firstName: string = "coding";
let lastName: string = 'kim';
let longString: string = `Kimcoding is a developer.
He is 20 years old.`

array타입

//첫 번째 방법
let items: string[] = ["apple", "banana", "grape"];

//두 번째 방법
//제네릭 배열타입
let numberList: Array<number> = [4, 7, 100];

Tuple타입

//요소의 타입과 개수가 고정된 배열을 표현할 수 있다.
let user: [string, number, boolean] = ["kimcoding", 20, true];

Object타입

TypeScript에서 객체는 JavaScript와 마찬가지로 원시 타입이 아닌 타입을 나타냅니다. JavaScript에서 Object(객체) 타입은 프로퍼티를 가지는 JavaScript의 값을 말하며 typeof 연산자를 사용했을 때 “object”을 반환하는 모든 타입을 의미합니다.

JavaScript의 원시 타입에는 number, string, boolean, undefined, null, symbol이 있습니다.

let user: {name: string, age: number} = {
	name: "kimcoding",
	age: 20
}

Any타입

간혹 애플리케이션을 만들 때, 알지 못하는 타입을 표현해야 할 때도 있습니다. 클라이언트에서 유저로부터 받은 데이터 및 서드파티 라이브러리에서 들어오는 값인 경우 개발자가 알지 못하는 타입일 수 있는데, 타입 검사를 하지 않고자 할 때 any 타입을 사용할 수 있습니다.

any 타입을 사용하게 되면, 변수에 값을 재할당하는 경우 타입을 명시한 변수와 달리 타입에 구애받지 않고 값을 재할당할 수 있게 됩니다.

let obj: object = {};

//에러가 납니다.
obj = "hello";

let maybe: any = 4;

//정상적으로 동작합니다.
maybe = true;

또한 엄격한 타입 검사를 진행하지 않기 때문에, 실제 할당된 값이 가지지 않는 메서드 및 프로퍼티로 접근해도 에러가 나지 않습니다. 대신, 실제 할당된 값이 가지지 않는 메서드 및 프로퍼티이기 때문에 반환되는 값은 undefined입니다.

let maybe: any = 4;

//undefined로 출력됩니다.
console.log(maybe.length);

또한 any 타입은 타입의 일부만 알고, 전체는 알지 못할 때 유용합니다. 예를 들어서 여러 타입이 섞인 배열을 받고자 할 때 유용합니다.

let list: any[] = [1, true, "free"];

//any로 다루고 있기 때문에 index 1번째 요소가 boolean 타입이지만 number 타입으로 재할당할 수 있습니다. 
list[1] = 100;