타입스크립트 (14) 썸네일형 리스트형 [Typescript] - 함수 표현식 전체에 타입 구문 지정하기 자바스크립트에서는 함수 문장과 표현식을 다르게 인식한다. 타입스크립트에서는 함수 표현식을 사용하는 것이 좋다 함수의 매개 변수부터 반환값까지 전체를 함수 타입으로 선언하여 함수 표현식에 재사용 할 수 있다는 장점이 있기 때문이다. 위 예제를 확인해보면 타입스크립트에서는 이미 sides의 타입을 number로 인식하고 있다 예시가 간단해서 함수 타입을 선언할 수 있다는 것이 장점으로 와닿지 않을 수 있다 함수 타입 선언의 장점을 좀 더 알아보자. 함수 타입의 선언은 불필요한 코드의 반복을 줄인다 사칙 연산을 하는 함수 네 개 예제를 보자 위와 같은 예제들을 반복되는 함수 시그니처를 하나의 함수 타입으로 통합할 수 있다. 확실히 타입 구문이 적어 졌다 또한 함수 구현부도 분리되어 있어 로직이 보다 분명해졌다.. [Typescript] - declare와 d.ts 파일 declare declare 키워드는 컴파일러에게 해당 변수나 함수가 이미 존재한다는 것을 알리는 역할을 한다 다른 영역의 코드에서 decalre로 선언된 해당 변수나 함수를 참조할 수 있으며 declare로 선언된 부분은 javascript로 컴파일 되지 않는다. 사용 예시로 만약 컴파일러가 인식하지 못하는 자바스크립트 파일을 웹사이트에 추가했다고 가정해보자 foo.com과 같이 다른 도메인에서 온 스크립트 파일일 수도 있다 해당 스크립트 파일은 실행되면서 api메서드를 생상하고 이를 글로벌 스코프에 있는 fooSdk 식별자에 할당한다. 만약 타입스크립트 코드에서 fooSdk.doSomething()를 호출한다면 컴파일러는 해당 변수가 존재하는지 알지 못하기에 컴파일 에러를 발생시킨다. 이때 decla.. [TypeScript] - tsconfig.json 분석 -타입스크립트 프로젝트는 타입스크립트 컴파일러의 설정 파일인 tsconfig.json파일이 있어야 다음과 같은 명령어로 tsconfig.json을 만들 수 있다. ts --init - 위 명령어로 만들어진 tsconfig.json을 보면 실제 개발을 진행하는데 필요한 많은 옵션이 들어있다 - 보통은 프로젝트에 필요한 옵션만 설정해서 간략하게 한다. - include 항목에서 [src/**/*]은 src디렉터리는 물론 src 하위 디렉터리에 있는 모든 파일을 컴파일 대상으로 포함한다는 의미이다. tsconfig.json 살펴보기 1 ) module - 타입스크립트 소스코드가 컴파일되어 만들어진 ES5 자바스크립트 코드는 웹 브라우저와 Node.js 양쪽에서 모두 동작해야 한다 그런데 웹 브라우저와 Node.. [TypeScript] - is 키워드 * is 'is' 키워드의 역할은 타입 좁히기 즉 타입 가드인데 예제를 들어서 알아보자 위 예제에서 'test is string' 이 의마하는 것은 IsString 함수의 반환 형식에 boolean을 사용하는 대상이 호출 된 후 함수가 true를 반환하면 타입스크립트는 test의 타입을 string으로 좁힌다는 것을 의미한다 즉 tyof test의 값이 'string;일 겨ㅑㅇ우 test의 타입은 string으로 좁혀지는 것이다. 따라서 example 함수에서 foo라는 매개변수의 타입을 any로 지정했지만 타입 체커는 foo가 6번째 줄에 있는 if문 블록에서는 string 타입을 갖게되는 것이다 아래 예제도 is 키워드를 활용한 예제이다 살펴보면 getElementContent 함수의 매개변수로 받은.. [TypeScript] - 함수 오버로딩 타입스크립트에서 함수 오버로딩이란 ? 오버로딩의 일반적인 개념은 이름은 같지만 매개변수 타입과 반환 타입이 다른 여러 함수를 가질 수 있는 것을 말한다 타입 스크립트에서는 같은 이름의 여러 개를 정의할 수 있다 이때 각 함수는 서로 다른 타입을 가지는 매개변수로 선언되어야 한다. 매개변수의 개수는 동일하지만 타입이 다른 경우 두 개의 함수 선언과 하나의 함수 구현이 있는 동일한 함수가 존재한다 첫번째 함수선언은 문자열 타입인 두 매개변수를 가지며 두번째 함수 선언은 숫자형인 두 매개변수를 가진다. 마지막 함수에는 함수의 본문을 구현해야 한다 반환 타입은 위에서 선언한 두개의 함수에 따라 문자열 또는 숫자형 일 수 있으므로 any 타입으로 정의하며 매개변수도 any 타입으로 정의한다. 매개변수의 개수는 다.. [Typescript] - const assertion ( + enum) 리터럴 타입 Typescript 에서는 포괄적인 타입 (string, number, boolean) 외에도 정확한 값을 설정하는 것이 가능하다. 위 예제처럼 typescript 문자열을 title에 타입으로 부여하면 아래와 같이 title에 typescript가 아닌 다른 값을 입력하면 컴파일 에러가 발생한다. 이는 string, number 등 포괄적인 의미를 담고 있는 primitive type 뿐만 아니라 typescript 문자같은 정확한 값을 타입으로 선언할 수 있다. 타입 추론 정적 타이핑을 해주는 언어에는 대개 타입추론 이라는 기능이 포함되어 있다 선언하는 모든 변수마다 항상 그 타입까지 같이 적어주어야 한다면 매우 불편하다 이때 타입 추론을 지원하는 언어에서는 위에서 언급했던 리터럴 타입을.. [TypeScript] - 화살표 함수에서 제네릭 사용 방법 타입스크립트에서 일반적으로 제네릭 타입을 사용하는 예시다 하지만 보다시피 화살표 함수에서는 위와 같이 제네릭 타입을 사용하면 에러가 발생한다. 해결책은 제네릭 매개변수에서 extends를 사용하여 컴파일러에게 제네릭임을 알려주면 된다. [TypeScript] - 타입 호환 타입호환이란 ? 타입 호환이란 타입스크립트 코드에서 특정 타입이 다른 타입에 잘 맞는지를 의미한다. 구조적 타이핑 예시 구조적 타이핑이란 코드 구조 관점에서 타입이 서로 호환되는지의 여부를 판단하는 것이다. 위 코드에서 capt가 hero 타입에 호환될 수 있는 이유는 capt의 속성 중에 name이 있기 때문이다 Avengers인터페이스에서 name 속성을 갖고 있기 때문에 capt는 Avengers 타입에 호환될 수 있다. 함수를 호출할 때도 마찬가지이다 capt변수에 이미 name 속성 뿐만 아니라 location 속성도 있기 때문에 assemble 함수의 호출 인자로 넘길 수 있다. Soundness란 ? 타입스크립트는 컴파일 시점에 타입을 추론할 수 없는 특정 타입에 대해서 일단 안전하다고 보는.. 이전 1 2 다음
