[Sopt] 1차 세미나 - Typescript, Node.js

Typescript

🔎 Typescript란?

JS 에서 타입 문법 등을 추가한 상위 집합으로 JS와 100% 호환된다.

 

Typescript의 장점

• 높은 수준의 코드 탐색과 디버깅
• JS와 100% 호환
• 강력한 생태계

 

🔎 Type

기본적인 데이터 타입

const 변수명: 타입 = 초기값;
let 변수명: 타입 = 초기값;

let isDone: boolean = true;
const name: string = '송';
console.log(name)
let grade: number = 4;
const sum = (x:number, y:number): number =>{
    return x*y;
}

 

배열 데이터 타입

const 변수명: 타입[] = 초기값;
let 변수명: Array<타입> = 초기값;

const ages1: number[] = [1,2,3,4,5];
const ages2: Array<number> = [1,2,3,4];
const objArr: Array<object> = [{ item: 'value' }, { itme: 'value2' }];

 

Object vs object

Object 는 자바스크립트의 모든 생성자를 extend, 모든 타입에 할당될 수 있다.

object 는 원시 타입을 제외한 나머지를 모두 받을 수 있다.

원시타입과 객체타입이란?

원시타입
- 메모리에 고정 크기로 값을 저장하고, 해당 저장 값을 변수가 직접 갖고 있음
- Boolean, Null, Undefined, Number, String, Symbol

객체타입
- 크기가 정해져있지 않고 변수 할당 시 데이터 주소만 저장함
- Object

const f1 = (obj: object): void =>{
    console.log(obj);
}
f1([1,2,3,4]);
// f1('hihi'); -> 오류

const f2 = (obj: Object): void =>{
    console.log(obj);
}

f2([1,2,3,4]);
f2('hihi');

 

함수 타입

리턴 값이 없는 함수는 void 로 명시해준다.

function foo(a:number, b:number): number{
    return a+b;
}

const boo = (a:number, b:number): number => {
    return a+b;
}

const printHi = (a:string): void =>{
    console.log(`${a} hi~`);
}

 

null vs undefined

null, undefined는 이름 그대로가 타입이다. 해당 타입은 null / undefined 자신 이외의 값 할당이 안된다.

let a: null = null;
let x: null = 2;
// Type '2' is not assignable to type 'null'

let b: undefined = undefined;
let y: undefined = null;
// Type 'null' is not assignable to type 'undefined'.

 

타입 단언 (Type assertions)

개발자는 자기가 뭘 하고 있는지 알기 때문에, 타스에게 직접 타입을 단언해준다.

// angle-bracket 타입단언
let name3: any = '유';
let name3Length: number = (<string>name3).length; // aka 형변환

// as 타입단언
let name4: any = '송';
let name4Length: number = (name4 as string).length;

 

any

타입 검사를 하지 않는다. 걍 아무데다가 붙여도 되긴 하는데, 되도록 쓰지 말 것.

 

🔎 Interface

여러가지 프로퍼티를 갖는 새로운 타입을 정의하는 것.

변수, 함수, 클래스 모두 사용이 가능하다.

 

선택적 프로퍼티

인터페이스 내부에 필수적이지 않은 프로퍼티는 ? 를 붙여서 표시한다.

interface ServerPart{
    name:string;
    age: number;
    group: string;
    mbti?: string[]; // 선택적 프로퍼티!!
}

const serverPart: ServerPart = {
    name:'쏭',
    age: 5,
    group: 'YB',
    mbti: ['E','F']
}