Typescript
-
타입 import/export와 namespaceTypescript 2022. 6. 17. 13:39
(a.ts) export var 이름 = 'kim'; export var 나이 = 30; 이렇게 a.ts파일에서 이름나이 두 변수를 export 해주면 (b.ts) import {이름, 나이} from './a' console.log(이름) 이렇게 b.ts파일에서 import {변수명} from 주소 하고 가져다 쓸 수 있다. 타입도 export type Name = string; import {Name} from './a' 이렇게 export/import할 수 있다. 이제, namespace를 알아보자. 옛날엔 import가 없어서 이렇게 다 가져왔었는데, 이러면 변수명이 두 파일에서 맨날 겹쳐서 문제가 많았다. 그래서 namespace 네임스페이스 { export type Name = string |..
-
protected, staticTypescript 2022. 6. 17. 12:54
private와 비슷한 protected는 똑같이 class내에서 사용하며 확장성을 좀 더 늘렸다. 예를 들면, class User { private x = 10; } class NewUser extends User { } 이렇게 쓰면 NewUser에선 x를 가져다 쓸 수 없다. 하지만 protected를 쓰면 extends된 class내에서도 사용가능하다. 즉, private는 클래스 내에서, protected는 클래스와 extends된 class까지 가능하다. 역시 둘다 자식에선 사용 불가능하다. 이제, static키워드를 알아보자. class User { static x = 10; y = 20; } let 자식 = new User(); 위처럼 쓰고, 자식을 찍어보면 y값만 나오게 된다. static..
-
객체지향언어같은 문법제공(public, private)Typescript 2022. 6. 17. 11:58
타입스크립트를 쓰면 객체지향언어같은 문법을 제공한다. public private protected static같은 키워드인데, 이 키워드들은 class를 많이 만들어서 개발할 때 유용하다. class User { public name: string; constructor(){ this.name = 'kim'; } } let 유저1 = new User(); 유저1.name = 'park'; //가능 위처럼 필드값에 public키워드를 붙일 수 있는데, 붙이면 모든 자식들이 사용가능하게 해준다. 코드를 보니 class User { name: string = 'Kim'; constructor(a){ this.name = a; } } let 유저1 = new User('Park); 이렇게 써도 같기 때문에 pu..
-
함수에 사용하는 never타입Typescript 2022. 6. 17. 11:30
never은 function의 return값에 붙일 수 있는 타입이다. function 함수() :never{ } 이렇게 사용하며, 조건이 있다. 1. return 값이 없어야한다. 2. endpoint가 없어야 한다. 즉, 끝나지않아야 한다. 끝나지않는 함수를 만들기위해 에러를 내준다. throw new Error()를 써줘서 코드실행을 중단해줄 수 있다. while (true)이것도 무한히 돌기에 끝나지않는다. never을 실무에선 쓸일이 없다. 대부분 void타입을 쓰면 되기 때문이다. 그래도 알아야되는건 가끔 코드를 이상하게 짜면 never타입이 등장하기 때문이다. 1. 뭔가 이상한 narrowing을 할 때 function 함수(parameter: string) { if ( typeof para..
-
narrowing이나 더 알아보기Typescript 2022. 6. 17. 11:24
narrowing을 할 때, typeof연산자를 사용하는데 외에 더 알아보자. 먼저 &&기호를 배워보자. function printAll(strs: string | undefined) { if (strs && typeof strs === "string") { console.log(s); } } 이런 식으로 &&를 쓰면 undefined와 null을 거를 수 있다. 또한 strs != null을 써도 동시에 거를 수 있다 &&연산자가 처음 등장하는 falsy값을 찾아주고, 그게아니면 마지막 값을 반환하기 때문에 위처럼 사용할 수 있는 것이다. 두번째로, in키워드를 알아보자. type Fish = { swim: string }; type Bird = { fly: string }; function 함수(an..
-
함수의 rest파라미터와 destructuring타입지정Typescript 2022. 6. 17. 10:48
rest parameter에도 타입지정을 할 수 있다. 먼저 레스트파라미턴 파라미터에 여러개를 받고 싶을 때 ...a이렇게 ...을 이용해서 써주는 것이다.그리고 데이터는 []어레이로 저장해준다. 그러면 타입지정은 function 전부더하기(...a :number[]){ console.log(a) } 전부더하기(1,2,3,4,5) ...a는 어레이형태로 저장이 되기 때문에 타입지정도 어레이형태로 지정해주면 된다. 이제, destructuring를 알아보자. let arr = ['안녕',100]; let 변수1 = arr[1]; let 변수2 = arr[2]; 이렇게 변수에 각각 담기 귀찮아서 개발자들이 let [변수1, 변수2] = ['안녕',100]; 이렇게 형태에 맞게 적어주면 각각 변수에 저장된다...
-
Object에 타입지정시 interfaceTypescript 2022. 6. 17. 10:23
Object에 타입을 지정하려면 type키워드로 변수를 생성하거나 interface를 이용해서 변수를 생성할 수도 있다. interface Square { color :string, width :number, } let 네모 :Square = { color : 'red', width : 100 } 인터페이스는 클래스 만드는 것과 비슷하게 만들 수 있다. 인터페이스의 장점은 extends로 복사가 가능하다. interface Student { name :string, } interface Teacher extends Student { age :number } 위처럼 Student와 Teacher에 둘다 name : string가 들어가면 extends를 써서 복사가 가능하다. type키워드도 복사 비슷한게..
-
class만들 때 타입지정Typescript 2022. 6. 17. 10:01
class Person { name :string; age :number; constructor ( a :string ){ this.name = a; this.age = 20; } } 클래스를 만들 때 자바스크립트와 다른건 constructor밖에 속성들을 한번 써줘야한다는 것이다. 그리고 거기에 타입을 지정해주면 된다. 그리고 속성에 값을 넣을 때도 constructor의 파라미터에도 변수와 타입지정을 해줄 수 있다. 위처럼 constructor밖에 쓴 값을 필드값이라고 하는데, 차이는 new Person()을 사용할 때 파라미터로 뭔가 넣고싶으면 constructor로 만들어야 한다.