TypeScript 타입스크립트 기초 -1

 

 

시작하면서

타입스크립트의 기초를 공부합니다.

 

TypeScript 란?

2012년 마이크로소프트가 발표한 타입스크립트(TypeScript)는 자바스크립트(JavaScript)를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어입니다.

 

컴파일 언어, 정적 타입 언어

• 자바스크립트는 동적 타임의 인터프리터 언어로 런타임에서 오류를 발견할 수 있습니다.
• 이에 반해 타입스크립트는 정적 타입의 컴파일 언어이며 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환됩니다.
• 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있습니다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있습니다.

 

자바스크립트 슈퍼셋(Superset)

• 타입스크립트는 자바스크립트의 슈퍼셋, 즉 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어입니다.
• 따라서 유효한 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있습니다.

 

객체 지향 프로그래밍 지원

• 타입스크립트는 ES6(ECMAScript 6)에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공합니다.

 

Static Typing(정적 타이핑)?

• 타입에 맞는 값만 할당/반환 되어야한다는 뜻입니다.

 

예제와 함께 공부하는 TypeScript

ex1)

let num:number = 10; 
console.log(num); // 10

let name1 = 'happy'; // ':타입' 을 생략한다면 초기값에서 type 이 정해진다
    // name1 = 10; // 에러표시
console.log(name1); // 'happy'

function add(num1:number, num2:number){
    console.log(num1+num2);
}

//add();  // 에러표시
//add(1);  // 에러표시
add(1,2);  // 3 
//add(1,2,3);  // 에러표시
//add('hello', 'world'); // 에러표시

ex1-1)

function showItems(arr:number[]){
        arr.forEach((item) => {
            console.log(item);
        });
        
    }

    showItems([1,2,3]);
    // showItems('홍길동');  // 에러표시 Argument of type 'string' is not assignable to parameter of type 'number[]'.

    // let ary : string[] = ['aaa', 'bbb', 'ccc'];
    // showItems(ary); // 에러표시 Argument of type 'string[]' is not assignable to parameter of type 'number[]'. Type 'string' is not assignable to type 'number'.

 

 

TypeScript 기본 타입 지정방법

let car:string = 'BMW';
let age:number = 100;
let isAdult:boolean = true;

let num:number[] = [1,2,3,4,5,];
let num2:Array<number> = [100,200,300];

let str:string[] = ['사과','배','참외','수박'];
let str2:Array<string> = ['냉장고','정수기','에어컨','공기청정기'];

let obj:{name:string} = {name : 'kim'} ;
let obj2:{name:string, age:number, weight: number} = {name : 'kim', age: 50, weight: 100} ;
// let obj3:{a:string, b:number, c: number} = {name : 'kim', age: 50, weight: 100} ; // 속성 값의 이름을 맞춰주지 않는다면 바로 에러

let val:string | number = 'kim'; // 문자 또는 숫자를 모두 받을 수 있다
val = 1000;
console.log(val);

// car = 100;   // type 에러 발생 car:string
// age = '홍길동';  // type 에러 발생 age:number
// num[0] = '김치';  // type 에러 발생 num:number[]
// str[0] = true;  // type 에러 발생 str:string[]
// obj.name = 100; // type 에러 발생 obj:{name:string}

| (or)

function showItems(arr:number[] | string[]){
        arr.forEach((item) => {
            console.log(item);
        });
        
    }

    showItems([1,2,3]);
    showItems(['프린스송', '유단자']);

any

let a:any = 100;
a = '홍길동';
a = true;

 

튜플(Tuple)

• 직접 원하는 type을 선언해서 때에 맞춰 지정해 줄 수 있습니다.

type Member = [number, boolean]; // 타입만 지정한다 (첫글자 대문자 권장)
type Aaa = number | string;

let c:Aaa;
c = 100;
c = '홍길동';

let a:[string, number] = ['홍길동', 100];

a = ['k',1];
// a = [1,'k'];  // 에러발생 -> 순서가 다르다

let b:number[] = [1, 2, 3, 4, 5];

a[0].toUpperCase();
// a[1].toUpperCase(); // 에러발생 -> 숫자는 toUpperCase를 사용할 수 없어서

let kim:Member = [123, true];
kim = [100, false];
// kim = ['홍길동', 100]; // 에러발생 -> 순서가 다르구나

 

Void - 함수에서 리턴값이 없을 때

• 리턴값을 설정해주는 이유는? 올바른 값을 얻기 위해서입니다.

function sayHello():void{
    console.log('hello');
    // return 100;
}

function sayHello2():number{
    return 100;
    // return 'hello'; // 에러 발생 -> type 이 맞지 않다
}

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

sayHello();
console.log(sayHello2());
console.log(sayHello3(100,200));

 

화살표 함수에서 리턴값의 type을 정해줄 때

const isGreater = (a: number, b: number): boolean => {
	return a > b;
}
console.log(isGreater(100,200));

 

null , undefined

• 어떤 값이든 “받을 수 없다” 를 의미합니다.

let a:null = null;
let b:undefined = undefined;

a=100; //에러발생
b=100; //에러발생

 

object (객체) 1

