230116_TIL

휜·2023년 1월 16일

TypeScript

✅ Type Safety

Type Safety

Javascript가 이상한 동작을 수행하도록 허용하지 않음.

// javascript
2 + "2" 
// return : 22, 맨 처음에 문자열로 숫자를 더하는 작업을 중지했어야 함.

이것은 유형의 불일치.
Javascript는 이런 오류를 바로잡지 못하는 것을, Typescript는 runtime시, Error를 띄워 바로잡을 수 있다.

Static Checking (정적검사)

✅ Typescript가 제공하는 유일한 작업. 정적 검사만을 위해 존재한다.

이는 코드를 분석하고 이해하는 데 도움이 된다.
Static checking은 많은 언어에 존재하는데, 대표적으로 Java OR GoLang 등이 있음.

TS는 단순히 코드를 분석하는 것임.

TS 파일은 ts OR tsx로 작성할 수 있음.

TS는 JS위에 있는 레이어일 뿐이다.
TS로 작성을 했지만, 결국에 JS로 컴파일되어 표시된다.

TS는 JS의 슈퍼 세트 같은 느낌이다.

JS의 개발도구로 볼 수 있다.
➡ TS는 독립 언어가 아니다. JS에 굉장히 의존하고 있기 때문이다.
JS를 쉽게 확장 가능하고 유지 관리가 가능한 코드로 문제가 적고 더 나은 코드를 만들어 주는 도구다.

Type

TS 공식문서

Number
String
Boolean
Null
Undefined
Void
Object
Array
Tuples
Couple
Any 🔥 ✔️
Never ✔️
unknown ✔️

Syntax

let variableName : type = value
const variableName : type = value

⭐️ 변수 이름에 콜론:을 넣고 Type을 정의해야 한다.

⭐️ TS에서는 모두 소문자로 작성할 것. ✨method는 제외

TypeScript에는 대문자, CamelCase가 없다.
소문자와 숫자만 있을 뿐..

greetings라는 변수에는 Type이 string으로 지정됨.

해당 변수에 6이라는 Number Type과 True를 입력 시, Editor에서 해당 타입은 변수에 할당할 수 없음을 알려준다.

Type을 지정해준 변수에 .을 붙혀주면, 해당 Type의 Method만 골라서 보여준다.

변수 속성에 맞지않는 Type의 method를 적용하면, Editor에서 해당 method 속성이 없다고 알려준다.

Any

Type 검사를 유발하는 특정 값을 원하지 않을 때 사용.
any는 특별한 유형(Type)이 아니다.

boolean, string, number∙∙∙ Any는 Type에 해당하지 않음을 뜻한다.

any (일반 any)
noImplicitAny (암시적 any)

암시적 any를 오류로 인식한다.

TS Function

인자로 들어가는 것에도 Type 지정이 가능하다.

⭐️ 인자로 들어가는 변수에도 Type을 꼭 지정해주어야 한다.

Code

정해진 타입의 인자가 전달되지 않으면 Error를 표시한다.

정해진 타입의 인자가 전달될 때, 코드가 정상 작동된다.

tsc로 열어서 JS로 Compile했는데, boolean값에 null이 들어가서 여쭤봤더니
허허 ts-node로 환경설정 하지 않고, 실행해서 강제로 실행된 꼴이라고 말씀하셨다.
환경설정.. 유튭으로 4시간 30분짜리 튜토리얼 다 보고 설정해야겠다.

// TS practice Code
function addTwo(num : number) {
  // return num + 2
  return "Hello"
}
console.log(addTwo(15));   // return num + 2 하면 17이 출력된다.

🔥 let myValue = addTwo(5)
🔥 console.log("myValue : ", myValue); 
// 다른 변수에 파라미터 Type과 관계없는 Return값을 적용했을 때, 정상 출력된다.



function getUpper(text : string) {
  return text.toUpperCase()
}
console.log(getUpper("Hi, Jain Doe"));

function signUpUser(name : string , email:string , isPaid : boolean) {
 return [{name : name, email : email, isPaid : isPaid}]
}
console.log(signUpUser("Hwuiinn", "Yeah@lab.kr", false));

function mySignUpUser (id : string, pw : number) {
  return [{userId : id, userPw : pw}]
}
console.log(mySignUpUser("hello12", 121212));

let loginUser = (name : string, email : string, isPaid : boolean) => {
  if (isPaid === void 0) {
    isPaid = false;
  }
  return  [
      {name : name,
      email : email,
    }
  ]
}
console.log(loginUser("Hwuiinn", "TS@lab.ts", false)); 
🔥 // console.log(loginUser("Hwuiinn", "TS@lab.ts", null)); 

// ------------------------------------------------------------
// 함수에 Type을 지정.
// getValue() 함수가 return 값은 string이어야 한다.
// getValue() : string
function getValue(myVal : number) : string {
  if(myVal > 5) {
    return "I'm Winner !!"
  } else {
    return "I'm loser.."
  }
}
console.log(getValue(6));

export {}

🔥 Error Code Fix

인자에만 Type을 지정했을 경우, TS에서 Error없이 그냥 Return값을 넘겨줌

addTwo()라는 함수 자체에 Type을 부여 addTwo() : number하자마자
Return값에 number형식에 string을 할당할 수 없다고 Error가 뜬다.

TS Object

함수 내에서 객체를 인자로 넣을 때, 다소 기괴함.

⭐️ function functionName() : { Parameter : Type, Parameter : Type, .. } { Code }

function createCourse() : {name : string, price : number}{
  return {
    name : "reactTS",
    price : 599,
  }
}
console.log(createCourse());

