TypeScript - 1

양재혁(Jaehyuk-Yang)·2023년 8월 29일

야놀자 부트캠프 강의 요약

야놀자 부트캠프 강의

목록 보기

19/20

Types

Primitive types

string
- 문자열
number
- 숫자 값
boolean
- true와 false값
null
- 하나의 값: null
undefined
- 하나의 값: undefined, 초기화되지 않은 변수의 기본 값
symbol
- 고유한 상수 값

Object types

function
- 함수
array
- 배열
classes
- 클래스
object
- 객체

기본 타입 실습

// boolean
let boolean: boolean;
let falseboolean: boolean = false;

// number
let number: number;
let integer: number = 6;
let float: number = 1.2345;

// string
let string: string;
let firstname: string = "doe";
let lastname: string = "john";

// array
// 1가지 타입만
let names1:string[] = ["john","kim"];
let names2:Array<string> = ["john", "kim"];

// 여러 타입
let names3:(string|number)[] = ["john",123];
let names4:Array<string|number> = ["john",123];

// 읽기 전용 배열 readonly
let stringArray:readonly string[] = ['A', 'B'];
let numberArray: ReadonlyArray<number> = [1,2];

추가 제공 타입

// tuple
let tuple1: [string, number];
tuple1 = ["a",1];

// tuple(2차원)
let tuple2: [string, number][];
tuple2 = [["a",1],["b",2]];

// push() 등을 통해 값을 넣는 것은 가능
let tuple3: [string, number];
tuple3 = ["a",1];
tuple3.push("b",2);

// any
// 모든 타입으로 어떠한 값도 할당 가능, 되도록 사용 x
// 3rd party 라이브러리 사용 시 모를 때만 사용
let any:any = 'abc';
any = 1;
any = [];

// Unknown
// 알 수 없는 타입을 의미하며, 어떠한 값도 할당 가능, 하지만 unknown을 다른 타입에는 할당 불가능
let unknown: unknown = false; // 어떠한 값도 할당 가능
// let string1: string = unknown; // 다른 타입에 할당 불가능
let string2: string = unknown as string;

// object
// typedef 연산자 object로 반환하는 모든 타입
let obj: object= {};
let arr: object= [];
// let nul: object= null; // 실제 x -> typescript 반영
let date: object = new Date();

// 객체 속성에 대한 타입을 개별적으로 지정
let obj1: {id: number, title: string, desc: string} = {
  id: 1,
  title: 'title1',
  desc: 'desc 2'
}

// union (2개 이상 타입 허용)
let union: (string | number);
union: 'hi';
union: 123;

// function
let func1: (arg1: number, arg2: number) => number;
func1= function(x,y){
  return x+y;
}

let func2: ()=>void;
func2= function(){
  console.log('hi');
}

// null, undefined
// "strictNullChecks": false라면 아래와 같이 할당 가능
// let number1: number = undefined;
// let string1: string = null;
// let object: {a:1, b:false} = undefined;
// let array: any[] = null;
// let undefined1: undefined = null;
// let null1: null = undefined;
// let void1: void = null;

// "strictNullChecks": true라도 void에 undefined 할당 가능
let void2: void = undefined;

// void
// 주로 값을 반환하지 않는 함수에서 사용
function greeting(): void{
  console.log("hi");
}

const hi: void = greeting();
console.log(hi); // undefined

// never
// never는 어떤 일이 절대 일어나지 않을 것이라고 확신할 때 사용
// 1. Error를 throw

function throwError(errorMsg: string):never {
  throw new Error(errorMsg)
}

// 2. 무한루프
function keepProcessing(): never{
  while(true){
    console.log('~~');
  }
}

type annotation, type interface

type annotation

개발자가 타입을 타입스크립트에게 직접 말해주는 것

const rate: number = 5;

type interface

타입스크립트가 알아서 타입을 추론하는 것

const rate = 5;

타입을 추론하지 못하여 type annotation을 꼭 해줘야 하는 경우

any 타입을 리턴하는 경우

const json = '{"x":4, "y":7}'
const coordinates = JSON.parse(json)
console.log(coordinates)

변수 선언을 먼저하고 나중에 초기화하는 경우

let greeting
greeting='hello'

변수에 대입될 값이 일정치 못하는 경우

let num = [-7,-2,10]
let numAboveZero: boolean | number = false

for(let i=0;i<num.length;i++){
  if(num[i]>0){
    numAboveZero = num[i]
  }
}

타입 단언과 타입 가드

// 타입 단언
const bodyEl = document.querySelector('body') as HTMLBodyElement;
bodyEl.innerText = 'hello';

// !not null 타입 단언
const bodyEl1 = document.querySelector('body');
bodyEl!.innerText = 'hello';

// 타입 가드
const bodyEl2 = document.querySelector('body');
if(bodyEl2){
  bodyEl2.innerText = 'hello';
}

type alias vs interface

// interface
interface Animal {
  name: string
}

interface Bear extends Animal {
  honey: boolean
}

const Bear1: Bear = {
  name: 'honey bear',
  honey: true
}

// type
type Animal2 = {
  name: string
}

type Bear2 = Animal2&{
  honey: boolean
}

const Bear2: Bear = {
  name: 'honey bear2',
  honey: false
}

// interface 선언 병합 가능
interface Animal3{
  name: string
}

interface Animal3{
  honey: boolean
}

const Bear3: Animal3 = {
  name: 'honey bear3',
  honey: false
}

// type에서는 선언 병합 불가