TypeScript

TypeScript란?

TypeScript는 자바스크립트의 문법을 사용하는데 타입을 정하여 사용하는 언어이다.
그런데 새로운 언어로보기다는 애매하고 자바스크립트의 에디터로 부가기능으로 봐도될듯하다.
하지만 typescript에서만 지켜야할 규칙도있고 타입외의 문법도있어 따로 공부해본다.

자바스크립트의경우 Dynamic Typing을 지원하여 자유도가 높아 3 - '3'고 계산이 가능하다
무슨말이냐면 숫자형은 숫자형으로만 계산이 가능한데, 위는 숫자형 - 문자형을 js가 문자형을 숫자로 알아서 바꿔줘서 계산해준것이다.

프로젝트가 작을경우에는 좋은기능이지만 프로젝트가 클경우 이러햔 자유도는 독이 된다.

타입스크립트의경우 타입을 정해서 사용하기때문에 에러로 타입이 다르다고 알려주며 타입이 정해짐으로써 에러메세지가 좀더 구체화되는 장점이 있다.

이렇게 타입을 지정하여 오류를 미연에 방지할 수 있어 안정성이 높다는게 타입스크립트의 장점인데, 사실 타입스크립트는 값을 할당하면 그 값의 타입으로 자동적으로 타입을 지정해준다.
그래서 타입지정 문법을 생략해도 된다고한다.🤔

설치 및 준비

1.nodejs 최신버전 설치

사람들은 최신버전을 추천하는데 나는 안전한 LTS를 선호한다. 취향껏설치하자.

2. VScode 설치

3. 터미널로 타입스크립트 설치

npm install -g typescript

4. 타입스크립트를 사용할 폴더를 만들고 vscode로 사용할 폴더를 불러온다.

mkdir projectName

5. index.ts 파일을 생성한다.

아무이름이나 괜찮은데 나는 index로 만들었다.
index.ts파일에는 코드를 짜면된다.
그런데 브라우저는 js파일만 읽을수 있기떄문에 아래처럼 작성된 ts파일은 읽지 못한다.

let a = "TS";

그래서 ts파일을 js로 변환해야하는데 이 변환하는 과정을 compile이라 한다.
컴파일방법은 terminal을 열고 tsc -w 를 치면 자동으로 ts파일을 js파일로 변환해준다.

tsc- w(typescript watch)는 실시간으로 타입스크립트 파일의 변동을 확인하여 자바스크립트 파일로 변환하여 생성해준다.(꺼버리면 실시간변환 불가.)

6. tsconfig.json 파일을 생성한다.

tsconfig.json에는 컴파일시의 옵션을 설정한다.

{
  "compilerOptions": {
    "target": "es6", //자바스크립트 몇 버전으로 바꿀 것인가
    "module": "commonjs" //언제의 자바스크립트 문법을 쓸 것인가
  }
}

target은 ts파일을 몇버전의 js파일로 바꿀지 정하는 부분이다.
es5로 바꾸고 저장하면 var로 선언하고 es6로하면 let으로 자동으로 바꿔주는게 너무 신기하고 재밌다.
최신버전은 esnext로 지정하면 최신 버전으로 컴파일 해준다.
module은 js파일에서 import를 어떻게 할지 정하는 부분이다.

commonjs : require > es6 이상: import

Type 종류

타입 종류	설명	예시 or 설명2
string		let a:string ="문자열";
number		ㅣlet num:number = 123;
boolean		let a:boolean = true;
null		let a: string | null = null;
undefined		let job: undefined = undefined;
[ ]	설정된 타입의 배열만 들어올 수 있다.	let num : number[ ] =[1,2,3];
{ }	객체의 속성을 지정한다.	let num : { one? : number } = { one : 1 };
bigint		let bigNumber: bigint = 999888777666555444333;
any	js처럼 아무 타입의 값을 할당할 수 있다.	let a: any = value;
unknown	any와같이 아무 타입이나 넣을수 있다.	let a: unknown = value;
never	어떠한 값도 할당 할 수 없다.	function a( ): never {throw new Error("error")}

기본타입

변수 타입 설정

let a: string = "TS";