TS Type 생성

Type 생성자를 이용하여 Custom Type을 만들 수 있다.

? 처리된 것은 Optional이다. 필수로 줘야할 값이 아님.

type User = {
  readonly _id : string;
  name : string;
  email : string;
  isActive : boolean;
  creditCardDetails? : number; // optional 선택적 변수 
} // type 생성자를 이용하여 직접 type을 만들 수도 있다. 

type CreditCardNumber = {
  cardNumber : string;
}

type CreditCardDate = {
  cardDate : string;
}

//   (코드들의 의존성 높음)
type cardDetails = CreditCardNumber & CreditCardDate & {
  cvv : number;
}

Custom Type에 readonly라는 불변성을 주었을 경우, 읽기만 할 수 있음.
기존 정의된 type을 사용하여 새로운 type을 정의하는 방법

TS Array

// 문자열 배열 생성
const superHeros : string[] = []

superHeros.push("spiderman")

// 숫자 배열 생성
const numArr : number[] = []
const numArr : Array<number> = [] // <>안에 type을 작성해주면 된다.

numArr.push(1,2,3,4,5)

// boolean 배열 생성
const booleArr : boolean[] = []

booleArr.push(true, false)

TS Union

|를 이용하여 더 많은 데이터 타입을 허용할 수 있음.
이는 여러 타입의 데이터를 가질 수 있음을 뜻한다.

유니온 타입(Union Type)이란 자바스크립트의 OR 연산자(||)와 같이 A이거나 B이다 라는 의미의 타입입니다.

Code

// Union
let score : number | string | boolean = 33 // |를 이용하여 더 많은 데이터 타입을 허용할 수 있다.

score = 44;
score = "55";
score = false;

type Admin = {
  userName : string;
  id : number;
}

let Hwuin : User | Admin = {
  name : "Hwui",
  id : 43332
}

Hwuin = {userName : "King", id : 3234}

function getDBId(id :number | string ) {
  // making some API calls
console.log(`DB id is : ${id}`);
}

getDBId(3)
getDBId("3")

// 대소문자는 문자열 및 숫자 유형에 존재하지 않으므로 처리하고 있음.
function getDBId(id :number | string ) {
  if (typeof id === "string") {
    id.toLowerCase()
  }
}

// array
const data : number[] = [1,23,3]
const data2 : string[] = ["1","23","3"]

// 여러 타입의 배열 만들기
const data3 : (string | number)[] = ["1","23","3",4,5,6,7]

대소문자는 문자열 및 숫자 유형에 존재하지 않으므로 처리하고 있음.
여러 타입을 가질 수 있도록 해주려면 Type을 ()로 감싸주면 된다.

const data3 : (string | number)[] = ["1","23","3",4,5,6,7]

변수에도 union을 적용할 수 있음. 해당 코드에서는 변수에 지정된 3개의 문자열만 들어갈 수 있음을 알 수 있음.

TS Tuple

Tuple은 Array처럼 생겼다.
튜플은 배열 순서가 중요하다. 따라서 배열 내부에 무엇이 있는지가 중요하다.
API 호출의 경우 매우 유용하거나 일부 데이터베이스 배열에 사용 가능하다.
어떤 특정 순서가 있는지 배열에 몇 가지 좋아요가 있을 수 있으며, 이들 각각의 좋아요는 누군가 좋아요를 할 때를 기준으로 삽입된다.
튜플은 Order를 받도록 제한하는 것이다.

// Tuple
// 튜플의 경우 배열의 순서조차도 배열 내부에 무엇이 있는지가 중요하다.

// const user : (string | number)[] = [1, 'hc']
let tUser : [string, number, boolean]

tUser = ["hc", 131, false] 

let rgb : [number, number, number ] = [255, 155, 252]
console.log(rgb);

type User = [number, string]

const newUser : User = [34534543, "exam@google.com" ]



export {}

TS Enams

항상 첫 번째 값이 0이 된 다음 후속 값은 증분 번호를 얻음. 증분번호가 마음에 들지 않는다면, 번호를 정해줄 수 있다.

<번호를 주지 않았을 때>

Enams 순서대로 2번이다.

<번호를 따로 할당 했을 때>

할당된 번호대로 10번을 가진다.

code

// enams
// 누군가의 선택이나 값의 변경을 제한하고 싶을때가 있음.
// 예시 : 전자 상거래 응용 프로그램에서 누군가가 원하는 주문을 하는 경우, 주문 상태를 실제로 제한하여 주문이 위시리스트에 있거나 배송될 수 있도록 한다.

enum SeatChoice {
  AISLE, // 항상 첫 번째 값이 0이 된 다음 후속 값은 증분 번호를 얻음. 증분번호가 마음에 들지 않는다면, 번호를 정해줄 수 있다.
  MIDDLE,
  WINDOW, 
  FOURTH
}

const hcSeat = SeatChoice.WINDOW

TS Interface

type 생성자와 interface의 차이
code

interface User {
  readonly DBid : number,
  email : string,
  userId : number,
  googleId? : string
  // startTrail : () => string
  startTrail() : string
  getCoupon(couponName : string, value : number) : number
}

interface User {
  githubToken : string
}

interface Admin extends User {
  role : "admin" | "ta" | "learner"
}

const Kim : Admin = { DBid : 22345, email : "K@nave.rcom", userId : 4435, githubToken : "gitHub", role : "admin",
startTrail : () => {
  return  "메소드 반환 성공."
  // return  55432
},
getCoupon : (name : "Jung", off : 10) => {
return 12
}
}