TypeScript 문법

{
	"compilerOptions": {
    "target" : "es5",
    "module : commjs"
    
    }
}

1. tsconfig.json 파일에서 target 부분에 내가 사용할 JavaScript 버전을 써주면 그 버전을 사용할수있음

 

2.

let 숫자 :number = 123;

변수명 옆에  ==> : (기본자료형)   

넣어줄때 변수타입을 지정할수 있다. number 말고도

string / boolean /null

any : 아무타입이나 가능

let anything: any = 123;
anything = "문자"; // 가능
anything = true;   // 가능

unknown : any 타입 외에 어떤 타입에도 할당할 수 없음

let unknownValue: unknown = "hello";
// let num: number = unknownValue; // ❌ 에러
if (typeof unknownValue === "string") {
  console.log(unknownValue.toUpperCase()); // ✅ 타입 좁히기 후 사용 가능
}

 

void

 

never (절대발생할 수 없는 타입)

function throwError(): never {
  throw new Error("에러 발생!");
}

array  => 변수명 : (type) = (들어갈 데이터);

let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["민호", "철수"];

tuple : 요소의 타입과 갯수가 고정된 배열

 

object

let 카페명 : {cafeName : string} = {cafename : 'starbucks'}
==> 무조건 {cafeName : string} 이렇게 생긴 object 자료만 들어올 수 있다

let 카페명 : {cafeName?  : string} = {cafename : 'starbucks'}
==> {cafeName? : string}  cafeName 속성이 들어오지 않을 수도 있다 라는 의미

 

union : 다양한 타입이 들어올수있다는 표시? 

let value: string | number;
value = "Hello"; // 가능
value = 123;     // 가능

literal type : 특정값만 허용

let direction: "left" | "right";
direction = "left";  // 가능
// direction = "up"; // ❌ 에러

 

 

만약에 변수타입이 길경우?

type mytype = number | boolean;
let num: mytype = 98; // 첫 번째 선언
num = true; // 재할당

type (변수명) = (변수타입) 

이렇게 써주면 

---

function myfuc(x :string) :string { 
	return '시원하당'
}

이렇게 매개변수와 return 타입 지정도 가능

---

Object에 타입지정해야할 속성이 너무 많을경우

 

내가 정한 타입의 코드가 길 경우에는 배열타입을 아래 코드와 같이 만들게 된다면 순서도 지켜줘야한다 

type my = [number,string]; // 첫번째는 number, 두번째는 string
let zone :my =[199, 'haha'];
let z2 :my = ['haha',100]; // error

==> 튜플 타입

 

type Member = {
    name : string;
}

let mycompany : Member = {
    name : "hoge"
};

==> 딕셔너리 타입

 

 

type Member = {
    [key: string] : string;
}

let mycompany : Member = {
    name : "hoge",
    age : 20,
    department : "sales"
};

 

모든 Object의 속성들은 string을 가져야한다

 

나는 또다른 예제를 만들어봤다

type amount = {
    [key : string] : number;
}

let mcdonalds : amount = {
    bigmac : 300,
    fries : 200,
    drink : 150
};

 

"이 객체는 어떤 string 타입의 키를 가져도 되지만, 그 키에 할당되는 값은 무조건 number여야 한다" 라는 뜻, 즉 아직 알 수 없는 모든 속성을 의미한다, 그 속성의 키와 값에 대한 타입을 미리 지정해 에러가 나지 않도록 하는 좋은 코드이다.

==> 이 코드 덕분에 유연하면서도 타입 안정성을 확보할 수 있게 되는 것이다.

==> [key: string] 이런 코드를 인덱스 시그니처라고 부른다

 

 

출처 : https://www.youtube.com/watch?v=xkpcNolC270