Typescript 기본 문법

이동규·2023년 9월 30일

Typescript

목록 보기
3/6

숫자형

let decimal:number = 6;

let hex:number = 0xf00d;

let binary:number = 0b1010;

let octal:number =0o744;

let notANumber:number = NaN;// 숫자다.

let underscoreNum :number = 1_000_000;

NaN은 "Not a Number"의 약자로, 자바스크립트에서 특별한 숫자 값으로서 숫자가 아님을 나타낸다. 이것은 일반적으로 수학적인 연산이 실패하거나 정의되지 않을 때 반환되는 값이다.

불리언형

let isDone:boolean =  false;

isDone = true;

console.log(typeof(isDone));

let isOK:Boolean = true;// wrrapper 객체 typescript Documents에서 wrapper 객체를 변수할당 할때는 지양하로 한다.

문자열형

let myName:string ="이동규";
let age:number = 26;
//  포함된 정규표현식은 다음과 같이 사용한다. `${expr}`
let sentence:string = `my name is ${myName+age}. I'll be ${age+1} years old next month`;
console.log(sentence);

심볼문자형

// Symbol을 함수로 사용해서 symbol 타입을 만들어 낼 수 있다.
// 원시 타입의 값을 담아서 사용한다.
// 고유하고 수정불가능한 값으로 만들어 준다.
// 주로 접근을 제어하는데 많이 사용한다.
console.log(Symbol('foo') === Symbol('foo'));
console.log(Symbol('foo'));

const sym  =  Symbol();

const obj = {[sym]: "value"};

console.log(obj[sym]);// 접근을 허락 할때 

어래이형

let arr:number[] = [1,2,3,4,5];
let arr2:Array<number> = [1,2,3,4,5];
let arr3:(number | string)[] = [1,2,3,4,'a'];
let arr4:Array<number | string> = [1,2,3,4,'a'];

튜플형

let x:[string,number];// 튜플은 값의 변경이 되지 않는다.
x = ["hello",3];// 항상 순서 타입이 길이가 맞아야 한다.

const person:[string,number] = ["Mark",39];
const [first,second] = person;//구조분해

오브잭트형


// 타입스크립트의 객체
// objecet literal
// 오브젝트 타입은 원시 타입이 아닌 것을 나타내고 싶을 때 사용하는 타입이다.

const peron1  = {name:"mark" , age:39};
const peron2 = Object.create({name:"lee", age:20});
// not primitive types string boolean bigint , symbol null undefined

console.log(typeof(peron1),typeof(peron2));

declare function create(o:object | null):void;// 함수선언
//declare은 compiler에게 "얘는 이미 존재하는 칭구야. 그러니까 다른 코드에서 참조될 수 있어. 그리고 Javascript로 컴파일 될 필요가 없어."라고 알려주는 keyword래.

create({prop:1});

애니형

function returnAny(message:any):any{
    console.log(message);
    
}
//어떤 것이든 할 수있다.
// any는 계속해서 개체를 통해 전파된다.

const any1 = returnAny('리턴은 아무거나');

any1.toString();

let looslyTyped:any = {}
const d = looslyTyped.a.b.c.d;// 안정성을 잃는 이유가 있다. 동적 데이터가 들어 올 수 있다. 

function leackingAny(obj:any){
    const a:number = obj.num;// 넘버로 누수를 만든다.
    const b = a +1;
    return b;
}

const c = leackingAny({num:0});
// c.indexOf("0");

언노운형

// 컴파일러가 타입을 추론 할 수 있도록 좁히거나 타입을 확정해주지 않으면 다른 곳에 할당 할 수 없고, 사용 할수 없다. 즉 unknown을 사용하면 any 보다 런타임 에러를 줄일 수있다.
// 사용전에 데이터의 일부 유형의 검사를 수행해야 함을 알리는 api에 사용할 수 있을 것 같다.  

declare const maybe:unknown;

// const aNumber:number = maybe;

if (maybe === true) {
     const aBoolean:boolean = maybe;
     
    //  const aString:string = maybe;// type guard
}

if (typeof maybe === 'string') {
    const aString:string  = maybe;

    // const aBoolean:boolean =maybe
    
}

네버형

// never 타입은 모든 타입의 subtype이며 , 모든 타입에 할당 할 수 있다.
// never에는 그 어떤 것도 할당 할수 없다. any 조차도 할당 할 수 없다.
function error(message:string):never{
    throw new Error(message);// 밑으로 내려가지 않는다.
}

function fail(){
    return error("failed");// 리턴 할때 never라고 추론이 가능하다.
}

function infinteLoop():never{
    while(true){

    }
}

declare let a:string |number;

if (typeof a !== 'string') {
    a; // type of guard
}

type Indexable<T> = T extends string ? T & {[index: string]:any} : never;// 제네릭

type ObjectIndexable = Indexable<{}>;
// const b:Indexable<{}> = "";// 잘못된 형식을 넣는 것을 방지를 한다.

보이드타입

// 리턴 타입으로 사용한다. 자바스크립트에서는 undefined라는 상태가 있다.

function returnVoid(message:string):void{
    console.log(message);
    return undefined;
}


const r = returnVoid('리턴이 없다');// 자바스크립트에서는 undefined 와 같은 얘기이다. r의 타입을 undefined을 하려는 것을 컴파일러가 막는다.

0개의 댓글