✨TypeScript✨

🧡타입선언

💛string

  const red:string = "red"
  const green:string = "green"
  const myColor:string = `My Color is ${red}.`
  const yourColor:string = 'Your Color is' + green

💛number

  const integer: number = 6
  const hex: number = 0xf00d //61453
  const nan: number = NaN

💛Boolean

  const isBoolean: boolean = true
  const inDone: boolean = false

💛Null, Undefined

• null과 undefined는 모든 타입의 하위타입
• 그러나 엄격한 타입문법에서 변수에 직접할당은 불가능함
• void타입에는 undefined를 할당할 수 있다

  // 직접할당 불가능
  const str:string = null //Error!
  const num:number = undefined //Error!

  //void에 undefined할당은 가능
  const voi1: void = null //Error!
  const voi2: void = undefined //Ok!

• 변수에 값을 지정하지 않으면 않으면 undefined가 됨
• 그러나 값이 지정되지 않은 변수의 호출은 Typescript상에서 에러발생

  //초기화 하지 않은 변수 (사용불가)
  let str: string
  let num: number
  console.log(str) // Error! - 변수가 할당되기 전에 사용됨
  console.log(num) // Error! - 변수가 할당되기 전에 사용됨

  //초기화 된 변수는 사용가능
  let str: string = ''
  let num: number = 0
  console.log(str) // OK!
  console.log(num) // OK!

💛Array

• 배열안에 들어올 아이템의 타입을 미리 지정

아이템의 타입이 한가지일때

• 방법 1 : 아이템타입[]

  const fruits: string[] = ['Apple', 'Banana', 'Cherry']
  const numbers: number[] = [1, 2, 3, 4, 5, 6]

• 방법 2 : Array<아이템타입>

  const fruits: Array<string> = ['Apple', 'Banana', 'Cherry']
  const numbers: Array<number> = [1, 2, 3, 4, 5, 6]

유니언타입 ( 여러가지 타입의 아이템을 동시에 가지는 배열 )

• | (버티컬바) : js의 ||와 같음

  //방법1
  const uni: (string | number)[] = ['one', 2, 'three', 4, 'five']
  const numbers: (string | number)[] = [1, 2, 3, 4, 5]
  const month: (string | number)[] = ['jan', 'feb', 'mar', 'apr']
  
  //방법2
  const uni: Array<string | number> = ['one', 2, 'three', 4, 'five']
  const numbers: Array<string | number> = [1, 2, 3, 4, 5]
  const month: Array<string | number> = ['jan', 'feb', 'mar', 'apr']

인터페이스 / 커스텀타입

• 배열 안에 객체가 들어갈 때

  interface User {
    name: string,
    age: number,
    isValid: boolean
  }

  const userArr: User[] = [
    {
      name: 'Neo',
      age: 85,
      isValid: true,
    },
    {
      name: 'Lewis',
      age: 52,
      isValid: false,
    }
  ]

특정한 값으로 타입지정

  let ten: 10[]
  
  ten = [10] //Ok!
  ten = [10, 10, 10] //Ok!
  ten.push(10) //Ok!
  ten.push(11) //Error!

💛튜플

• 정해진 타입의 고정된 길이 배열을 표현

  //첫번째자리에는 string, 두번째 자리에는 number 인 길이 2 의 배열
  let tuple: [string, number]

  tuple = ['a', 1];
  tuple = ['a', 1, 2]; //Error!
  tuple = [1, 'a']; //Error!

• 이중배열

  let users: [number, string, boolean][]

  users = [[1, "NEO", true], [2, "Even", false], [2, "Lewis", true]]

• 길이와 타입이 정해져있으나 직접 할당에서만 유효함
• push나, splice등의 메소드로 인해 배열이 변하는 걸 막을 수는 없다

  let tuple: [string, number]
  tuple = ['a', 1]
  tuple = ['b', 2]
  tuple.push(3)
  console.log(tuple) // ['b', 2, 3]

💛Any

• 모든 타입을 의미
• 불가피하게 타입을 단언할 수 없는 경우를 제외하고 가능한 쓰지 않는것이 좋음

  let any: any = 123
  any = 'Hello world'
  any = {}
  any = null

