본문 바로가기

전체 글236

interface를 타입으로 사용 type 키워드가 아니라 interface로도 같은 방법으로 사용할 수 있다. 둘의 사용하는 방법의 차이는 아래와 같다. // type type Person = { name : string, age : number } // interface interface Person {// = 이 없음 name : string;// 세미콜론으로 함(,도 가능하긴함) age : number; } interface가 type 대비 좋은 점은 extends가 가능하다. class 문법과 비슷한 개념이다. type도 & 키워드로 비슷한 기능을 사용할 수 있으나, 내부적으로 구동하는 방식에 차이가 있다. 가령 A, B 타입이 있고 C = A & B 라고 하면 이 것은 extends의 의미가 아니라 A도 만족하고 B도 만족하는.. 2022. 1. 5.
typescript 에서 DOM 제어 셀렉터는 여러가지 방법이 있으니 편한대로 써도 된다. 주요점은 DOM에 있는 Element를 참조할 때 종류에 따라 다른 타입을 찾아야 한다는 점이다. 아래 코드를 보면 어떤 것은 HTMLAnchorElement, 어떤 것은 HTMLImageElement 등으로 나뉘어져 있는 것을 볼 수 있고 그 외에도 다양한 종류가 있다. let title = document.querySelector("#title"); if(title != null) { // title의 innerHTML 속성 변경 title.innerHTML = "제목 변경" } if(title instanceof Element) { } let title2 = document.querySelector("#title") as Element; if(t.. 2022. 1. 5.
class, factory function, prototype type alias로 타입을 지정하는 방법도 있지만, 실제로 javascript에서 지원하는 방법은 아니기 때문에 js로 컴파일 될 때 type은 날아간다. 이를 방지하기 위해서는 class를 이용해 object를 만드는 방법이 있다. class 혹은 factory function으로 instance를 만들어 사용할 수 있도록 할 수 있다. 개념적으로는 일반적인 java나 kotlin의 class와 비슷하지만, 어디까지나 데이터 혹은 prototype에 등록하여 사용할 함수를 위한 목적이 강하다. factory function은 class 키워드가 도입되기 전에 사용했던 문법으로 기능적으로는 비슷하지만 자세히 들여다보면 같은 기능임에도 조금 차이가 나긴한다. 어느 문서에 따르면 class가 메모리 측면에.. 2022. 1. 3.
type alias & readonly & type alias extends, literal type과 as const 타입을 다 기재할 필요 없이 변수에 담아 사용 가능하다. // 아래 변수의 타입을 let value: string = "lee"; // alias해서 사용 type Name = string; let newValue: Name = "lee"; const 변수는 값을 바꿀 수 없지만, object의 내용은 바꿀 수 있다. 그래서 그 값을 변경하지 못하도록 readonly로 만들 수 있다. const name = "lee"; name = "kim";// 에러 const value = { name : "lee", age : 25 }; value.name = "kim";// 에러 안남 type Person = { readonly name : string, age : number } const newValue : .. 2022. 1. 1.
맥북 한영키 오른쪽 CMD키로 변경하기 1. 오른쪽 커맨드를 한영키로 사용하시는 분들을 위한 팁입니다. Big Sur에서는 Karabiner가 작동하고 있지 않습니다. 애플에서 자체적으로 지원하고 있는 방법이 있는데요. hidutil을 이용하는 방법입니다. 터미널을 켜셔서 --> 아래서 부터 mkdir -p /Users/Shared/bin printf '%s\n' '#!/bin/sh' \ 'hidutil property --set '"'"'{"UserKeyMapping":[{"HIDKeyboardModifierMappingSrc":0x7000000e7,"HIDKeyboardModifierMappingDst":0x70000006d}]}'"'" \ >/Users/Shared/bin/userkeymapping chmod 755 /Users/Shar.. 2021. 12. 29.
맥북 더 높은 해상도 추가하기 대부분 1680 1050으로 쓰실거라 생각됩니다. 저도 그랬고요 1920 1200으로 써도 그렇게 안 불편할거 같은데 왜 안되지 해서 찾아보니 저같은 생각을 하신 분들이 이미 계시더라구요 https://x86.co.kr/macos/5837023 https://x86.co.kr/macos/6063023 이 사이트를 보고 파일을 받아 적용해보니 1920 1200 해상도가 추가는 되는데 기존 1680 1050 해상도가 없어지더군요 1600 1000 해상도로 바뀌는데 그냥 기존 해상도 + 추가 해상도로 안되나 해서 기존 파일과 합쳐보니 바로 잘 적용되네요 hidpi 잘 적용됩니다. 써보니 2048 1280 해상도도 글씨가 작긴해도 hidpi가 적용되니 쓸만합니다 https://mega.nz/file/c1cnHK.. 2021. 12. 29.
(Union | any | unknown) 타입들, 안전하게 코딩하기 위한 Narrowing과 Assertion에 대한 짧은 이야기 특수한 타입으로 볼 수 있는 세가지 타입에 대해 이야기한다. Union은 여러개의 타입 중 하나가 들어갈 수 있는 것(or 개념) any는 js처럼 모든 타입을 허용한다. 연산 등에서도 에러를 뱉지 않기 때문에 사실상 ts를 사용하는 의미를 상실한다. unknown은 any와 용도가 비슷하지만 몇가지 상황에 대해 타입 체크를 하여 연산 등을 허용하지 않아 더 안전하다. any를 사용해야 한다면 unknown으로 하자. 예제는 아래 // 여러가지를 쓸 수 있는 유니온타입 type Union = (string | number | boolean)[] let members: Union = [1,2,3,'lim',true]; // 아무거나 다 되는 애니타입 // 타입스크립트의 의미가 없어진다. let ay: an.. 2021. 12. 29.
typescript의 변경 규칙을 위한 환경설정파일(tsconfig.json) typescript 그대로는 브라우저가 읽지 못하기 때문에 js로 변환이 되어야 한다. 변환될 때 어떤 규칙에 따라서 할 것인지를 설정하기 위한 파일이 tsconfig.json이며, package.json과 같은 root에 위치한다. 기본적으로는 아래처럼 작성한다.(intellij 기준 자동으로 아래처럼 채워진다) target은 어떤 버젼의 js로 변환할지 결정한다. 더 신버젼을 원할 경우 es2016, esnext 등으로 기입한다. module은 import export 규칙을 결정한다. commonjs는 require문법, es2016, esnext는 import 문법 브라우저 호환성을 위한다면 아래 기본형태가 낫겠고, 일렉트론 같이 특정 브라우저 한정으로 돌아가는 애플리케이션이라면 가능한 최신 문법.. 2021. 12. 29.
Typescript 기본 문법 정리 typescript의 간단한 기본 문법을 정리한다. 기본적으로 타입스크립트의 사용 목적 자체가 특정 객체(변수, 함수, 클래스의 파라미터 등등)에 타입을 지정하고 다른 타입의 사용을 막아서 예기치 않은 에러를 막기 위함이다. 코틀린의 문법과 상당히 유사하게 사용되기 때문에 형태에 이질감은 없었다. 아래 나열 // 변수 만들기 // 문자만 넣을 경우 let name1: string = 'kim'; // name1 = 1; // 에러 남 // 문자열 배열 let array: string[] = ['김','박']; // let array1: string[] = ['김',3]; // 문자열 아닌걸 넣으면 에러 let obj: { name: string } = { name: 'kim'}; let obj1: { n.. 2021. 12. 29.

티스토리툴바