typescript란?
말 그대로 javascript에 type을 부여하여 작성하는 언어이다
근데 꼭 타입스크립트로 개발 할 필요가 있을까?
꼭 타입을 지정해줘야만 할까?
1. JavaScript and More
TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor.
2. A Result You Can Trust
TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno and in your apps.
3. Safety at Scale
TypeScript understands JavaScript and uses type inference to give you great tooling without additional code.
위와 같이 공식문서를 참고하자면, 자바스크립트를 더 효율적으로 쓸 수 있으므로 타입스크립트가 좋다~ 그러나 어떻게 효율적이고, 얼마만큼 효율적이기에 타입을 지정해주는 귀찮음을 감수하고 타입스크립트를 쓰는지 !
-> 결국 타입스크립트는 협업과 유지보수성에 최고다. type을 지정해주면 오류도 줄어들 뿐더러, props를 전달해야할 때 컴포넌트측에서 type을 interface로 먼저 선언해두면 효율적으로 개발이 가능하다.
타입스크립트의 타입
타입스크립트 문법에는 두가지 공간이 있다.
값 공간과 타입 공간이 있다.
- 값 공간(value): string, 숫자, 객체 등 구체적인 값이 들어가는 공간. 자바스크립트로 변환되어도 유지된다.
- 타입 공간(type): 타입이 들어가는 공간. 자바스크립트로 변환되면 사라진다.
일반적으로 우리가 변수나 함수를 선언하면 값 공간에 선언되고, 타입을 선언하면 타입공간에 선언된다.
- 타입 추론: 명시적으로 타입 선언이 되어있지 않은 경우, 타입을 추론해 제공한다.
- 타입 단언: 타입 추론을 통해 판단할 수 있는 타입의 범주를 넘는 경우, 더 이상 추론하지 않도록 지시할 수 있다.
- Non-null 단언 연산자: null이나 undefined값이 아님을 단언할 수 있다.
function fnE(x: number | null | undefined) {
return x!.toFixed(2)
}
document.querySelector('.menu-item')!.innerHTML타입정의 방식
타입을 정의하는 방식에는 types와 interfaces 두 가지 방식이 존재한다.
type의 종류에는 string, boolean, number, array, tuple, enum등이 있다.
- type aliases(타입별칭): type들에게 닉네임을 붙여주는 일, 새로운 타입을 정의하는 느낌이 아니라 우리가 만든 타입에게 이름 하나를 붙여주는 것
type MyNumber = number;
type User = {
id: number;
name: string;
email: string;
}- interface: object가 따라가야만 하는 규칙 또는 요구사항의 집합이다. 이러한 요구사항을 명확히 함으로써 client에는 name과 adress가 있어야한다~ 라고 에러를 알려주는 것이다. 따라서 client가 어떻게 구성되어야 하는지에 대한 설계도를 제공하는것과 같다.
interface Client {
name: string;
address: string;
}-> 기존의 구조를 결합하거나 수정해야할 때 interface
(선언한 것들을 병합하거나 확장하기에 용이)
-> 더 강력한 기능을 요구할 때 type
(조건부 타입, 제네릭 타입 등 더 심화된 도구 제공)
타입 미리 정하기 애매할 때
- 가장 좋은 Union type 사용하기
let 이름: string | number = 'kim';
var 오브젝트: {data : (number | string) } = { data : '123' }- any 타입 지정
-> 아무 자료나 집어넣을 수 있지만, 타입 관련 버그가 생기면 왜 그런지 추적하기가 어려워지므로, 남용했을 때 치명적이다. - unknown 타입 지정
-> any와 같이 모든 타입을 집어넣을 수 있다.
let 이름: unknown = 'kim';let 학교 : {
score : (number|boolean)[],
teacher : string,
friend : string | string[]
}
= {
score : [100, 97, 84],
teacher : 'Phil',
friend : 'John'
}
학교.score[4] = false;
학교.friend = ['Lee', 학교.teacher]참고
https://velog.io/@ilmerry/Typescript%EB%A5%BC-%EA%BC%AD-%EC%8D%A8%EC%95%BC%ED%95%A0%EA%B9%8C
https://cdragon.tistory.com/entry/TypeScript-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-interface-vs-type
https://lunatk.github.io/2021/02/07/20210207-type-in-typescript/
https://www.heropy.dev/p/WhqSC8
https://codingapple.com/unit/typescript-multiple-types-or-any-unknown/
