Typescript
-
Html변경과 조작 시 주의점Typescript 2022. 6. 17. 02:32
타입스크립트로 html조작이 가능한데, 좀 다르다고 한다. 먼저, html파일을 만들고, 안녕하세요 링크 버튼 위처럼 만든 후, 타입스크립트에서 let 제목 = document.querySelector('#title'); 제목.innerHTML = '반갑소' 이렇게 쓰면, 에러가 난다. 제목이 element | null이라고 해서 에러가 나는데, document로 찾을 때 잘못찾으면 null이 나오고, 잘 찾으면 element가 나와서 union이 된 것이다. 그래서 narrowing을 해줘야 한다. 그래서 let 제목 = document.querySelector('#title'); if (제목 != null) { 제목.innerHTML = '반갑소' } 이렇게 null이 아니면 html을 조작하라고 바..
-
함수와 methods에 type alias지정Typescript 2022. 6. 16. 16:38
type 함수타입 = (a :string) => number; //string타입의 자료를 넣을 수 있고, number타입의 자료만 return된다. 이렇게 함수도 type alias를 사용할 수 있다. 하지만 이렇게 만든 타입변수를 함수에서 사용하는 법은 다르다. let 함수 :함수타입 = function (a){ return 10 } 이런 식으로, 변수를 만들어서 거기에 타입을 지정해줘야 한다. 이제, object 자료 안의 함수를 지정하는 method를 알아보자. let 회원정보 = { name : 'kim', age : 30, plusOne (x){ return x + 1 }, changeName : () => { console.log('안녕') } } 회원정보.plusOne(1); 회원정보.ch..
-
Literal TypesTypescript 2022. 6. 16. 16:16
let 이름 :string; 이렇게 이름이란 변수에는 문자를 넣으세요 가 아니라 더 엄격한 타입지정을 할 수 있다. let 이름 :'Kim' | 'Lee' 이렇게 쓰면, 이름이란 변수엔 Kim과 Lee만 들어갈 수 있다. 이렇게 리터럴타입을 쓰면, 변수에 뭐가 들어올지 엄격하게 관리가 가능하고 자동완성기능이 생긴다. 리터럴타입을 알면 const변수를 좀 더 확장성있게 할 수 있다. let 나 :'이름 | 나이'; const 변수 = '이름'; 이런 식으로, 자료를 여러개 저장할 수 있다. 하지만, 문제점이 있다. var 자료 = { name : 'kim' } function 내함수(a : 'kim') { } 내함수(자료.name) 자료.name을 하면 'Kim'이 나오지만 에러가 난다. 이유는 liter..
-
type을 변수에 담기 & readonlyTypescript 2022. 6. 16. 15:24
타입도 변수에 담아서 사용할 수 있다. type Animal = string | number | undefined; let 동물 :Animal; 위처럼 type 변수명 이렇게 사용하며, 일반변수와 차별화하기 위해 첫글잔 대문자로 입력한다. 이렇게 type키워드로 변수만드는걸 type alias라고 한다. type Animal = { name : string, age : number } let 동물 :Animal = { name : 'Kim', age : 20 } 이렇게 Object도 가능하다. 잠깐 object의 readonly속성을 알아보자. const 출생지역 = 'seoul'; 먼저 const변수는 이렇게 선언 할당하면 다시 출생지역 = 'busan';이런 재할당을 할 수 없다. 근데, const ..
-
타입 확정하는 narrowing & assertionTypescript 2022. 6. 16. 14:04
저번에 number | string 이렇게 타입을 지정하고 연산을 하면 number인지 string인지 몰라서 엄격한 타입스크립트에선 에러가 나는걸 볼 수 있었다. 여기서 narrowing을 활용하면 해결할 수 있다. function 내함수(x :number | string){ return x + 1 //에러남 } 이걸 function 내함수(x :number | string){ if (typeof x === 'number') { return x + 1 } else if (typeof x === 'string') { return x + 1 } else { return 0 } } 이렇게 typeof로 number인지 string인지 if문으로 narrowing을 해줘야한다. 예제로 function 내함수(..
-
함수에 타입 지정 & void타입Typescript 2022. 6. 16. 13:18
function 함수(x :number) :number { return x * 2 } 이런 식으로, 파라미터의 변수타입 지정과 ()밖에 입력하면서 return의 변수타입도 지정할 수 있다. 그리고 함수에서만 사용가능한 void타입이 있다. void타입은 return을 쓰고싶지 않을때 사용한다. function 함수(x :number) :void { 1 + 1 } 위처럼 아무것도 안쓰던가, 엄격하게 하려고 void를 써주면 된다. 이러면 실수로 return되는걸 막아줄 수 있다. 그리고 자바스크립트와는 다르게 타입이 지정된 파라미터는 필수로 적어줘야 한다. 이게 싫다면 파라미터변수? :타입 이렇게 옵션으로 만들어주면 된다. function 함수(x? :number) :void { 1 + 1 } 여기서, ?..
-
타입을 미리정하기 애매할때 (any,unknown,union)Typescript 2022. 6. 16. 11:24
만약, 다양한 타입이 들어올 수 있게 하려면 Union type이라해서 let 이름 :(string | number) = 123; 이렇게 할 수 있으며, 응용해보면 object와 array도 가능하다. var 어레이: (number | string)[] = [1,'2',3] var 오브젝트: {data : (number | string) } = { data : '123' } 위처럼 괄호로 묶어서 하면 문자,숫자 둘 다 가능하게 사용가능하다. 또한 any타입이 있다. let 이름 :any; 이름 = 123; 이름 = ㅅㄱ; 이렇게 쓰면, 모든 자료형을 허용해준다. any타입은 약간 타입실드를 해제하는 문법이라고 보면 된다. 그리고 unknown이란 타입이 있다. let 이름 :unknown; 이름 = 12..
-
기본 타입정리Typescript 2022. 6. 16. 10:20
이제 간단한 문법을 알아보자. let 이름 :string = 'kim'; 이렇게 변수의 타입을 지정할 수 있다. 타입엔 number,boolean, [], {} 등 다 들어갈 수 있다. 대신 어레이타입을 지정하려면 :string[] 이런 식으로 어레이안에 들어갈 타입도 지정해줘야 한다. 그리고 오브젝트는 :{name : string} 이런 식으로 키값을 쓰고 value에 어떤 타입이 들어올 지 정해주면 된다. let 내노래 :{song :string, singer :string} = { song : "사랑했기때문에", singer: "유재하" } 여기에, :{name? : string} 이렇게 name속성은 옵션이에요 라고 지정할 수 있다. 초보들은 모두 타입을 지정하지만 타입스크립트는 원래 자동으로 타..