5분만에 타입스크립트 입문하기


기본적으로, let 과 const 를 사용해서 변수에 특정 값을 선언 할 때, 해당되는 기본 타입을 명시한다.

아래는 기본타입을 명시하는 예시 입니다.

string : const message : string = 'hello world'; boolean : const done : boolean = true ; number array : const numbers : number[] **= [1, 2, 3] message array : const messages : **string[] = ['hello', 'world']

함수는 parameter에 기본 타입을 명시합니다. 더해서 결과값에도 type을 지정해줍니다.

function sum(x : number, y : number) : number { return x + y; } sum(1,2) //3

숫자 배열의 총합을 구하는 sumArray 함수

function sumArray ( arr : Number[]) :number { let total : number = 0 for(let i = 0 ; i < arr.length ; i ++){ total += arr[i] } return total; } //reduce 연습 function sumArray ( numbers : number[] ) { return numbers.reduce((acc, current) => acc + current, 0); } const total = sumArray([1,2,3,4,5])

interfac** 클래스** 또는 객체를 위한 타입을 지정할 때 사용되는 문법 해당 클래스 혹은 객체에서 꼭 필요한 메소드를 포함하고, 결과값에 대한 type까지 정해줘야 한다.

Class interface

//shape라는 interface를 선언합니다. interface Shape { getArea() : number; // shape interface에는 **getArea라는 함수가 꼭 있어야함** } class Circle implements Shape { //`implement` 키워드를 사용해서 해당 클래스가 Shape interface의 조건을 충족하겠다는 것을 명시 constructor(public radius : *number*) { this.radius = radius; }

typescript에서는 public / private 을 지정해 줄 수 있는데 일반적으로 class / object 바깥에서도 변수를 사용하고 싶다면 public 을 앞에 붙여주고, 그렇지 않다면 private을, 또한 변수명 앞에 _ (underscore)를 사용하면 private variable 의 convention 이다.

tsconfig.json 파일에서 outDir 을 “./dist” 에 설정하게 되면 해당 폴더 안으로 typescript가 compile 된 파일이 생성되게 되고, 실행하면 (node dist/practice) 실행 결과를 얻을 수 있다.

일반 객체 interface , extends 사용해서 상속 가능

interface Person { name : string; age? : number; //물음표는 설정을 해도 되고 안해도 되는 값 } interface Developer extends Person { skills : string[]; } const person : Person = { name : 'jongwoo', age : 20 } const expert : Developer = { name : 'jangoon', skills : ['javascript', 'react'] } const people: Person[] = [person, expert]

Type Alias

type 은 특정 타입에 별칭을 붙이는 용도 : 정의한다고 봐도 무방한지?

type Person = { name : string ; age? : number ; }; type Developer = Person & { skills : string[] ; }; const person : Person = { name : '김사람' };

** type과 interface는 무엇을 써도 상관 없는데 일관성 있게 쓰면 된다. 큰 차이 없다. 다만 라이브러리를 작성하거나 다른 라이브러리를 위한 타입 지원 파일을 작성하게 될 때는 interface 를 사용하는것이 권장 되고 있다.

Generic

제네릭(Generic)은 타입스크립트에서 함수, class, interface , type 을 사용하게 될 때 여러 종류의 타입에 대하여 호환을 맞춰야 하는 상황에서 사용하는 문법이다.

예를 들어 두 객체 A, B를 합쳐주는 merge 라는 함수를 만든다고 가정하면,

function merge( a: any, b : any) : any { return { ...a, ...b } } const merged = merge({foo : 1}, {bar : 1});

any 타입을 사용해서 어떤 형태가 들어와도 괜찮다고 표시할 수 있다. 하지만 이러한 경우에 type 추론이 깨진거나 다름없다. 이러한 경우에 을 사용하면 된다.

function merge <A, B> (a: A, b: B) : A & B { return { ...a, ...b } } const merged = merge({foo : 1} , {bar : 1})

Generic 을 사용하면 어떠한 타입이 들어와도 될 수 있게 되면서도 사용할 때 타입이 깨지지 않게 된다.

interface & generic

interface Items<T> { list : T[]; } //Items<T> 부분에 어떠한 타입이 들어와도 괜찮지만 list에는 T 타입으로만 이루어진 list로 구성이 되어있어야 한다. const items : Items<String> = { list : ['a', 'b', 'c'] };
반복의 느린 變化
oowgnoj github
© 2022, by oowgnoj