본문 바로가기

반응형

Front-End/TypeScript

(15)
TypeScript #6 (예제로 보는 모듈 맛보기) 예제 .src/utils/makePerson.tsexport function makePerson (name: string, age: number) { return {name, age};}export function testMakePerson () { console.log( makePerson("Jane", 22), makePerson("Jack", 33), )} .src/index.tsimport { testMakePerson } from "./utils/makePerson";testMakePerson(); ts-node ./src/index.ts 명령을 사용하지만, index.ts 파일 한정으로 ts-node ./src 로 실행 가능ts-node ..
TypeScript #5 (클래스) 예문class Person2 { constructor(public name: string, public age?: number) {}}let jack2: Person2 = new Person2('Jack', 32)console.log(jack2) 생성자- 객체를 초기화 하는 기능- 생성자를 통해 전달된 값들이 객체의 속성으로 자동 할당class Person2 { constructor(public name: string, public age?: number) {}}※ constructor : 클래스가 인스턴스화(클래스로부터 객체가 만들어지는 것)될 때 실행되는 함수 매개변수 속성- 굳이 속성을 일일이 만들어서 호출해오지 않고, public을 붙여서 속성을 매개변수로 만듦.// 일반적인 방법 (길고..
TypeScript 기초 #4 (타입) ※ vscode ctrl + shift + `(백틱, 물결) 눌러서 터미널 창에서 아래 명령어 입력후 Entertsc type.js 숫자(number), 불리언(boolean), 문자열(string), 객체(object)// TypeScriptlet n: number = 1;let b: boolean = true;let s: string = "Hello";let o: object = {};// TypeScript에서의 타입 추론var n1 = 1;var b1 = true;var s1 = "Hello";var o1 = {};// JavaScriptvar n = 1;var b = true;var s = "Hello";var o = {};// 타입 추론var n1 = 1;var b1 = true;var s..
TypeScript 기초 #3 (TS에서 쓰는 문법들) ESNext 문법 비구조화 할당 (ESNext)let person = {name: "Jane", age: 22}let {name, age} = person // name = "jane", age = 22let array = [1,2,3,4]let [head, ...rest] = array // head = 1, rest = [2,3,4]let a = 1, b = 2;[a, b] = [b,a] // a = 2, b = 1 이 밖에도 클래스 (class) 모듈 (module) 생성기 (operator) promise async/await (비동기 관련)등이 있다. 타입스크립트 고유 문법 타입 주석과 타입 추론let n: number = 1let m = 2 // 타입 부분을 생략 가능 (= 타입 추론,..
TypeScript 기초 #2 (환경 구축 & 자주 쓰는 명령어) typescript 프로젝트 환경 구축 이전에 포스팅한 #0 글 보고 따라해서 typescript를 위한 바탕을 설치했다면, 이번에는 프로젝트를 만들 폴더로 가서 typescript에 필요한 구성 요소를 만들어준다. vscode 실행 후 ctrl + shift + ` (백틱, 물결) 눌러서 터미널 창 열기 npm init -y # npm init으로 package.json을 만들 때 따로 설정 안하고 즉시 생성입력하면 프로젝트 폴더에 package.json 파일 생성. tsc --init # TypeScript에 관한 설정 값을 담은 파일.입력하면 프로젝트 폴더에 tsconfig.json 파일 생성. node에 관련된 것은 # 특정 패키지 설치npm install 패키지명* npm i 와..
TypeScript 기초 #1 (typescript 개요) - JavaScript의 상위 집합(Superset)- 정적 타입을 지원하고 (static), 객체지향 기능을 강화한 언어 (OOPL)// JavaScriptlet message = "hello";// TypeScriptlet message: string = "hello"; ※ 변수 선언 시 ':(콜론) + dtype(데이터 타입)' 을 적어 융통성 있는 js보다 좀 더 엄격하고 확실하게 프로그래밍이 가능.- dtype : number(숫자), string(문자열), boolean(참/거짓), object(객체, 보통은 키:값의 딕셔너리 구조 {}) - 정적 타입 시스템컴파일 단계(실행 전에 이루어짐)에서 오류 발견 가능 (js는 실행할 때 오류 발견)런타임 버그 감소IDE(vscode 등)에서 ..
TypeScript 기초 #0 (설치) ※ 관리자 권한으로 PowerShell 실행 Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser- 보안이 빡센 PowerShell 환경에서 살짝 풀어주는 느낌의 명령어 나중에 귀찮아서 그냥 이번에 'A(모두 예)' 누름 $env:SCOOP='C:\Scoop'- 환경 변수 Scoop을 만들어서 경로를 'C:\Scoop'로 설정 iex (new-object net.webclient).downloadstring('https://get.scoop.sh')- 웹페이지에서 설치 스크립트를 통해 다운로드해서 PowerShell에서 실행 ※ 아래의 에러가 발생할 경우Running the installer as administrator is d..

반응형