💛unknown

• 알 수 없는 타입을 의미
• Any처럼 어떤 타입의 값도 할당될 수 있지만 unknown을 다른 타입에 할당할 수는 없다

let a: any = 123
let u: unknown = 123

const boo1: boolean = a // any를 다른 타입에 할당하는 것은 가능
const any1: any = u // unknown을 any에 할당하는 것은 가능
const num1: number = u // Error! unknown은 any를 제외한 어떤한 타입에도 할당할 수 없다
const num2: number = u as number //타입 재단언

💛Object

• 기본적으로 typeof 연산자가 'object'로 봔환하는 모든 타입을 나타냄
• 사용을 권장하지않음 (너무 포괄적)

let obj:object = {};
let arr:object = [];
let func:object = function() {};
let dat:object = new Date();

• 더 정확한 타입지정을 위해 다음과 같이 객체속성 타입을 개별지정
• 그러나 이또한 같은 형태의 객체가 반복될 때 타입을 재활용 할 수 없기때문에 권장되지 않음

//객체속성 타입 개별 지정
const userA: {name: string, age: number} = {
  name: "Heropy",
  age: 12
}

//같은 형태의 객체가 있을 때 타입 재활용 불가능
const userB: {name: string, age: number} = {
  name: "Neo",
  age: 35
}

• 타입의 재활용을 위해 interface나 type을 활용하는 것이 좋음

  interface User {
    name: string,
    age: number
  }

  const userA: User = {
    name: 'HEROPY',
    age: 123
  }

  const userB: User = {
    name: 'Neo',
    age: 85,
    email: 'abc@gmail.com' // Error
  }

💛Void

• 값을 반환하지 않는 함수 (= 리턴값이 없는 함수)
• 값을 반환하지 않는 함수의 반환값은 기본적으로 undefined이나 , 타입을 undefined로 지정할 수는 없다

function hello():void {
  console.log('hello')
}

function bye():undefined { //Error
  console.log('bye')
}

//undefined를 직접적으로 반환하는 경우에만 타입을 undefined로 지정 가능
function unde():undefined { //Ok
  return undefined
}

💛Never

• 절대로 발생하지 않을 값
• never타입에는 어떠한 타입도 적용 할 수 없다
• 코드 작성시에 직접 사용 할 일은 없을것임... (but 에러메세지에서 자주 등장!)
• 타입을 직접선언하지 않으면 never타입이 자동 할당 됨

// 배열내에 어떠한 타입도 명시하지 않아 never라는 타입이 자동 할당 됨
const arr: [] = []
arr.push(3) // Error! - 숫자 '3'은 'never' 타입의 매개변수에 할당할 수 없습니다.(2345)

💛유니언 Union

• 2개이상의 타입을 허용
• | (vertical bar)로 타입을 구분
• 'or' 의 의미 ( || )와 같음

let union: (string | number)
union = 'hello'
union = 123
union = true // Error!

💛인터섹션

• &를 사용해 2개 이상의 타입을 조합
• 'and'의 의미 (&&)와 같음

interface User {
  name: string,
  age: number
}

interface Validation {
  isValid: boolean
}

const heropy: User & Validation = {
  name: 'heropy',
  age: 24,
  isValid: true
}

💛함수 Function

• 방법1
  • 화살표함수를 이용해 타입을 지정
  • 인수의 타입과 반환값의 타입을 입력

// 2개의 숫자타입 인수와, 숫자타입의 반환데이터
const myFunc: (arg1: number, arg2: number) => number = function (x, y) {
  return x + y 
}

// 인수와 반환이 없는 경우
const yourFunc: () => void = function() {
  console.log('hi')
}

• 방법2
  • 인터페이스를 활용할 수 있다

interface MyFunc {
  (x: number, y: number): number
}

const myFunc: Myfunc = function (x, y) {
  return x + y
}

interface User {
  name: string
  age: number
  getName(m: string) : string
}

const heropy: User = {
  name: 'Heropy',
  age: 85,
  getName(message) {
    return `${message}, ${this.name}`
  }
}