typescript는 변수 옆에 타입을 정할 수 있는데 타입을 여기에는 지정된 타입민이 들어올 수 있다.

array에 쓸 수 있는 tuple타입

tuple type은 반드시 정해진 인덱스에 정해진 타입이 들어와야한다.

type ArrayType = [string, boolean];

let arr: ArrayType = ["JS", false];
//절대로 첫번째 타입은 number이고 두번째타입은 boolean이여야한다.

object에 type지정

et music :{ singer : string, song: string } = {
  singer: "Taylor swift",
  song: "RED"
}

object에 지정해야할 type 속성이 너무 많으면 아래처럼 타입을 변수로 설정해서 사용할 수 있다.

type MyType = { [key : string] : string] }
//string으로 들어오는 object속성의 타입은 string이라는 변수MyType을 생성.
let kim : MyType = { name : " su", age: '10'}

---

타입을 미리 정해둘 수 없을때

1. Union type

union 타입은 논리합연산자|를 사용하여 다른 타입도 들어올수 있게 설정해두는 것이다.
유니온타입으로 정의된 변수는 값이 할당될때 타입이 |로 정의된 타입중의 하나로 정해진다.

let ran: string | number = "3";
//  a라는 변수에는 string 또는 number가 올 수 있다고 정의되어있다.
// 할당된 ㄱ밧은 문자열이므로 string으로 타입이 정해진다.
let ran: string | number = 3;
// 같은 이유로 숫자형으로 a의 타입이 정해진다.

2. any type

any타입은 자바스크립트처럼 아무 값이나 넣을 수 있는타입이다.
그래서 아무타입이나 넣어도 에러가 나지않지만 타입관련 에러가 날 경우 찾기가 힘들다는 단점이있다.
하지만 급하게 타입에러가 났을때 타입규제를 푸는 용도로 쓸 수도 있다.

let a: any = "kim";
a = 123; //123
a = []; //[]
a = true; //true

3. unknown type

unknown타입은 any타입과 같이 모든 타입의 값을 넣을 수 있다.
any와의 차이점은 다른변수에 할당하거나 사용할때 타입을 강제하여 any에서 발생하는 오류를 줄여준다.
타입이 어떤것이 올지 모르지만 좀더 안전하게 쓰고싶다면 any보다 unknown타입을 쓰자.

let a: unknown = "kim";
a = 123; //123
a = []; //[]
a = true; //true

🚫에러가 나는 이유

let a: unknown;
a - 1;
a[0];

let b: string | number;
b - 1;

타입스크립트는 타입이 정확하게 정해지지않으면 연산을 수행하지 않는다.
그래서 unknown타임에서 number타입을 뺄 수 없으며, string인지number인지도 정해지지않아 number타입이 아니므로 에러가 발생한다.

---

type alias

타입은 변수에 담아 쓸 수도 있다. 변수는 보통 식별자와 구분하기 쉽게 대문자로 쓴다.

type MyType = number[] | string[];

let ran: MyType = 123;

함수에 타입 지정

함수에도 타입을 지정할 수 있다.

function sum(x: number): number {
  return x + 5;
}
//파라미터 x에 number가 들어와야하며 return 값도 number여야한다.

Optional Property(?)

?(옵셔널 체이닝)은 선택옵션으로 변수? 뒤에 설정된 타입의 값이 올수도 있고 없을수도 있다고 설정하여 없을경우에도 에러를 반환하지 않게하는 옵션이다.
?를 정확히 표현하면 변수? type 은 변수 : type | undefined으로 유니온타입과 같다.

let me: { name: string; age: number; locate?: string } = {
  name: "kim",
  age: 20,
};

위 처럼 작성하면 객체의 속성값에 locate를 적지않아도 적혀진 값만을 출력한다.
하지만 ?를 빼면 locate속성이 필수인데 빠졌다는 에러를 반환한다.

class에 type 지정

class User {
    name : string; //class는 미리 변수를 선언하고 타입을 지정해야한다.
    constructor(name : string){ //여기도 타입을 지정해주는편이 안전하다.
        this.name = name;

---

음 쓰다보니 너무길어져서 나눠서 다시 정리해야겠다.