type alias

변수만드는 것 처럼 type 이라는 키워드를 쓰면 된다.
type 키워드 쓰는걸 type alias 라고 합니다.

type Animal = string | number | undefined;
type AnimalObj = {name: string, age:number}

let animal: Animal;
let animal2: AnimalObj;

type 타입변수명 = 타입종류
일반 자바스크립트 변수랑 차별을 두기 위해 관습적으로 타입변수명은 대문자로 시작합니다. 또는 타입변수명+Type 이런 식으로 작명하는 방법도 있음.

object 타입 type alias

type Person = {
  name : string,
  age : number,
}

let teacher: Person = { name : 'john', age : 20 } 

readonly

readonly로 타입 수정 불가능하게 만듬

const 변수는 값이 변하지 않는 변수를 만들고 싶을 때 쓴다. 하지만 object 자료를 const에 집어넣어도 object 내부는 마음대로 변경가능 하다.
const 변수는 재할당만 막아줄 뿐이지 그 안에 있는 object 속성 바꾸는 것 까지 관여하지 않기 때문입니다.
object 속성을 바뀌지 않게 막고 싶으면 타입스크립트 readonly를 쓴다.

type Girlfriend = {
  readonly name : string,
}

let 여친 :Girlfriend = {
  name : '엠버'
}

여친.name = '유라' //readonly라서 에러남

타입스크립트 에러는 에디터&터미널에서만 존재함, 실제 변환된 js파일은 에러없음

object 속성 선택사항

object 자료는 color 속성이 선택사항이라면 물음표연산자를 추가하면 됨.

type Square = {
  color? : string,
  width : number,
}

let 네모2 :Square = { 
  width : 100 
}

물음표는 "undefined 라는 타입도 가질 수 있다~"라는 뜻

type 합치기

OR 연산자를 이용해서 Union type을 만들 수 있음.

type Name = string;
type Age = number;
type NewOne = Name | Age; 

extend

object에 지정한 타입의 경우 합치기도 가능

type PositionX = { x: number };
type PositionY = { y: number };
type XandY = PositionX & PositionY
let 좌표 :XandY = { x : 1, y : 2 }

& 기호를 쓴다면 object 안의 두개의 속성을 합쳐줍니다.
Type alias & { name : string } 이런 것도 가능

type 키워드는 재정의가 불가능
같은 이름의 type 변수 재정의 불가능

//에러발생
type Name = string;
type Name = number;

Literal Types

literal type은 특정 글자나 숫자만 가질 수 있게 제한을 두는 타입
더 엄격한 타입지정 가능
변수에 뭐가 들어올지 더 엄격하게 관리가능

let way: 'left' | 'right';
way = 'left';

way변수에는 left, right만 올 수 있음

함수 literal type

function 함수(a : 'hello') : 1 | 0 | -1 {
  return 1 
}

파라미터 타입선언할 때 글자나 숫자를 집어넣으시면 그것만 파라미터로 넣을 수 있고
return 타입선언할 때도 글자나 숫자를 집어넣으시면 그 값만 return할 수 있습니다.

Literal Types과 const

const 변수는 값을 바꿀 수 없는 변수
가끔은 변하는 중요한 정보를 저장하고 싶을 땐 const 사용 못함.
예를 들어 변수가 'kim' 또는 'park' 만 가질 수 있는 이런 식의 엄격한 변수는 못만듭니다.

// 이런 식의 문법은 자바스크립트에 없음
const 이름 = 'kim' | 'park' 

as const

// 에러나는 코드
var 자료 = {name : 'kim'}

function 내함수(a : 'kim') {

}

// 자료.name은 string 타입, 함수에서 지정한 'kim' 타입이 아님
내함수(자료.name)

에러가 안나게 하려면 as const를 사용한다.

var 자료 = {name : 'kim'} as const;

function 내함수(a : 'kim') {

}
내함수(자료.name)

as const 기능
1. 타입을 object의 value로 바꿔줍니다. (타입을 'kim'으로 바꿔줍니다)
2. object안에 있는 모든 속성을 readonly로 바꿔줍니다 (변경하면 에러나게)

함수 type alias

함수 type alias 지정하는 법
화살표 함수를 사용한다. () => {}
함수 표현식(let 함수명 = function(){})에만 type alias 사용가능

// 함수타입
type NumOut = (x : number, y : number ) => number ;

// 함수타입 사용
let ABC :NumOut = function(x,y){
  return x + y
}

arrow function의 장점은 기호 생략기능을 제공해준다는 점(자바스크립트 es6)
1. arrow function에선 중괄호안에 return 한 줄 코드만 있으면 중괄호 { } 생략 가능
2. 파라미터가 한개 밖에 없으면 소괄호 ( ) 생략 가능

그래서 예를 들어서 2를 넣으면 2를 곱해주어 return 해주는 함수를 만들고 싶으면
타입(let, const, type) 이름 = x => 2 * x
이렇게 사용가능합니다.

methods 내부 함수 타입지정

object 자료 안에 함수도 맘대로 집어넣을 수 있습니다.

type Member = {
  name : string,
  age : number,
  plusOne : ( x :number ) => number,
  changeName : () => void
}

// object 안에 함수만들수있음
let 회원정보: Member = {
  name : 'kim',
  age : 30,
  plusOne (x){
    return x + 1
  },
  changeName : () => {
    console.log('안녕')
  }
}
회원정보.plusOne(1);
회원정보.changeName();

출처 coding apple