본문 바로가기

JavaScript/Typescript

JavaScript/Typescript 2020. 12. 21. Typescript 입문 - 타입 단언 / 타입 가드 타입 단언 as 키워드를 통해 타입을 지정하면 타입스크립트 단에서 특별히 타입을 체크하지 않고 데이터의 구조도 신경쓰지 않는다. const hello = document.querySelector('.hello') as HTMLDivElement; 타입가드 interface Developer{ name: string; skill: string; } interface Person{ name: string; age: number; } function introduce(): Developer | Person{ return {name:'Hello', age:33, skill :"Cooking"} } const hello = introduce(); console.log(hello.skill) 기본적으로 유니온 타입..
JavaScript/Typescript 2020. 11. 29. Typescript 입문 - 제네릭 제네릭 제네릭은 c#, java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징입니다. function logText(text: T):T{ console.log(text); return text; } logText('hello'); 마치 타입을 함수의 파라미터 개념으로 받아올때 활용하는 개념이 제네릭이라고 할 수 있다. 제네릭을 활용하는 이유 function logText(text: string){ console.log(text); return text; } function logNumber(numbe: number){ console.log(number); return number; } 같은 기능을 하더라도 타입을 지정해주기 위해서는 위와같이 같은 기능이지만 타입이 다른 함수를 두가..
JavaScript/Typescript 2020. 11. 29. Typescript 입문 - 클래스 class Person { private name: string; public age: number; readonly log: string; constructor(name: string, age: number){ this.name = name; this.age = age; } } 타입스크립트에서 클래스의 사용법은 위와같다. constructor 위쪽 즉 최상단에 constructor부분에서 받아올 부분들의 type을 지정해주면된다. 여기서 private, public, readonly 등의 속성을 통해 외부 접근및 변화 불가능한 코드를 작성하게 할 수 있다.
JavaScript/Typescript 2020. 11. 15. Typescript 입문 - 인터페이스 / 타입 별칭 1. 인터페이스 - 변수 정의하기 인터페이스는 상호간의 미리 정의한 약속 혹은 규칙을 의미하는데 // 변수에 인터페이스 활용 interface User { age: number; name: string; } const onyou: User = { } User 내용을 정의하지 않으면 위와같은 에러를 표시해준다 2. 인터페이스 - 함수 정의하기 인터페이스를 활용해서 함수에도 정의가 가능하다. interface User { age: number; name: string; } // 함수에 인터페이스 활용 function getUser(user :User){ console.log(user); } const lee = { name : "lee" } getUser(lee); age가 비어있는 상태의 lee를 getU..
JavaScript/Typescript 2020. 11. 14. Typescript 입문 - 변수와 함수 타입 정의 데이터 타입 기본적으로 타입스크립트는 타입을 지정할때 변수 : 타입 으로 타입을 지정해주는 형태로 진행한다. 1. 문자열 선언 // TS 문자열 선언 const str2: string = "hello"; 2. 숫자 선언 // TS 숫자 선언 let num: number = 10; 3. 배열 선언 배열은 Array 방식으로 지정하는 방식 type[] 으로 지정하는 방식이 있다. // TS 배열 선언 let arr: Array = [1, 2, 3]; let heroes: Array = ["Capt", "Thor", "Hulk"]; let items: number[] = [1, 2, 3]; 4. 튜플 선언 튜플은 배열의 특정순서의 타입까지 지정하는 방식을 튜플이라고 한다. [type, type, ...] 방식..
JavaScript/Typescript 2020. 11. 13. Typescript 입문 - 타입스크립트 설치하기 타입스크립트를 설치하기 위해서는 먼저 Node의 버전을 체크하고 (10이상버전추천) npm i typescript -g typescript를 글로벌 설치해준다. 터미널 란에 tsc를 입력해서 출력이 나온다면 정상적으로 타입스크립트 설치가 완료된 상황이다. index.ts function sum(a: number, b: number): number{ return a + b; } sum(10, 20); 타입스크립트는 자바스크립트의 슈퍼셋 언어기때문에 이를 웹상에서 사용하게 진행하려면 컴파일 과정을 거쳐서 자바스크립트로 변환해주는 과정을 거쳐야한다. 컴파일을 진행하면 아래와 같은 index.js가 생성이된다. 위와같은 방식으로 node 상으로 컴파일을 진행할때 추가적인 옵션을 줄수있는데 tsconfig.jso..
JavaScript/Typescript 2020. 11. 13. Typescript 입문 - 타입스크립트를 사용하는 이유 index.html 사용자 정보 이름: 이메일: 주소: app.js // api url var url = 'https://jsonplaceholder.typicode.com/users/1'; // dom var username = document.querySelector('#username'); var email = document.querySelector('#email'); var address = document.querySelector('#address'); // user data var user = {}; function fetchUser(){ return axios.get(url); } function startApp() { fetchUser() .then(function (response) {..

티스토리툴바