Typescript
초기 구축
npm 초기화
npm init --yes typescript 설치
npm install -g typescripttypescript 컴파일
tsc <NAME>.ts // Default인 ES3로 컴파일
tsc <NAME>.ts -t ES5 // ES5로 컴파일 typescript 초기화 (tsconfig.json 생성)
- tsconfig.json 파일 생성 후 tsc 명령어로 컴파일 실행
tsc --init
tsconfig.json 파일 noImplicitAny 설정 : 타입 선언이 없는 변수를 자동으로 any로 지정하는 설정
// hello.ts
function add(a,b) {
console.log(a+b)
}- noImplicitAny : false 일 경우 → 자동으로 any로 형태 변환함
~/study/typescript/hello2 tsc 2 ↵ docker-desktop ⎈ 19:15:49
~/study/typescript/hello2 - noImplicitAny : true 일 경우 → 타입 선언이 없을 경우 에러 발생
~/study/typescript/hello2 tsc 2 ↵ docker-desktop ⎈ 19:14:57
hello.ts:1:14 - error TS7006: Parameter 'a' implicitly has an 'any' type.
1 function add(a,b) {
~
hello.ts:1:16 - error TS7006: Parameter 'b' implicitly has an 'any' type.
1 function add(a,b) {
~
Found 2 errors.typescript 변수 정리
null vs undefined 비교
- null은 값으로 인식되어 object 타입이 되기 때문에 사용하지 않는 것이 좋다. (undefined를 권장)
// null 자체는 비어있는 object type이 된다
// undefinded는 미할당되었기 때문에 undefinded 타입임
console.log(null === undefined) // false : === 은 값 뿐만 아니라 type 까지 검사 하기 때문에
console.log(null == undefined) // true : 두 개의 값이 동일하게 없기 때문에
console.log(undefined == undefined) // true : 할당되지 않아 동일하기 때문에typescript 함수 정리
기명 함수(이름을 지정한 함수)는 호이스팅 된다
- 함수를 선언하기 전에도, 함수를 선언한 후에도 호출할 수 있다(like var 변수).
익명 함수를 지정하면 호이스팅 되지 않는다
- 선언한 후에만 사용할 수 있다.
resultMultiplication(1,2) <- 익명함수이기 때문에 선언하기 전에 호출 불가 (컴파일 실패함) let resultMultiplication = function (a,b) { return a * b } resultMultiplication(1,2)
Class 정리
생성자(constructor) 함수의 매개변수에 접근 제한자(public, private, protected)가 생략되면 생성자 내부에서만 접근 할 수 있다. 그러나 접근 제한자나 readonly가 붙으면 멤버 변수가 된다.
//typescript
constructor(defaultBalance: number = 0, protected bankName : string = "happy bank",
readonly interestRate : number = 0.1 ){
this.balance = defaultBalance
}//javascript
class Account {
constructor(defaultBalance = 0, bankName = "happy bank", interestRate = 0.1) {
this.defaultBalance = defaultBalance;
this.bankName = bankName;
this.interestRate = interestRate;
this.balance = defaultBalance;
}Module 정리
default 모듈과 일반 모듈을 import할 때 default 모듈은 이름만 선언하고 일반 모듈은 {} 내부에 모듈 이름을 선언해야 한다.
//default 모듈 import
import profile from './default'
// default, 일반 모듈 import
import p, {hello} from './default2' Type casting 정리
1. + 연산자
// ts 코드
let myNum : any = "2017"
let num1 = +myNum
console.log(typeof myNum, myNum)
console.log(typeof num1, num1)
// 실행 결과
string 2017
number 20172. parseInt 함수
// ts 코드
let myNum : any = "2017"
let num1 = parseInt(myNum)
console.log(typeof myNum, myNum)
console.log(typeof num1, num1)
let myNum2 : any = "2017년"
let num2 = parseInt(myNum2)
console.log(typeof myNum2, myNum2)
console.log(typeof num2, num2)
// 실행 결과
string 2017
number 2017
string 2017년
number 2017 <- parseInt 함수는 숫자에 여러 문자가 섞여 있어도 숫자만을 선택하여 반환한다 3. Number 함수
// ts 코드
let myNum : any = "2017"
let num1 = parseInt(myNum)
console.log(typeof myNum, myNum)
console.log(typeof num1, num1)
let myNum2 : any = "2017년"
let num2 = Number(myNum2)
console.log(typeof myNum2, myNum2)
console.log(typeof num2, num2)
// 실행 결과
string 2017
number 2017
string 2017년
number NaN <- Number 함수는 숫자와 문자가 섞여있을 경우 NaN을 반환한다 RxJS를 활용한 데이터 스트림 처리
RxJS는 데이터 스트림에 대한 연산을 연산자(operator) 메서드를 이용해 연쇄적으로 처리한다.
- 설치 방법
npm install @reactivex/rxjs@5.5.6 --save- 예제
// ts 코드
import * as rx from '@reactivex/rxjs'
rx.Observable.of("a", "b", "c").subscribe((v) => console.log(v))
// js 코드(ES5)
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var rx = require("@reactivex/rxjs");
rx.Observable.of("a", "b", "c").subscribe(function (v) { return console.log(v); });
// 실행 결과
a
b
cAsync/Await (비동기 함수를 동기화하기)
async/await는 ES6(ES2015) 로 컴파일 해야한다.
호출하는 함수는 Promise 구문을 포함해 비동기 처리를 수행할 수 있어야 한다.
//ts
function delay2(msg : string) {
let ms : number = Math.floor(Math.random() * 1000 + 1)
return new Promise(function(resolve){
setTimeout(resolve, ms, msg)
}).then(function(v){
console.log(v, ms+"ms")
})
}
async function sync2(){
await delay2("A")
await delay2("B")
await delay2("C")
}
sync2()
// 실행 결과
A 787ms
B 396ms
C 631ms
Javascript 라이브러리를 타입스크립트에서 사용하려면 *.d.ts 파일로 된 타입 정의 파일(type definition file)이 있어야 한다.
typescript 용 javascript 라이브러리 검색
- TypeSearch 사이트(https://microsoft.github.io/TypeSearch/)에서 javascript 로 검색
webpack 번들링
webpack 설치
npm install -g webpack@3.11.0
// 실행 예제
webpack entry1.js build1.js
for문 대체 함수
map 함수
var names = ["Jack", "Jecci", "Ram", "Tom"];
var upperCaseNames = [];
for(let i=0, totalNames = names.length; i< totalNames ; i= i +1) {
upperCaseNames[i] = names[i].toUpperCase();
}
console.log(names)
console.log(upperCaseNames)
var names2 = ["Jack", "Jecci", "Ram", "Tom"];
var upperCaseNames2 = names.map(name => name.toUpperCase());
console.log(names2)
console.log(upperCaseNames2)forEach 함수
function print(name) {
console.log(name);
}
var names = ["Jack", "Jecci", "Ram", "Tom"];
for(let i=0, totalNames = names.length; i< totalNames ; i= i +1) {
print(names[i])
}
names.forEach((name) => print(name) )filter 함수
function isOdd(n) {
return n %2;
}
var numbers = [1,2,3,4,5];
var odd = [];
for(let i=0, total = numbers.length; i< total ; i= i +1) {
let number = numbers[i];
if( isOdd(number) ) {
odd.push(number);
}
}
console.log(odd)
var odd2 = numbers.filter(n => n % 2 )reduce 함수
var numbers = [1,2,3,4,5]
var result = 0;
for(let i=0, total = numbers.length; i< total ; i= i +1) {
result = result + numbers[i];
}
console.log(result)
var result2 = numbers.reduce((acc, val) => acc + val, 0)
console.log(result2)'Javascript' 카테고리의 다른 글
| [번역] 자바스크립트 예제로 배우는 함수형 프로그래밍 (0) | 2020.04.07 |
|---|---|
| [javascript ] javascript 로 form이나 element 값 얻어오거나 설정하기 (0) | 2018.07.07 |
| javascript에서 ajax로 외부 도메인 요청 시 Access-Control-Allow-Origin 에러가 발생하는 경우 해결법 (0) | 2016.11.25 |
| javascript로 타이머 구현하기 (0) | 2015.05.03 |