[typescript] 땅콩코딩 타입스크립트 강좌 - 1

TypeScript 강좌

타입스크립트 (Typescript)

 

TypeScript

• 자바스크립트를 기반으로 한 언어로 자바스크립트에 모든 기능을 사용할 수 있다.
• 정적 타입 검사와 고급 타입 기능을 제공하여 코드의 안정성과 가독성을 높여준다.
• 버그를 줄이고, 쉬운 유지보수가 가능하며, 질 좋은 코드를 만들 수 있다.
• 타입스크립트로 작성된 화면은 자바스크립트로 다시 컴파일 되어야 한다.

 

Static Typing : 정적 타이핑

타입을 선언하고, 선언된 타입에 맞는 값만이 할당 또는 반환되어야 한다.

Type Inference : 타입 추론

예시

let a = 5;
a = 'hello'; // error : Type 'Hello' is not assignable ro type 'number'

재할당하려는 변수 값이 숫자가 아니기 때문이다. 그래서  'hello'를 10으로 변경하면 에러는 사라진다.

즉, 타입스크립트는 타입 표기가 없는 경우 타입 정보를 제공하기 위해 코드를 분석하여 타입을 추론한다.

 

Syntax : 타입 명시

변수를 선언할때 변수 값의 타입을 명시함으로써 변수 값의 데이터 타입을 지정한다.

예제

let id:number = 20;
let name:string = 'Hong Gildong';

function getStudentInfo(id:number):[지정하려는 타입] {
    return null;
}

함수의 결과값에도 타입을 지정할 수 있으며, 타입이 명시된 함수는 반드시 value 가 반환되어야 한다.
:void 는 아무 값도 반환하지 않을 때 사용한다.

 

반환되는 객체의 구조를 명시하기 위해, 중괄호를 사용하여 속성과 타입을 지정해줄 수 있다.

let id:number = 20;
let name:string = 'Hong Gildong';
let gender:string = 'male';

function getStudentInfo(id:number):{
    id : number;
    name : string;
    gender : string;
} {
    return null;
}

 

Interface : 인터페이스 

인터페이스 이름은 대문자로 시작해야한다. 

interface [이름] { }

 

함수의 반환 타입을 인터페이스로 지정하면 된다.

let id:number = 20;
let name:string = 'Hong Gildong';
let gender:string = 'male';

interface Student {
    id : number;
    name : string;
    gender : string;
}

function getStudentInfo(id:number):Student{
    return{
    	id : 30;
    	name : 'Kim Cheolsu';
    	gender : 'male';
    }
}

인터페이스를 타입으로 가지는 값은 인터페이스의 구조를 값으로 가져야 한다.
즉, 인터페이스 프로퍼티 중 하나가 지워져도 안 된다.

 

옵셔널 기호 ' ? '

더 유연하게 사용하고 싶다면 '?'를 사용하여 선택적 프로퍼티로 사용하면 된다. 

interface Student {
    id : number;
    name? : string;
    gender : string;
}

function getStudentInfo(id:number):Student{
    return{
    	id : 30;
    	gender : 'male';
    }
}

 

매개변수의 타입으로 interface를 설정함으로서 코드를 재사용할 수 있게 됨

 

function saveStudentInfo(student:Student):void{

}

두가지 방식 다 가능하다.

// 1
saveStudentInfo({
    id: 40;
    name : 'Jeon Wuchi';
    gender : 'male';
})

// 2
let student1 = {
    id: 40;
    name : 'Jeon Wuchi';
    gender : 'male';
}
saveStudentInfo(student1);

 

메소드(method : 객체 내에서 정의된 함수) 도 인터페이스 내에서 정의할 수 있다.

comment 라는 이름의 string value 를 매개변수, string 을 반환한다.

interface Student {
    id : number;
    name? : string;
    gender : string;
    //	방법 1
    addComment(comment: string) : string;
    //	방법 2
    addComment(comment: string) => string;
}

 

Readonly 프로퍼티 : 읽기 전용, 객체 생성시 할당된 프로퍼티의 값을 바꿀 수 없다.

interface Student {
    readonly id : number;
    name? : string;
    gender : string;
    addComment?: (comment: string) => string;
}

function saveStudentInfo(student:Student):void{
    student.id = 50; //error : cannot assign to 'id' because it is a read-only property
    student.gender = 'male';
}

 

Enum & Literal Type

Enum 열거형

연관된 아이템을 함께 묶어서 표현할 수 있는 수단(간단히 정의)

enum GenderType {
    Male
    Female
}

interface Student {
    readonly id : number,
    name? : string,
    gender : GenderType,
    addComment?: (comment: string) => string
}

function getStudentInfo(id:number):Student{
    return{
    	id : 30;
    	name : 'Kim Cheolsu';
    	gender : GenderType.Male;
    }
}

let student1 = {
    id: 40;
    name : 'Jeon Wuchi';
    gender : GenderType.Male;
}
saveStudentInfo(student1);

 

JS 에서 코드가 구현되어 나타나는데, 이것은 런타임에 존재하는 실제 객체임을 보여준다.

var GenderType;
(function (GenderType){
    GenderType[GenderType["Male"] = 0] = "Male";
    GenderType[GenderType["Female"] = 0] = "Female";
})(GenderType || (GenderType = {}));

타입스크립트가 enum 속에 선언된 값의 순서에 따라 0부터 순차적으로 증가하는 숫자를 할당해준다.

enum GenderType { Male = 0; Female =1; } 의 의미를 가지며, Numeric Enum 숫자 열거형으로 사용됨

 

타입스크립트에서는 String Enum 문자형 열거형을 허용하며, enum 멤버에게 값을 할당해주면 된다.

enum GenderType {
    Male = 'male',
    Female = 'female'
}

var GenderType;
(function (GenderType){
    GenderType["Male"] = "male";
    GenderType["Female"] = "female";
})(GenderType || (GenderType = {}));

 

Literal Type

타입스크립트에서는 literal type 속에 정의된 값으로 auto complete 옵션을 제공한다.

enum GenderType {
    Male = 'male',
    Female = 'female'
}

interface Student {
    readonly id : number,
    name? : string,
    gender : 'male' | 'female',
    addComment?: (comment: string) => string
}

function getStudentInfo(id:number):Student{
    return{
    	id : 30,
    	name : 'Kim Cheolsu',
    	gender : 'male'
    }
}

let student1 = {
    id: 40,
    name : 'Jeon Wuchi',
    gender : 'male'
}