type Member = {
    name : string,
    tel : string,
    add : string
}
let kim:Member = { name:'kim', tel:'010-0000-0000', add:'서울'};
// 위는 다음와 같다 let kim:{name: string, tel: string, add: '서울'} = { name:'kim', tel:'010-0000-0000', add:'서울'};
console.log(kim.name, kim.tel, kim.add);

 

object (객체) 2

type Member = {
    [key:string] : string // object 에 타입 지정해야 할 속성이 너무 많다면 이렇게 적어주면 된다
    // key 라는 이름은 임의로 지정한 것이기 때문에 다른 이름을 줄 수 있다. (하지만 보통 key value 니까 뭐)
}

let kim:Member = { name:'kim', tel:'010-0000-0000', add:'서울' };
console.log(kim.name, kim.tel, kim.add);

 

인터페이스(interface)의 다양한 활용

let user:object;
// let user:{name:string, age:number}; // 만드는 순간 객체의 타입, 속성의 타입또 지정을 해주어야 한다.
// type Member = { name:string, age:number }
// let user:Member{}

user ={
    name : '홍길동',
    age : 30
}
console.log(user.name , user.age); // 에러 -> 객체의 속성에 타입이 지정되지 않아서

 

인터페이스 사용

// type User = {
//     name : string,
//     age : number
// }

interface User {  // type 처럼 형을 만들어주는 용도이다. 객체나 객체 이상의 용도로 사용할 때는 interface를 사용한다.
    name : string;
    age : number; // interface 도 쉼표를 사용할 수 있으나, 일반적으로는 세미콜론을 쓴다.
}

let user : User = {
    name : '홍길동',
    age : 30
}

user.age=10;
console.log(user.name , user.age);

 

?

• 사용해도 되고 안해도 되는 속성에 ?옵션을 사용한다

interface User {
    name : string;
    age : number;
    gender? : string;
}

let user : User ={
    name : '홍길동',
    age : 30
}

user.age=10;
user.gender = 'male'; // 초기값을 주지 않았지만 gender? 로 처리해서 에러 발생하지 않는다
console.log(user.name , user.age);

 

readonly (읽기 전용)

• 값을 읽을 수는 있지만 수정할 수는 없다 마치 const 처럼…

interface User {
    name : string;
    age : number;
    gender? : string;
    readonly birthYear : number;
}

let user : User ={
    name : '홍길동',
    age : 30,
    birthYear : 2000
}

user.age=10;
user.gender = 'male';
// user.birthYear = 2022; //readonly 이기때문에 에러발생
console.log(user.name , user.age, user.birthYear);

 

숫자로 정의된 속성

interface User {
    name : string;
    age : number;
    gender? : string;
    readonly birthYear : number;
    1 : string;
    2 : string;
    3 : string;
    4 : string;
}

let user : User ={
    name : '홍길동',
    age : 30,
    birthYear : 2000,
    1 : 'A',
    2 : 'B',
    3 : 'C',
    4 : 'F'
}

user.age=10;
user.gender = 'male';
//user.birthYear = 2022; //readonly 이기때문에 에러발생
console.log(user.name , user.age, user.birthYear, user.gender, 
user[1], user[2], user[3], user[4]); // key값이 숫자인 경우에는 대괄호 연산자로 접근해야함

• 이렇게도 사용할 수 있습니다.

interface User {
    name : string;
    age : number;
    gender? : string;
    readonly birthYear : number;
    [key:number] : string;
}

let user : User ={
    name : '홍길동',
    age : 30,
    birthYear : 2000,
    1 : 'A',
    2 : 'B',
    3 : 'C',
    4 : 'F'
}

user.age=10;
user.gender = 'male';
// user.birthYear = 2022; //readonly 이기때문에 에러발생
console.log(user.name , user.age, user.birthYear, user.gender, user[1], user[2], user[3], user[4]);

 

여러개의 객체 속성을 한번에 정의하는 방법

type Score = 'A' | 'B' | 'C' | 'D' | 'F';   // 5개의 학점(대문자)만 사용

interface User {
    name : string;
    age : number;
    gender? : string;
    readonly birthYear : number;
    [key:number] : Score;
    // [key:number] : 'A' | 'B' | 'C' | 'D' | 'F';    // [key:number] : string;
}

let user : User ={
    name : '홍길동',
    age : 30,
    birthYear : 2000,
   1 : 'A',
    2 : 'B',
    3 : 'C',
    4 : 'F'
}

user.age=10;
user.gender = 'male';
// user.birthYear = 2022; // readonly 이기때문에 에러발생
console.log(user.name , user.age, user.birthYear, user.gender, user[1], user[2], user[3], user[4]);

 

함수 정의

interface Add {
    (x1: number, y1: number) : number; // (매개변수) : 리턴값 -> 매개변수 이름은 다른이름을 써도 아무 상관이 없다.
}

const add : Add = function(x, y) {
    return x + y;
}

// 익명 함수 버전
// const add = function(x:number, y:number):number {
//     return x + y;
// }

console.log(add(10, 20)); // 30

interface IsAdult{
    (age:number): boolean;
} 
const kim: IsAdult = (age) => {
    return age>19;
}
console.log(kim(30));  // true