[TypeScript] 기본 타입

ts와 js를 같이 켜 두면 안된다! 중복 함수 오류가 발생함!! js 끄기!!

 

타입스크립트가 바닐라 자바스크립트보다 유용한 이유 : 오류를 미리 감지하고 일부 런타임 오류를 방지할 수 있음

function add(n1, n2) {
    return n1 + n2;
}
var number1 = 5;
var number2 = 1.8;
var result = add(number1, number2);
console.log(result);

// 결과는 6.8

function add(n1, n2) {
    return n1 + n2;
}
var number1 = '5';
var number2 = 1.8;
var result = add(number1, number2);
console.log(result);

// 결과는 51.8
// js 가 number2를 문자열로 변환해서 문자열로 합침

 

 

타입스크립트에게 타입 알려주는 법!

- 명시적으로 타입설정하는 것은 타입스크립트만 이해하는 것! 

- Const number1 = 5 로 타입 명시를 하지않아도 실행되는 것은 타입스크립트가 타입 추론을 하기 때문이다. 따라서 const number1 : number = 5; 이런식으로 하는 건 쓸데없는 짓.

-타입스크립트의 타입은 컴파일 중에 확인되는 반명, 자바스크립트의 타입은 런타임 중에 확인됨

 

function add(n1:[number/string/boolean], n2) {

 

타입스크립트에서 타입 확인하는 법! 

console.log(typeof 변수명)

 

++

var : 재선언 및 업데이트 가능. 

    var name = 'bathingape'
    console.log(name) // bathingape

    var name = 'javascript'
    console.log(name) // javascript

let : 변수 재당 가능

    let name = 'bathingape'
    console.log(name) // bathingape

    let name = 'javascript'
    console.log(name) 
    // Uncaught SyntaxError: Identifier 'name' has already been declared
    // let으로 또 할당할 수 없음!!!

    name = 'react'
    console.log(name) //react

const : 변수 재선언, 변수 재할당 모두 불가능

    const name = 'bathingape'
    console.log(name) // bathingape

    const name = 'javascript'
    console.log(name) 
    // Uncaught SyntaxError: Identifier 'name' has already been declared

    name = 'react'
    console.log(name) 
    //Uncaught TypeError: Assignment to constant variable.

 

배열 타입

 

튜플 타입

튜플은 독특한 타입이므로 정의를 해줘야함 

const person: {
  name: string;
  age: number;
  hobbies: string[];
  role: [number, string];
} = {
  name: "hi",
  age: 20,
  hobbies: ["Sports", "Cooking"],
  role: [2, "author"],
};


person.role = [0, "hi"]; //만약 person.role = [0, "hi", "hello"];이런식으로 더 추가하면 오류 발생함.
person.role.push('admin'); //작동되는 이유 : push는 튜플에서 이용되는 일종의 예외, 타입스크립트에서 오류를 잡지 못함,
person.role[1]=10; //오류 발생 : Type 'number is not assignable to type 'string'

 

열거형

enum Role {
  Admin, // 0부터 시작하기 싫으면 Admin=5 이런식으로 해주면 되고 이후는 6, 7, 8...이 됨 또는 각각 다 값 설정도 가능(텍스트와 숫자 섞기도 가능)
  Read_Only,
  Author,
}

// 이런식으로도 할 수 있으나 모두 상수형으로 지정해야 하는 만큼 열거형(상수들의 집합)으로 하는게 낫다. 
// const Admin = 0;
// const Read_Only = 1;
// const Author = 2;

const person = {
  name: "hi",
  age: 20,
  hobbies: ["Sports", "Cooking"],
  role: Role.Admin,
};

if (person.role === Role.Admin) {
  console.log("Admin");
}

 

 

Any 

- 타입 중 가장 유연한 타입

- 타입스크립트에게 아무것도 알려주지 않음 ; 어떤 값이든 저장할 수 있다. 

- 하지만 ts 에서 별로 유용하진 않음. ts 장점 활용못하니까 e.g) let list=any[]; list=['sport'] 이런식으로 하나만 넣으면 오류 발생

- 어떤 값과 데이터가 들어올 지 모를때 쓰는거

- 가급적 사용X

 

유니언 타입

- 애플리케이션에서 함수의 매개변수나 상수 혹은 변수가 두 가지 다른 종류의 값을 받을 수 있을때 사용하면 타입스크립트에게 숫자나 문자열 둘 다 괜찮다고 알려주는 것

 

오류코드 1) 

function combine(input1: number|string, input2: number|string) {
  const result = input1 + input2;
  return result;
}

- 이런 식으로 하면 + 연산자를 사용할 수 없다는 오류가 나타나는데 타입스크립트가 유니온에 뭐가 들어오는지 안보고 그냥 안될 수도 있으니까 오류띄움ㅇㅇ 이렇게 하는 것 

 

