[타입스크립트] 타입스크립트의 타입

Basic Types

number

let numberType: number = 100;

string

let numberType: string = 'string';

boolean

let booleanType: boolean = true;

• 타입스크립트가 기본 제공하는 타입은 소문자로 시작한다.

object types

• {}와 object는 object type을 명시하는 같은 기능을한다.

let object1 : {}
let object2 : object

• 객체의 타입 명시는 객체를 쓰는 것과 비슷하다. key와 type 쌍으로 중괄호 안에 넣어준다
• 프로퍼티를 구분하기 위해 ';'나 ','를 쓴다.

const person : {
   name: string;
   age: number;
   hobbies: string[];
   role: [number, string]
 } = {
   name: 'haha',
   age: 30,
   hobbies: ['Sports', 'Cooking'],
   role: [2, 'author']
}

array type

let numberArray1 : number[] = [1, 2, 3]
let numberArrau2: Array<number> = [1, 2, 3]

• 배열의 요소의 타입을 명시할 수 있다.

tuples type

• 고정된 길이를 갖는 배열의 요소의 타입을 명시해준다.
• FIXED LENGTH, FIXED TYPE

let mixedArray: [string, number] = ['one', 2]

mixedArray.push(3)

• push 메소드와 같이 배열의 메소드를 쓴 경우 튜플 타입으로 명시해준 배열의 에러로 걸리지 않는다.

enum Type - 열거형

• 특정 값들의 집합을 의미하는 자료형
• 문자형과 숫자형을 지원한다

enum Role { ADMIN = 5, READ_ONLY = 'READ_ONLY', AUTHOR = 100 };

const person = {
  name: 'haha',
  age: 30,
  hobbies: ['Sports', 'Cooking'],
  role: Role.ADMIN
};

if (person.role === Role.ADMIN) {
  console.log('is author')
}

uinion type - 조합타입

• '|'는 타입의 OR를 나타내며 "여러 타입 중 하나"를 표현할 수 있다.
• 아래 예시와 같이 함수를 중복 사용할 수 있도록 해줄 수 있다.

function combine (
	input1: number | string, 
    input2: number | string
    ){
  let result: string | number;
  if(typeof input1 === 'number' && typeof input2 === 'number') {
    result = input1 + input2
  } else {
    result = input1.toString() + input2.toString();
  }
  return result
}

const combineAges = combine(30, 40);

literal type

• 문자형과 숫자형의 구체적인 값을 타입으로 지정할 수 있다.

let과 const의 차이

let letString = 'hi'

const constString = 'hi'

• let의 경우 변수 이므로 다른 문자열이 할당될 수 있기 때문에 letString의 타입은 string이다
• const의 경우 상수 이므로 타입스크립트는 문자열이 아닌 'hi'로 타입을 지정한다. 즉 리터럴 타입으로 타입이 지정된다.

function combine (
	input1: number | string, 
    input2: number | string, 
    resultConversion: 'as-number' | 'as-text'
    ){
  if(resultConversion === 'as-number'){
    return Number(input1 + input2);
  } else {
    return input1.toLocaleString() + input1.toLocaleString();
  }
}

const combineAges = combine(30, 40, 'as-number');
const combineNames = combine('Max', 'Anna', 'as-text');

type aliases - 타입 별칭

• 'type'키워드로 타입 이름을 정할 수 있다.
• 객체 타입을 정의하는 경우 유용하게 사용할 수 있다.

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

function printPerson(info: Person) {
	return `${info.name}은 ${info.age}살 입니다`
}

printPerson({age: 30, name: 'haha'})

function type

• 함수의 매개변수(input)와 return값(output)의 type을 지정할 수 있다.

function add(n1: number, n2: number) :number {
  return n1 + n2;
}
// 함수의 return값이 number이다

• return 문이 없는 함수의 경우 type은 void를 쓴다.

function printResult(num: number): void {
  console.log('Result' + num);
}

• 자바스크립트의 경우 return문이 없는 함수의 경우 undefined를 반환한다.
• 자바스크립트에서 undefined는 이미 존재하는 type이다.
• 타입스크립트에서 return문이 없는 함수에 반환값 type을 undefined를 지정하면 에러가 발생한다.
• 함수에 return이 있는 경우 undefined라고 지정해줄 수 있다.

function add(n1: number, n2: number):undefined {
  console.log(n1 + n2);
  return
}

let combineValues : (a: number, nb: number) => number

combineValues = add;

console.log(combineValues(8, 8))

• combineValues에 지정해준 함수의 매개변수와 return 값이 함수 add와 일치하므로 combineValues 변수에 함수 add를 할당할 수 있다.

• 매개변수의 type같은 경우 파라미터의 이름은 같지 않아도 되지만 자리는 맞아야 한다.

• 콜백함수는 다음과 같이 타입을 명시해줄 수 있다.

function addAndHandle (
	n1: number, 
    n2: number, 
    cb : (num: number)=>void
    ){
  const result = n1 + n2;
  cb(result);
}

addAndHandle(10, 20, (result)=>{
  console.log(result)
})

unknown type

• 유저가 입력하기 전에 타입을 모르는 경우 변수에 unknown타입을 지정해 줄 수 있다.

let userInput: unknown

userInput = 5;
userInput = 'hi';

any vs unknown

let userInput: unknown;
let userName: string;

userName = userInput;
// 에러 발생 O

• 할당된 값이 어떤 타입인지 모르기 때문에 프로퍼티나 연산을 할 수 없다.
• 조건문을 사용하여 타입 검사를 하는 경우 에러가 발생하지 않는다.

let userInput: any;
let userName: string;

userName = userInput;
// 에러 발생 X

• any는 가장 유연한 타입으로 모든 타입을 체크하지 않는다.