Typescript 초기 세팅 / 이론 / 문법

https://www.typescriptlang.org/

JavaScript With Syntax For Types.

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

 

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

자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류를 발견할 수 있습니다. ( 웹 페이지에서 오류 확인 가능 )

 

타입스크립트는 정적 타입의 컴파일 언어이며 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환됩니다. 

코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있습니다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있습니다.

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

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

3.객체 지향 프로그래밍 지원

타입스크립트는 ES6(ECMAScript 6)에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 

객체 지향 프로그래밍 패턴을 제공합니다.

4.Static Typing(정적 타입핑)

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

ex) 각각 타입( number, boolean, string, object ,... 등) 을 정해준다.

5.타입스크립트(TypeScript) 개발 환경 설정 (.ts => .js 파일로 변환하는 방법)

• Vscode 설치 ( prettier / eslint / path intellisense / Bracket Pair Colorizer / Material Icon Theme)
• https://nodejs.org/ko/ node.js 최신버전 다운 cmd 창 node -v 버전 체크
• Vscode의 터미널을 오픈
• npm install -g typescript   (TypeScript 설치)
• Vscode에서 작업 폴더를 세팅한다
• ts 파일을 생성하고 TypeScript를 코딩한다   예) ex.ts
• ex.ts 파일에서 터미널에 tsc --init 을 입력하면 tsconfig.json 파일이 자동 생성된다
• tsc --init 보안오류 발생시 아래 코드를 터미널에 순서대로 입력한다

-$ Get-ExecutionPolicy
-$ Set-ExecutionPolicy RemoteSigned
-$ tsc -w

6..ts 코드를 .js변환하기

• 터미널에서 tsc -w 또는 tsc ex.ts 입력한다
• tsc ex.ts -> (ts파일 수정시 마다 다시 입력하여 컴파일 해야한다)
• tsc -w  -> (ts파일 수정시 자동으로 js파일도 변경하여 컴파일 해준다-권장)

tsc -w 입력시 왼쪽에 typescript 코드를 작성 후 저장하면 js 파일로 실시간 변환이 가능하다

7.타입스크립트(TypeScript)의 특징

7-1) 아래와 같은 코드를 작성했을때 에러가 잘못된 코드임에도 에러가 발생하지 않는다

 let num = 10;
 num = 'Good!';
 console.log(num); // 'Good!'

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

    add();  //NaN
    add(1);  //NaN
    add(1,2);  //3
    add(1,2,3);  //3
    add('hello', 'world'); // 'helloworld'

7-2) 타입스크립트에 작성시 코드 작성중에도 에러를 알려준다.

add function 의 매개변수안에 : number 로 해당 매개변수에 number 타입을 지정해주어 number가 아닌 string 타입을 할당해주면 오류가 발생한다.

7-3) 타입스크립트 타입 지정

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

let num:number[] = [1,2,3,4,5,6];
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 : 30,wieght: 100};

let val:string | number ='kim';

val = 1000;

console.log(val) // 1000

7-4) 타입스크립트 튜플(Tuple)

type typename = type 으로 표기하며 변수 뒤에 타입이름을 호출해 저장된 타입을 불러올 수 있다

type Member = [number,boolean]; // type 타입이름 = 타입

let kim:Member = [123,true]; // 저장된 type 호출
kim = [100,false];

7-5) 리턴값 유무에 따른 함수

function sayHello():void{  // :void  return 값이 없는 타입인 함수
    console.log('hello');
}
function sayHello2():number{ // :number return 값이 number 타입인 함수
    return 100;
}
function sayHello3(a:number,b:number):number{
    return a+b
}

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

7-6) object 안에 타입을 지정해주어야 할속성이 많을 때

type Member = {
    [key:string] : string // object 에 지정할 속성이 너무 많으면
}
let kim:Member = {name:'kim',tel:'010-0000-0000',add:'서울'};
console.log(kim.name,kim.tel,kim.add);

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

interface User { // 첫글자 대문자로 작성 관습
    name: string,
    age : number
}

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

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

8-1) ? (사용해도 되고 안해도 되는 속성에 ?옵션을 사용한다)

interface User {
    name : string;
    age : number;
    gender? : string; // ?를 제거하면 
}

let user:User = { // gender 의 초기값을 설정하지 않아 이곳에서 에러가 나온다
    name:'홍길동',
    age: 30
}

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

8-2) readonly  읽기 전용 (값을 읽을 수는 있지만 수정할 수 없다)

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; // 수정불가, 에러발생
console.log(user.name,user.age);

8-3 ) key 값이 숫자로 되어있을 때

//type Score = 'A' | 'B' | 'C' | 'F' ; //여러개의 객체 속성을 한번에 정의할때

interface User{
    name : string;
    age : number;
    gender? : string;
    readonly birthYear : number;
    1: string; // key 값을 숫자로 작성했을 때
    2: string;
    3: string;
    4: string;
    //[key:number] : string; 축약 가능
    //[key:number] : Score; //여러개의 객체 속성을 한번에 정의할때
}

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;
console.log(user.name,user.birthYear,user.gender,user[1],user[2],user[3],user[4]); //user.1 이 아닌 user[1] 로 호출한다 ( 배열이 아님 )

8-4 ) 함수 정의

// 수정 전
// const add2 = function(x:number,y:number){
//     return x+y;
// }
// console.log(add2(100,200));

//수정 후
interface Add{
    (x:number, y:number) : number;
}

const add: Add = function(x,y){
    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