typescript 기본

 

* typescript 시작.

npm init -y
npm install typescript
npx tsc --init

npm install typescript 를 해주면 node_modules/.bin/tsc 라는 바이너리가 설치된다.
npx tsc 명령어는 이를 실행시킨다. 만약 .bin 에 해당 명령어가 없다면 npx 서버 측의 것을 가져와 실행한다.

RegExp, setTimeout, console 등 기본 javascript 예약어 들 인식 못하는 것은 npm i -g typescript 하고 설정에서 typescript 실행경로를 Bundled 로 해주니 해결되었음.

src/1.ts 생성.
npx tsc 라고 입력하면 컴파일 된다.

npm install lodash
npm install @types/lodash




* typescript 의 적용 방식들.

d.ts 는 타입스크립트 선언 파일이다. 타입스크립트 코드의 타입 추론을 돕는 파일이다.
예를 들어, 전역 변수로 선언한 변수를 특정 파일에서 import 구문 없이 사용하는 경우 해당 변수를 인식하지 못한다. 그럴 때 아래와 같이 해당 변수를 선언해서 에러가 나지 않게 할 수 있다.
declare const global = 'sth';

해당 타입스크립트 파일에서 사용할 순 있지만 선언되어 있지 않은 전역 변수나 전역 함수는 아래와 같이 타입을 선언할 수 있다.
// 전역 변수
declare const pi = 3.14;

// 전역 함수
declare namespace myLib { // Use declare namespace to describe types or values accessed by dotted notation.
    function greet(person: string): string;
    let name: string;
}
myLib.greet('캡틴');
myLib.name = '타노스';

1. 시작부터 typescript
2. DefinitelyTyped
3. 기존 js 기반에 index.d.ts

DefinitelyTyped (The repository for high quality TypeScript type definitions)
https://definitelytyped.org
@types/xxx 라고 앞에 @types/ 붙는 타입 정의 라이브러리들을 모아 놓은 저장소이다.
아래 코드는 npm i -D @types/jquery 하지 않은 경우 타입스크립트에서는 제대로 동작하지 않는다.
import $ from 'jquery';
$(document).ready();
대중적으로 흔히 사용되는 자바스크립트 라이브러리는 대부분 @types 라는 별칭으로 타입스크립트 추론이 가능한 보조 라이브러리를 제공한다.
만약 이 라이브러리가 없는 경우에는 [스스로 선언하거나 다른 방법](아래 내용 작성 후 링크 제공)을 찾아보아야 한다.
@types 라이브러리의 내부 구조 - types 라이브러리는 일반적으로 index.d.ts 파일과 package.json 파일로 구성되어 있다.

/// <reference type ... />
/// <reference path ... />




* typescript 코드 목차.

typescript 의 중요 포인트 및 핵심 목차. (leajaeseung)
basic type
class
conditional type
generic
interface
mapped type
method overload
named parameters
type compatibility
type guard
type inference

typescript 의 중요 포인트 및 핵심 목차. (pangyo)
인터페이스 (4_interfaces)
타입별칭 (6_type-alias)
연산자를 이용한 타입 정의 (7_operator-union-intersection)
enum (2_type-advanced)
클래스 (5_classes)
제네릭 (8_generics)
타입추론 (9_type-inference)
타입단언 (2_type-advanced)
타입가드 (2_type-advanced)
타입호환 (12_type-compatibility)
실전 프로젝트로 배우는 타입스크립트.
유틸리티 타입
맵드 타입
코로나 현황판 실전 프로젝트




* tsconfig.json
https://joshua1988.github.io/ts/config/tsconfig.html#타입스크립트-설정-파일-속성

 

 

 

* type predicates (boolean 리턴값을 가지는 곳에 is 로 하여 타입 가드 해주는 것)

lin.es5.d.ts 를 보면 Array<T> 의 every 메소드의 타입이 두개가 오버로딩으로 구현되어 있는데 그 중 하나가 다음과 같다.

/**
* Determines whether all the members of an array satisfy the specified test.
* @param predicate A function that accepts up to three arguments. The every method calls
* the predicate function for each element in the array until the predicate returns a value
* which is coercible to the Boolean value false, or until the end of the array.
* @param thisArg An object to which the this keyword can refer in the predicate function.
* If thisArg is omitted, undefined is used as the this value.
*/
every<S extends T>(predicate: (value: T, index: number, array: readonly T[]) => value is S, thisArg?: any): this is readonly S[];

 

type predicates 는 여기서 value is S 부분과  this is readonly S[] 부분이다. S 는 Array<string> 과 같이 T 를 string 으로 넣어주면 해당 T 를 상속하는 형태를 가져야 한다. string 그리고 더 자세한 구현이 된 그런 것. predicate 함수는 value, index, array 인자를 받고 리턴값으로 boolean 값을 리턴하는데 every 는 이 predicate 에서 한개라도 리턴이 false 라면 false 가 되고 모두 true 라면 true 를 리턴한다. ['hello', 'hi', 'whatsup'].every(item => item === 'hi'); const ex = new Array<string>; ex.push('hello'); ... ex.every(item => item === 'hello'); 여기서 Array 의 T 가 string 이고 따라서 every 의 S는 T 를 상속하는 형태가 된다. 그리고 type predicates 의 경우 이렇게 boolean 을 리턴하는 경우에 타입가드를 해주는 역할을 하는데 리턴값이 boolean 이라면 원래 boolean 이라는 것이 value is S 있는 곳에 들어가야 하지만 이렇게 value is S 라고 해주게 되면 true 리턴시 이제 여기 every 에 인자로 넣은 value 는 S 타입이라고 타입 단언할 수 있게 되고 S 타입으로 단언되어 타입가드 역할을 해주게 되어 사용할 수 있게 해준다. 뒤에 this is readonly S[] 또한 every 메소드의 리턴이 boolean 인데 해당 배열의 모든값이 조건에 해당할 경우 결과값을 true 를 리턴하고 그럴 경우에 this 는 readonly S[] 타입으로 타입 단언을 해주어 그 다음 로직에서 readonly S[] 타입으로서 사용할 수 있게 해준다.

 

export function contains<T extends string>(
  list: ReadonlyArray<T>,
  value: string,
): value is T {
  return list.some((item) => item === value);
}

 

이런 경우를 가졍해보면 value 가 string 이지만 type Bow = 'hello' | 'hi' | 'whatsup' 과 같은 경우도 들어갈 수 있다. Bow 타입이라면 이렇게 contains 를 거치고나서 아 list 에서 이 값을 포함하고 있어! 하고 true 가 리턴될 경우 

const val: string = 'hello';

const list = ['hello', 'hi', 'whatsup'] as const;

type Bow = typeof list[number]

if ( contains(list, val) ) { ... 여기서 val 는 이제 타입가드되어 Bow 타입으로 단언되어 사용할 수 있게 된다. }

 

 

 

 

 

https://blog.banksalad.com/tech/typescript-local-storage/?gclid=Cj0KCQjwwY-LBhD6ARIsACvT72O7OQhILPa-e9C1w2TwLbWUxMmJkA1DCSVfkEoC2pB_lGRvpUZ3_IAaAux5EALw_wcB 

 

https://merrily-code.tistory.com/157

 

https://www.s-core.co.kr/insight/view/활용도가-높아지는-웹-프론트엔드-언어-타입스크립/