Web/Typescript

반응형
반응형
Web/Typescript

[Typescript]함수와 메소드에 type alias 지정

함수와 메소드에 type alias 지정 type funcType = (a: string) => number; // 함수표현식 let func: funcType = function () { return 10; }; object 안에 함수 선언 let memberInfo = { name: "kim", plusOne(a: string): string { return a; } } let result = memberInfo.plusOne('plusOne'); 함수 안에 함수 선언(callback함수) - 위에 선언한 object안에 함수를 만드는 형태로 해봄 type funcType = (a: string) => number; type funcStringtype = (a: string) => string; le..

Web/Typescript

[Typescript]Literal Type로 만드는 const 변수 유사품

Literal Type 장점 1. 변수에 뭐가 들어올지 엄격하게 관리 가능 2. 자동완성 굿 3. const 변수처럼 사용할 수 있다. let name: "kim" | "park"; let me: "react" | "vue"; me = "react"; function func1(a: "hello") { console.log(a); } func1("hello"); function func2(): 1 | 0 { return 1; } func2(); // 가위, 바위, 보 만 파라미터로 들어갈 수 있고, 가위바위보 배열을 반환하는 함수 type game = "가위" | "바위" | "보"; function rockSissorPaper(a: game): game[] { return [a]; } Literal T..

Web/Typescript

[Typescript]타입변수에 담기(type alias) & 타입 extend하기

Type Alias(타입 변수에 담기) - 대문자로 시작(국룰), 뒤에 Type 붙이기(권장) type AnimalType = { name: string; age: number; }; let animal: AnimalType = { name: "kim", age: 15 }; // const는 변경 불가능한 변수지만, // 타입을 오브젝트로 지정하면 득정 키에 대한 값 변경 가능 const birthArea = "seoul"; const birthRegion = { name: "seoul" }; birthRegion.name = "busan"; console.log(birthRegion); type GirlFriend = { readonly name: string; }; const girlFriend: G..

Web/Typescript

[Typescript]타입을 미리 정하기 애매할 때 & 타입지정 & Narrowing

타입을 미리 정하기 애매할 때 - typescript에서는 any타입보다 unknown 타입을 권장 - 연산은 오직 number, bitint 등 타입에서만 가능하고 unknown, any타입, string | number 등 에서는 불가능 let name: string = "name"; let age: number = 50; let married: boolean = true; let members: string[] = ["kim", "park"]; let member: (string | number)[] = [123, "123"]; // 소괄호 필수 let anyName: any = true; let unknownName: unknown; // 권장 unknownName = 123; unknownNam..

Web/Typescript

[Typescript]컴파일시 세부설정(tsconfig.json)

[코딩애플.빠르게 마스타하는 타입스크립트] 참고 프로젝트 폴더에 tsconfig.json 파일을 생성한다. (리액트의 경우 자동으로 생성되어 있고, 필요한 부분만 추가하면 된다.) (리액트 기본 설정은 아래와같이 되어 있다.) { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch..

Web/Typescript

[Typescript]설치셋팅&기본문법

Typescript를 사용하는 이유 javascript는 Dynamic typing(타입을 알아서 바꿔줌)을 지원하는 언어이다. typescript는 타입을 지정해서 사용할 수 있어서 타입에러를 쉽게 잡아줄 수 있다. 🌿 설치세팅 01. 일반 HTML, CSS, JS 웹개발 시 타입스크립트 설치 npm install -g typescript 여기서 에러가 난다면, node 버전문제로 최신버전으로 업그레이드 해주면 해결된다. 1. 노드 버전 확인 : node -v 2. npm install -g n 명령어로 Node.js 버전을 관리할 수 있는 n이라는 모듈을 설치 3. n 모듈을 사용해 node.js 를 설치합니다. n 명령어와 함께 원하는 버전을 입력하면 됩니다. n stable : 안정 버전 n la..

emojiyeon
'Web/Typescript' 카테고리의 글 목록