봉보로봉봉

이렇게 함수가 인자로 받는 타입이 적으면 하나하나 적어 줄 수 있겠지만, function getSize(arr : number[] | string[]) : number { return arr.length } const arr1 = [1,2,3] const arr2 = ['1','2','3'] getSize(arr1) getSize(arr2) 여러개라면 하나하나 적어주기도 힘들고 코드가 길어져 가독성이 떨어질 것이다. function getSize(arr : number[] | string[] | boolean[] | object[]) : number { return arr.length } const arr1 = [1,2,3] const arr2 = ['1','2','3'] const arr3 = [tru..

클래스를 이렇게 선언해주면 될 것 같지만 this.color가 없다고 에러가 난다. class Car { constructor(color : string){ // 에러 this.color = color; } start() { console.log('start') } } 그럴 때는 멤버변수를 선언해주면 된다. class Car { color : string; constructor(color : string){ this.color = color; } start() { console.log('start') } } 접근 제한자나 readonly 키워드를 사용해 멤버 변수를 선언하지 않는 다른 방법도 있다. // public class Car { constructor(public color : string){ t..

이렇게 선언했을 때 user1은 타입이 Mike가 되고 user2는 string이 된다. const user1 = 'Mike'; let user2 = 'Tom'; 그래서 user2에 숫자를 할당하려고 하면 에러를 띄운다. 타입스크립트가 user2는 string이라고 추론했기 때문이다. const user1 = 'Mike'; let user2 = 'Tom'; // 에러 user2 = 1; 여러 개를 쓰고 싶을 때는 명시적으로 타입을 정해주면 된다. const user1 = 'Mike'; let user2 : string | number = 'Tom'; // 가능 user2 = 1; 리터럴 타입 리터럴 타입을 사용하면 원하는 값만 들어가게 할 수 있다. type을 선언하고 이용하면 된다. 그럼 해당 타입에서..

함수 인자의 타입 함수의 인자도 타입을 정해줄 수 있으며 ?를 사용해 옵션을 넣어줄 수 도 있다. 이렇게 적으면 return 값을 적지않아도 타입스크립트가 알아서 string으로 추론해준다. function sayHello(name? : string) { return `Hello ${name || 'world'}` } 위 함수는 이렇게 쓸 수도 있다. function sayHello(name = 'world') { return `Hello ${name}` } 인자를 여러개 받을 때도 옵션으로 넣어 줄 수 있다. function sayHello(name : string, age? : number) { if (age !== undefined) { return `Hello ${name}. you are ${a..

프로퍼티에 타입을 정해서 객체를 정의하고자 할때 인터페이스를 사용한다. 인터페이스에서 정해준 타입이 아닌 값을 넣어주려고 해도 에러가 나고, 인터페이스에 있는 모든 프로퍼티를 다 넣어주지 않아도 에러가 난다. interface User { name : string, age : number } let person : User = { name : 'mike', age : 60 } interface User { name : string, age : number } // 에러 let person1 : User = { name : 'mike', age : '60살' } // 에러 let person2 : User = { name : 'mike', } interface외에 새로운 속성을 추가하려고 하면 에러가 발생..

타입스크립트 플레이그라운드 타입 정해주기 타입은 : 을 사용해서 옆에 자료형을 적어주면 된다. 배열은 타입을 정해주는 2가지 방법이 있다. let name : string = 'bong'; let num : number = 1; let numArr : Array = [1, 2, 3]; // or let numArr : number[] = [1, 2, 3]; 튜플 (Tuple) 배열의 형태와 같지만 순서에 따라 타입을 정해 줄 수 있다. let person[string, number]; // 가능 person = ['bong', 1]; // 불가능 person = [1, 'bong']; void 함수에서 아무것도 반환하지 않을 때 사용 function sayHello () : void { console.l..

call signatures || function signatures 함수 위에 마우스를 올렸을 때 보이는 것을 말한다. 함수를 어떻게 호출해야하고 반환 타입이 어떻게 되는지 알려준다. const add = (a:number, b:number) => a + b // call signatures // const add : (a:number, b:number) => number 이렇게 콜시그니처를 만들 수 있다. type Add = (a:number, b:number) => number 이렇게 타입을 설정해두고 함수에 적용할 수 있다. type Add = (a:number, b:number) => number const add:Add = (a, b) => a + b 오버로딩(overloading) - fun..

기본적으로는 ts는 js와 비슷한 문법을 사용한다. 하지만 js에서는 그냥 실행하게 뒀던 코드들도 ts에서는 메세지로 틀렸다고 알려준다. // 자바스크립트 const player = { name: 'bong' } player.hello() // undefined // 타입스크립트 const player = { name: 'bong' } player.hello() // 실행 전에 hello()가 없다고 메세지를 띄워 줌 타입 지정해주기 타입을 지정해줄 때는 : 을 사용하면 된다. const userName : string = "bong"; const userAge : number = 72; const numsArr : number[] = [1, 2, 3]; 하지만 매번 변수를 선언할 때마다 타입을 지정해주..