[TypeScript] TypeScript 란?

TypeScript

JavaScript에 타입(형식)을 부여하여, 코드가 의도대로 바르게 동작하도록 도와주는 JavaScript 확장 버전

TypeScript의 필요성

타입을 지정해, 변수선언과 인자전달에서 발생하는 버그를 최소화한다.

ES6로 작성된 코드를 ES5로 바꾸어 준다. (컴파일 할 때)

TypeScript 설치하기 (Node.js 패키지로 설치)

npm install --save-dev -g typescript

// --save-dev : devDependencies에 리스트 추가

// -g : 글로벌 설치

TypeScript 프로젝트 만들기 (설정 파일 생성)

// 글로벌 설치시

tsc --init

 

// 로컬 설치시

./node_modules/.bin/tsc --init

설정 파일 수정하기(tsconfig.json)

// tsconfig.json에 적용된 설정은, ts => js 로 컴파일 될때 사용된다.

{
  "compilerOptions": {
    "target": "es5",		/* ECMAScript 버전 지정 : 'ES3' (default), 'ES5'등등. */
    "module": "commonjs",	/* 모듈 코드 생성 지정 : 'none', 'commonjs', 'amd'등등. */
    "sourceMap": true,		/* '.map' 소스맵 파일 생성 ( 난독화한 코드 다시 복구 ) */
    "outDir": "dist",		/* 출력 결과 저장 장소 지정. */
    "strict": true,		/* 엄격한 유형 검사 옵션 활성화. */
  }
}

TypeScript 코드 작성하기 (타입 작성하기)

const world = 'Hi';

// word인자의 형식을 string으로 제한 하고, 초기값을 world로 지정한다

// hello함수의 반환 형식을 string으로 제한 한다.

export function hello(word: string = world): string {
    return `Hello ${world}! `;
}

TypeScript코드 JavaScript 코드로 변환 (컴파일) 하기

tsc

컴파일 결과(index.js)

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var world = 'Hi';
function hello(word) {
    if (word === void 0) { word = world; }
    return "Hello " + world + "! ";
}
exports.hello = hello;
// 같은 폴더 안에 index.js.map 파일도 생겼다!

ts변경해서 저장할 때마다 자동으로 컴파일 시키기

tsc -w

TypeScript로 입력 형식 검사하기

// name은 string 형식이어야함
// age는 number 형식이어야함
// gender는 빈값이어도 되지만("?" 사용), 만약 값이 주어진다면 string 형식이어야함
// sayHi함수는 string값을 반환해야함

const sayHi = (name: string, age: number, gender?: string): string => {
    return `Hello ${name}, you are ${age}, you are a ${gender}`;
};

// 함수 사용
console.log(sayHi("Nicolas", 24, "male"));

export {};

TypeScript 형식 모음

// 1. 참 거짓 값 : Boolean
let isDone: boolean = false;


// 2. 숫자 : Number
let num: number;


// 3. 문자열 : String
let str: string;


// 4. 배열 : Array

// 문자열만 가지는 배열
let strs: string[] = ['name', 'age', 'grade'];
let strs: Array<string> = ['name', 'age', 'grade'];

// 숫자만 가지는 배열
let nums: number[] = [1, 2, 3];
let nums: Array<number> = [1, 2, 3];

// 다중 타입
let array: (string | number)[] = ['name', 1, 2, 'age', 'grade', 3];
let array: Array<string | number> = ['name', 1, 2, 'age', 'grade', 3];

// 전부 허용
let array: any[] = [0, 1, {}, [], 'str', true];


// 5. 튜플 : Tuple
let student: [string, number, boolean] = ['name', 1234, true];
console.log(user[0]); // 'name'
console.log(user[1]); // 1234
console.log(user[2]); // true

// 읽기 전용 튜플 만들기
let a: readonly [string, number] = ['name', 123];


// 6. 열거형 : Enum

// 기본적으로 0부터 시작하여 1씩 값 증가
enum Week {
    Sun, // 0
    Mon, // 1
    Tue, // 2
    Wed, // 3
    Thu, // 4
    Fri, // 5
    Sat  // 6
}

// 수동으로 값 전환 가능, 변경시점부터 1씩 값 증가
// 기본적으로 0부터 시작하여 1씩 값 증가
enum Week {
    Sun, // 0
    Mon, // 1
    Tue = 23, // 23
    Wed, // 24
    Thu, // 25
    Fri, // 26
    Sat  // 27
}


// 7. 모든 타입 : Any
const list: any[] = [1, true, 'Anything!'];


// 8. 알수없는 타입 : Unknown
let a: any = 123;
let u: unknown = 123;

let v1: boolean = a; // 모든 타입 any이므로, 어디든 할당가능
let v2: number = u; // 알수없는 타입 unknown이므로, any에만 할당가능
let v3: any = u; // 옼에이
let v4: number = u as number; // unknown을 number라고 정하고! 할당하기


// 9. 객체 : Object
let obj: object = {};
let arr: object = [];
let func: object = function () {};

let userA: { name: string; age: number } = {
    name: 'Jinho',
    age: 123
};

let userB: { name: string; age: number } = {
    name: 'Juwon',
    age: false, // 지정한 타입에 맞지 않으므로 Error
    email: 'thesecon@gamil.com' // 지정하지 않은 인자이므로 Error
    
    
// 다중타입 사용예시
let union: (string | number);
union = 'Hello type!';
union = 123;
union = false; // 지정한 타입에 맞지 않으므로 Error


// 10. 인터섹션과 "&"를 이용해 타입 조합
interface IUser {
    name: string,
    age: number
}
interface IValidation {
    isValid; boolean
}

const heropy: IUser = {
    name: 'Heropy',
    age: 36,
    isValid: true // IUser에 지정되지 않은 타입이므로 Error
};

const neo: IUser & IValidation {
    name: 'Neo',
    age: 34,
    isValid: true
}


// 11. interface로 사용자가 원하는 객체 형식으로 지정 / js에 컴파일되지 않음
interface Human {
    name: string;
    age: number;
    gender: string;
};

const person = {
    name: "nico",
    age: 31,
    gender: "male"
};

//person 객체는 Human 인터페이스 형식이어야 한다!
const sayHi = (person: Human): string => {
    return `Hello ${person.name}, you are ${person.age}, you are a ${
        person.gender
    }!`;
    
console.log(sayHi(person));

export {}


// 12. classes로 사용자가 원하는 객체 형식으로 지정 / js로 컴파일 됨
class Human {
    public name: string;
    private age: number;
    public gender: string;
    constructor(name: string, age: number, gender: string) {
        this.name = name;
        this.age = age;
        this.gender = gender;
    }
}

const jinho = new Human("jinho", 25, "male");
    const sayHi = (jinho: Human): string => {
        return `Hello ${jinho.name}, you are ${jinho.age}, you are a ${
            jinho.gender
        }!`;
    };
    
    console.log(sayHi(jinho));
    
    export {};

타입 단언하기

TypeScript에게 타임을 알려준다.

이전에 지정한 타입을 무시하고, 새로운 타입을 지정할 수 있다.

// as '타입' 형태로 지정해준다.
const div = document.querySelector('div') as HTMLDivElement;