본문 바로가기
728x90
반응형

typescript16

[typescript] json-server라이브러리, react-typescript(styled-components) 폴더 생성 npx create-react-app builtin-functions --template typescript json-server라이브러리 사용하기 json 파일을 사용하여 간단한 시뮬레이션능 위한 REST API Mock server 구축할 수 있는 툴입니다 설치 npm install -g json-server 구동하기 터미널 - cmd 설정 json-server --watch data.json파일 경로 --port 3003 data.json 파일은 만들거임 실습 db폴더 생성 data.json { "subjects": [ { "id": 1, "title": "javascript" }, { "id": 2, "title": "php" }, { "id": 3, "title": "react" },.. 2023. 2. 24.
[typescript] typesafe-actions 라이브러리 typesafe-actions 라이브러리 적용하기 리덕스 모듈을 굉장히 짧게 코드를 줄여줌 리덕스 모듈 구조 액션타입/ 액션생성함수/ 리듀서/상태타입 설치 npm install typesafe-actions 1. 액션 타입 변경 const INCREASE = "counter/INCREASE" as const → const INCREASE = "counter/INCREASE" 2. 액션 생성 함수 구문) import { deprecated } from "typesafe-actions"; const {createStandardAction, createAction} = deprecated; createStandardtAction(액션타입) createAction(액션타입) action()함수는 액션객체를 만드.. 2023. 2. 24.
[typescript]react-typescript(redux) 지금까지 사용한 상태관리 useState() useReducer(reducer, state) 2023.02.20 - [typescript] - [typescript]react - typescript(useState) [typescript]react - typescript(설치, useState) 설치(cmd) npx create-react-app ts-react --template typescript VScode 에디터에서 터미널 열고 설치 npm install -g typescript 1. props 전달시 props 타입을 interface로 지정해야한다. ex) interface HelloProps = { name: string } const H uou413.tistory.com 2023.02.21.. 2023. 2. 24.
[typescript] as & ReturnType as type ex) as number 얘는 넘버타입이야!!라고 지정 타입선언 const green:Preson = {name: "aaa"} 타입은 Person 타입단언 const green = {name: "bbb"} as Person 타입은 Person *타입 단언을 사용하면 타입체크를 하지 않음 타입체커에게 오류를 무시하도록 함 밑에 실습을 보면 {name: "aaa", age: 30} 속성 age가 추가되면 타입선언은 에러가 발생되는데 타입단언은 에러 없음 이유는 타입스크립트가 추론한 타입이 있더라도 Person 타입으로 간주함 실습 import React from 'react'; import logo from './logo.svg'; import './App.css'; interface Pers.. 2023. 2. 24.
[typescript] react-typscript(useReducer + contextAPI) useReducer 알아보기 2023.01.14 - [react] - [React] Hook 함수정리3(useReducer) [React] Hook 함수정리3(useReducer) useReducer를 알기전에 상태를 업데이트 할때는 useState를 사용해서 새로운 상태를 설정해주었는데 상태를 관리하게 될 때 useState를 사용하는거 말고도 또 다른 방법 useReducer!!!!! 새로운 상태관리~~ u uou413.tistory.com contextAPI 알아보기 2023.01.10 - [react] - [React]Hooks함수 정리1(useState, useRef, useEffect, useContext) [React]Hooks함수 정리1(useState, useRef, useEffect, .. 2023. 2. 24.
[typescript] react-typscript(usereducer) useReducer 사용하기 reducer 함수 생성 올수 있는 액션객체를 유니언 타입으로 쭉 나열 type Action = {type: 'INCREASE'} | {type: 'DECREASE'} function reducer(state: number, action: Action): number { //카운터를 바꿀거기때문에 상태하고 리턴값 타입은 number } 연습해보기 실습 App.tsx import React from "react"; import ReducerSample from "./components/ReducerSample"; function App() { return ( ); } export default App; components폴더안에 ReducerSample.tsx ///리듀서 연습.. 2023. 2. 24.
[typescript]react - typescript(설치, useState) 설치(cmd) npx create-react-app ts-react --template typescript VScode 에디터에서 터미널 열고 설치 npm install -g typescript 1. props 전달시 props 타입을 interface로 지정해야한다. ex) interface HelloProps = { name: string } const Hello ({name}: HelloProps) => {} 2.상태의 타입의 지정 const [state, setState] = useState(0) 상태타입이 변경되지 않는 경우는 제네릭 타입 생략해도됨 상태가 null일수도 있고 아닐수도 있을 때 제네릭을 활용하여 지정 ex) type stateobject = {name: string, age: n.. 2023. 2. 24.
[typescript] class 접근제한자, 정적멤버(static), 추상클래스(abstract) 클래스 구문 클래스는 필드와 메소드로 구성되어있다 class Animal { constructor(kind){ this.kind = kind; } } class Cat extends Animal { constructor(name, age, kind){ super(kind) this.name = name; //여기를 필드라고 함 this.age = age; } printName(){ console.log(this.name) this.sound(); } sound() { console.log("야옹") } } 타입스크립트 클래스 구문 class Animal { kind: string constructor(kind: string){ this.kind = kind; } } class Cat extends Ani.. 2023. 2. 24.
[typescrip] Generic(제네릭) 재사용을 목적으로 함수나 클래스의 선언 시점이 아닌 사용 시점에 타입을 선언 타입을 인수로 받아서 사용 타입변수는 사용자가 제공한 타입으로 변환될 식별자이다 음.... 그러니깐 전달받은 타입을 사용하도록 함!!! 사용하는 쪽에서 타입을 결정!! 제네릭 사용하는 예시 function getSize(arr:number [] | string [] | boolean [] | object []): number{ return arr.length; } const arr1 = [1,2,3]; getSize(arr1) // 3 const arr2 = ["a", "b", "c", "b"] getSize(arr2) // const arr3 = [false, true ,true, false] getSize(arr3) cons.. 2023. 2. 24.
[typescript] Enum 열거형 타입 숫자 혹은 문자열 값 집합에 이름을 부여할 수 있는 타입 값의 종류가 일정한 범위로 정해져 있는 경우 유용함. 구문 ) enum name { 값1, =======>0번째 값2, =======>1번째 값3 =======>2번째 } 실습 enum Week { Sun, Man, Tue=7, // Tue=7 값을주면 7 8 9 10 순으로 지정됨 Wed, Thu, Fri, Sat } enum Color { Red = "red", Green = "green", Blue = "blue" } console.log(Week.Man); //1 console.log(Week.Sat); //11 console.log(Week.Wed); //8 console.log(Week[0]); //Sun console.log(Week[.. 2023. 2. 24.
[typescript] 배열타입 구문) type[ ], Array 1. 문자열만 가지는 배열 //문자열만 가지는 배열 let strarr: string[] = ["a", "b", "c", "d", "e",] //or let strarr2 : Array = ["🍔","🍟","🌭"]; 2. 숫자만 가지는 배열 //숫자만 가지는 배열 let numarr : number[] = [1, 2, 3, 4, 5] //or let numarr2 : Array = [1, 2, 3, 4, 5] 3. 숫자와 문자열 가지는 배열 //숫자와 문자열가지는 배열 let numstrArr : (number | string) [] = [1, 2, "a"] //or let numstrArr2 : Array = ["가", 1, "a"] 4. 객체 타입을 가지는 배열 //.. 2023. 2. 24.
[typescript] 함수 함수타입선언 매개변수에 타입설정, 리턴값에 타입설정 1)인수와 반환 값이 있을 때 let myFunction: (arg1: number, arg2: number) => number; myFunction = function(x,y){ return x + y } //화살표 함수 myfunction =(x,y) => { return x + y } let num:number = myFunction(10,20); console.log(num) function myFunction2(x: number, y: number): number { return x + y } 2)인수와 반환값이 없을 때 void (리턴이 없을때 사용) function myFunction3() : void { console.log("hi"); .. 2023. 2. 24.
[typescript] interface interface(반복적인 사용을 원하는 경우) 타입스크립트의 여러 객체를 정의하는 일종의 규칙이며 구조이다 1. 객체의 타입정의 interface 인터페이스이름 { readonly key:key 타입; key?: key타입 } 2. 함수의 타입정의 interface 인터페이스 이름{ 호출 시그니쳐 정의 (parameter: paremetertype): return type } 3. 클래스의 타입정의 implements 키워드 사용 실습 //객체는 프로퍼티에 대한 타입을 지정함 //옵셔널 프로퍼티 ?키워드 ---> 프로퍼티가 있어도되고 없어도됨 ?없으면 에러뜸 //읽기 전용 프로퍼티 ====> readonly키워드 //interface IUser {readonly name: string, age:numb.. 2023. 2. 24.
[typescript] 타입 기본 1) 타입 추론 타입스크립트는 타입 표기가 없는 경우 코드를 일고 분석하여 타입을 유추할 수 있음 (코드를 보고 추론하는것) ex) let str1 = "green" str1 = 10 2) 타입 명시 변수 선언시 변수값의 타입을 명시함으로써 변수 값의 테이터 타입을 지정 ex) let str1 = "green" let str2:string = "나는 영원히 문자열타입 변수야" 3)타입 선언 1.변수 타입 선언 let 변수명 : type number, string, boolean, null,undefined object, Array, type[] any 타입 : 항목의 값을 지정할 수 없을때 사용 유니언 타입( 다중 타입) - 2개이상의 타입을 허용하는 경우 let array: (string | numbe.. 2023. 2. 24.
[typescript] 기초 1-1(터미널 출력) 터미널에 출력 방법 타입스크립트 파일 작성하고 tsc 입력 후 변환 type05_enum.ts ----> type05_enum.js enum Week { Sun, Man, Tue, Wed, Thu, Fri, Sat } console.log(Week.Man); console.log(Week.Sat) 변환된 자바스크립트 파일은 dist파일에 넣었으므로 터미널 주소를 dist 폴더 위치로 변경 후 터미널에 출력 하고 싶은 파일 node type05_enum.js 입력 2023. 2. 16.
[typescript] 타입스크립트 사이트, 설치, 컴파일 설정 타입스크립트!!!!! 시작!!!!! 2012년에 발표 대규모 javascript 애플리케이션 개발 microsoft오픈소스 프로그래밍 언어 -자바스크립트의 상위 집합 -자바스크립트를 사용, 모든 기능 포함 -자바스크립트에 포함되지 않는 새로운 기능 -정적인 언어 *자바스크립트와 가장 큰 차이!!!!!! 자바스크립트는 동적인 언어이며 프로그램 구동 중에 타입이 다이나믹하게 변경되나 타입스크립트는 정적인언어이며 프로그램을 작성할 때 타입을 정의함 웹브라우져가 해석할수 있는 언어 html, css, javascript 컴파일(컴퓨터가 이해할 수 있는 언어로 변경) scss >>>>> css typtescript >>>>>>> javascript 타입스크립트의 장점 1. 버그를 줄이고 유지보수하기 쉬움, 질좋은.. 2023. 2. 15.
728x90
반응형