수정 방법 

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

  return result;
}

const combineAge = combine(20, 21);
console.log(combineAge);

const combineNames = combine("mimi", "zizi");

 

추가

function combine(
  input1: number | string,
  input2: number | string,
  resultConversion: string
) {
  let result;
  if (typeof input1 === "number" && typeof input2 === "number") {
    result = input1 + input2;
  } else {
    result = input1.toString() + input2.toString();
  }
  if (resultConversion === "as-number") {
    return +result; //또는 paresFloat(result) 하면 숫자로 변환됨
  } else {
    return result.toString();
  }
}

const combineAge = combine(20, 21, "as-number");
console.log(combineAge);

const combineStringAge = combine("20", "21", "as-number");
console.log(combineStringAge);

const combineNames = combine("mimi", "zizi", "as-text");
console.log(combineNames);

 

그런데 계속 number | stirng 이렇게 쓰기에는 너무 귀찮아?

알리어스(Alias) 타입 

-유니언 타입과 같이 많이 씀

type Combinable = number | string;
type ConversionDespription = "as-number" | "as-text";

function combine(
  input1: Combinable,
  input2: Combinable,
  resultConversion: ConversionDespription
) {

 

추가

예를 들어, 다음 코드를 아래와 같이 단순화할 수 있습니다.

function greet(user: { name: string; age: number }) {
  console.log('Hi, I am ' + user.name);
}
 
function isOlder(user: { name: string; age: number }, checkAge: number) {
  return checkAge > user.age;
}


단순화 후:

type User = { name: string; age: number };
 
function greet(user: User) {
  console.log('Hi, I am ' + user.name);
}
 
function isOlder(user: User, checkAge: number) {
  return checkAge > user.age;
}

 

Void 타입

 

- js에는 void 타입이 없으나 ts가 알아서 하니까 굳이 명시할 필요없이 사용 가능

- 반환 구문이 없음 : undefined

- undefined 자체가 ts에는 함수가 될 수 있음. 근데 거의 선언은 안함

 

// add의 결과값이 출력이 되는 것- 1차add 2차 printresult값 출력이 되어야하는데 한줄만 뜨니까
function add(n1: number, n2: number) {
  return n1 + n2;
}

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

printResult(add(5, 12));


// 이렇게 하면 add 다음줄 undefined가 뜸
function add(n1: number, n2: number) {
  return n1 + n2;
}

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

console.log(printResult(add(5, 12)));

 

Function(함수) 타입

- 함수를 정의하는 타입

- 매개변수와 함수의 반환값까지 정의

- 화살표 표기법으로 만들 수 있음. 

//변수를 통해 함수 실행
let combineValues; //기본 타입은 any인데 이렇게하면 문제가 생길 수 있음
//comvines = 5라고 하면 오류가 발생
combineValues = add;
console.log(combineValues(8, 8));


//수정방법 - 하지만 여전히 완벽하지 않음 comvineValues를 void타입으로 하면 ts는 조건 만족했다고 하지만 우리는 만족하지 못해! undefined가 뜨거든
// (잘못된 함수 저장 그러나 ts는 알려주지 않음)
let combineValues: Function;
combineValues = add;
console.log(combineValues(8, 8));


//수정 방법 - 저장할 함수가 어떻게 동작해야 할 지 더 정확히 정의해야함! 
let combineValues: (a:number, b: number) => number;
combineValues = add;
console.log(combineValues(8, 8));

 

 

Call back(콜백) 함수

- 장점 : 함수안에서 콜백을 전달하면 타입스크립트는 결과가 숫자라는 것을 추론함. 그러면 결과를 가지고 뭐든 할 수 있음

 

//cb 부분이 콜백함수
function addAndHandle(n1: number, n2: number, cb: (num: number) => void) {
  const result = n1 + n2;
  cb(result);
}

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

 

Unknown 타입

- 오류 없이 어떤 값이든 저장할 수 있음

- 그러나 any와는 다름! 왜냐면 unknown은 string이 아닐 수도 있기 때문. 더 제한

e.g.

let userInput: unknown; //여기가 any면 오류 발생 안함!!
let userName:string;

userName=userInput; //오류 발생!!


// 이렇게는 가능하다
if (typeof userInput === "string") {
  userName = userInput;
}

- 따라서 unknown은 타입 체크를 하기는 함!

 

Never 타입

- 절대 값을 생성하지 않음

//유틸리티 함수
function generateError(message: string, code: number) {
  throw { message: message, errorCode: code };
}

const result = generateError("An error occured!", 500);
console.log(result); //never 반환: 절대 값을 생성하지 않음